HTML tables are used to display data in a structured, grid-like format. A table consists of rows and columns,
with various elements that define its structure and presentation. The outermost element of is the
<table></table>
element. Then the table is split between the table head
<thead></thead>
and table body
<tbody></tbody>.
The table head is the row at the top defining the contents of the table and the table body is all the data that
is inside the table. These elements are further broken down into specific table row
<tr></tr>
elements. In this row, you can add the specific table headers
<th></th>
for the table head the table data
<td></td>
for the table body.
A table will generally only have one row within the header, whereas there may be multiple rows within the body
of the table. Just make sure that the amount of
<td></td>
elements in each of the rows of your table body matches the number of
<th></th>
elements in your table header row.
Some tables would include a footer
<tfoot></tfoot>
that has its own row and data points to summarise the table. Similarly, tables may need a title, added with the
<caption></caption>
element as the first child of the table element.
Code
<table>
<caption>Table Caption</caption>
<thead>
<tr>
<th>Heading One</th>
<th>Heading Two</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 value 1</td>
<td>Row 1 value 2</td>
<tr>
<tr>
<td>Row 2 value 1</td>
<td>Row 2 value 2</td>
<tr>
<tr>
<td>Row 3 value 1</td>
<td>Row 3 value 2</td>
<tr>
</tbody>
<tfoot>
<tr>
<td>Footer Summation 1</td>
<td>Footer Summation 2</td>
<tr>
</tfoot>
</table>
Result
| Heading one | Heading two |
|---|---|
| Row 1 value 1 | Row 1 value 2 |
| Row 2 value 1 | Row 2 value 2 |
| Row 3 value 1 | Row 3 value 2 |
| Footer summation 1 | Footer summation 2 |
Table data can be spread over multiple rows or columns using the
<colspan></colspan>
and
<rowspan></rowspan>
elements to match your needs
<th colspan="2">Details</th>
<td rowspan="2">Web Developer</td>