HTML Table with thead, tbody, and tfoot Elements
The <thead> section is used for headers that describe the columns of the table. The <tbody> section contains the main data rows. The <tfoot> section provides a footer row typically used for summary information or totals.
This structure follows best practices for organizing data in HTML tables and provides clear separation between the table header, body, and footer sections.
<!DOCTYPE html>
<html lang="en">
<head>
<title>
HTML Table with thead, tbody, and tfoot
</title>
</head>
<body>
<h2>Sales Report</h2>
<table border="1">
<thead>
<tr>
<th>Month</th>
<th>Product Category</th>
<th>Units Sold</th>
<th>Revenue ($)</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>Furniture</td>
<td>150</td>
<td>$15,000</td>
</tr>
<tr>
<td>February</td>
<td>Furniture</td>
<td>120</td>
<td>$12,000</td>
</tr>
<tr>
<td>January</td>
<td>Electronics</td>
<td>200</td>
<td>$25,000</td>
</tr>
<tr>
<td>February</td>
<td>Electronics</td>
<td>180</td>
<td>$20,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Total</td>
<td>650</td>
<td>$72,000</td>
</tr>
</tfoot>
</table>
</body>
</html>
Output:
How to Create Table in HTML?
HTML tables are essential for organizing and displaying data in a structured format on web pages. Creating a table in HTML is a fundamental skill for web developers. It is used for product information, presenting data analytics, or designing a pricing comparison chart, etc. This article provides a step-by-step guide on how to create tables in HTML.
Table of Content
- Elements of HTML Table
- Table Structure
- Basic Syntax of HTML Table
- Adding Table Heading to Rows
- HTML Table with thead, tbody, and tfoot Elements
Contact Us