In HTML, tables can be structured with a distinct header (`<thead>`), body (`<tbody>`), and footer (`<tfoot>`) sections. This structure helps to organize and differentiate the content within the table. Here's how you can use these elements:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table Header, Body, and Footer Example</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
th {
background-color: #f2f2f2;
}
tfoot {
background-color: #f2f2f2;
font-weight: bold;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Product</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Product 1</td>
<td>$10.00</td>
</tr>
<tr>
<td>Product 2</td>
<td>$20.00</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td>$30.00</td>
</tr>
</tfoot>
</table>
</body>
</html>
In this example:
- `<thead>` contains table header cells (`<th>`), typically used for column headings.
- `<tbody>` contains the main body content of the table, which consists of data cells (`<td>`).
- `<tfoot>` contains the footer rows of the table, often used for summarizing or providing totals.
Each section can have its own distinct styling if needed, as demonstrated with the background color applied to the table header and footer. This structure helps in maintaining semantic HTML and enhances accessibility by allowing screen readers to interpret the different parts of the table more accurately.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table Header, Body, and Footer Example</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
th {
background-color: #f2f2f2;
}
tfoot {
background-color: #f2f2f2;
font-weight: bold;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Product</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Product 1</td>
<td>$10.00</td>
</tr>
<tr>
<td>Product 2</td>
<td>$20.00</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td>$30.00</td>
</tr>
</tfoot>
</table>
</body>
</html>
In this example:
- `<thead>` contains table header cells (`<th>`), typically used for column headings.
- `<tbody>` contains the main body content of the table, which consists of data cells (`<td>`).
- `<tfoot>` contains the footer rows of the table, often used for summarizing or providing totals.
Each section can have its own distinct styling if needed, as demonstrated with the background color applied to the table header and footer. This structure helps in maintaining semantic HTML and enhances accessibility by allowing screen readers to interpret the different parts of the table more accurately.