HTML Tables
What are HTML Tables?
HTML tables allow web developers to arrange data into rows and columns. Tables are created using the <table> element.
Basic Table
Example
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
</tr>
<tr>
<td>Jane</td>
<td>30</td>
</tr>
</table>Table Elements
<table>- Defines a table<tr>- Defines a table row<th>- Defines a table header<td>- Defines a table cell<thead>- Groups header content<tbody>- Groups body content<tfoot>- Groups footer content
Table with Header and Footer
Example
<table>
<thead>
<tr>
<th>Product</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Apple</td>
<td>$1.00</td>
</tr>
<tr>
<td>Banana</td>
<td>$0.50</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td>$1.50</td>
</tr>
</tfoot>
</table>Colspan and Rowspan
Use colspan to merge cells horizontally and rowspan to merge cells vertically:
Example
<table>
<tr>
<th colspan="2">Name and Age</th>
</tr>
<tr>
<td rowspan="2">John</td>
<td>25</td>
</tr>
<tr>
<td>30</td>
</tr>
</table>