7.1 The <caption> Tag
The <caption>, <thead>, <tbody>, and <tfoot> tags are used to enhance the structuring and semantic markup of tables in HTML. They help organize data, making tables more understandable and accessible to both users and search engines.
The <caption> Tag
The <caption> tag is used to add a title to a table. It helps describe the table content and makes it more understandable for users and accessible for search engines.
Syntax:
<table>
<caption>Table Title</caption>
<!-- Table Content -->
</table>
Example:
<table>
<caption>Table Title</caption>
<tr>
<th>Name</th>
<th>Score</th>
</tr>
<tr>
<td>Ivan</td>
<td>90</td>
</tr>
<tr>
<td>Maria</td>
<td>85</td>
</tr>
</table>
7.2 The <thead> Tag
The <thead> tag is used to group the header rows of a table. It helps logically separate the table's header from its main content.
Syntax:
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<!-- Table Content -->
</table>
Example:
<table>
<thead>
<tr>
<th>Name</th>
<th>Score</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ivan</td>
<td>90</td>
</tr>
<tr>
<td>Maria</td>
<td>85</td>
</tr>
</tbody>
</table>
7.3 The <tbody> Tag
The <tbody> tag is used to group the main content of the table. It helps separate the main content from the table's header and footer.
Syntax:
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<!-- Table Content -->
</tbody>
</table>
Example:
<table>
<thead>
<tr>
<th>Name</th>
<th>Score</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ivan</td>
<td>90</td>
</tr>
<tr>
<td>Maria</td>
<td>85</td>
</tr>
</tbody>
</table>
7.4 The <tfoot> Tag
The <tfoot> tag is used to group the footer rows of a table. It usually contains summary or totals information.
Syntax:
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<!-- Table Content -->
</tbody>
<tfoot>
<tr>
<td>Total 1</td>
<td>Total 2</td>
</tr>
</tfoot>
</table>
Complete Example:
<table>
<thead>
<tr>
<th>Name</th>
<th>Score</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ivan</td>
<td>90</td>
</tr>
<tr>
<td>Maria</td>
<td>85</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Average Score</td>
<td>87.5</td>
</tr>
</tfoot>
</table>
Remembering this is actually pretty simple:
Explanation of Table Structure
<table>: outer container for the whole table<caption>: table title that helps describe its content<thead>: groups the header rows of the table<tbody>: groups the main content of the table<tfoot>: groups the footer rows of the table
Let's recap
Let's create a table with all the tags we've learned and style it.
<table>
<caption>Exam Results</caption>
<thead>
<tr>
<th>Name</th>
<th>Score</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ivan</td>
<td>91</td>
</tr>
<tr>
<td>Maria</td>
<td>94</td>
</tr>
<tr>
<td>Nina</td>
<td>89</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Average Score</td >
<td>91.33</td>
</tr>
</tfoot>
</table>
table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
font-size: 18px;
text-align: left;
}
caption {
caption-side: top;
font-weight: bold;
font-size: 20px;
margin-bottom: 10px;
}
th, td {
padding: 12px 15px;
border: 1px solid #ddd;
}
thead th {
background-color: #f2f2f2;
}
tbody tr:nth-child(even) {
background-color: #f9f9f9;
}
tfoot td {
font-weight: bold;
background-color: #f2f2f2;
}
GO TO FULL VERSION