Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
Semantic table structure involves grouping table rows into logical sections using<thead>,<tbody>, and<tfoot>. This improves accessibility and makes styling easier.
Header rows
Column titles
Body rows
Main data
Footer rows
Totals, summaries
This example shows a complete table structure with headers, body rows, and a footer with totals.
Structured table with all sections
<h3>Sales Report</h3>
<table>
<thead>
<tr>
<th>Product</th>
<th>Q1</th>
<th>Q2</th>
<th>Q3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Laptops</td>
<td>150</td>
<td>200</td>
<td>180</td>
</tr>
<tr>
<td>Tablets</td>
<td>100</td>
<td>120</td>
<td>140</td>
</tr>
<tr>
<td>Phones</td>
<td>250</td>
<td>300</td>
<td>280</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Total</th>
<td>500</td>
<td>620</td>
<td>600</td>
</tr>
</tfoot>
</table>Loading preview...
Purpose: Contains header cells that label columns
Details: Used with <tr> and <th> elements
Purpose: Contains the main data rows
Details: Can have multiple tbody elements for grouping
Purpose: Contains summary rows like totals
Details: Appears at the bottom of the table
<table>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Total</th>
<td>Sum</td>
</tr>
</tfoot>
</table>This example demonstrates styled tbody with alternating colors and a prominent footer section.
Structured table with alternating rows and totals
<h3>Monthly Budget</h3>
<table>
<thead>
<tr>
<th>Category</th>
<th>January</th>
<th>February</th>
<th>March</th>
</tr>
</thead>
<tbody>
<tr>
<td>Housing</td>
<td>$1200</td>
<td>$1200</td>
<td>$1200</td>
</tr>
<tr>
<td>Food</td>
<td>$400</td>
<td>$380</td>
<td>$420</td>
</tr>
<tr>
<td>Transportation</td>
<td>$200</td>
<td>$180</td>
<td>$200</td>
</tr>
<tr>
<td>Entertainment</td>
<td>$150</td>
<td>$200</td>
<td>$175</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Total Monthly</th>
<td>$1950</td>
<td>$1960</td>
<td>$1995</td>
</tr>
</tfoot>
</table>Loading preview...
The scope attribute on <th> elements helps screen readers understand table relationships.
For column headers
<th scope="col">
Name
</th>For row headers
<th scope="row">
John
</th>Table using scope attributes for better accessibility
<h3>Accessible Table Example</h3>
<table>
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Age</th>
<th scope="col">City</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">John</th>
<td>28</td>
<td>New York</td>
</tr>
<tr>
<th scope="row">Sarah</th>
<td>32</td>
<td>Los Angeles</td>
</tr>
<tr>
<th scope="row">Mike</th>
<td>25</td>
<td>Chicago</td>
</tr>
</tbody>
</table>Loading preview...