HTML Table Fundamentals
Tables are the correct HTML element for displaying tabular data — spreadsheets, schedules, price comparisons, and statistics. Learn the core table elements: <table>, <tr>, <th>, <td>, and how to structure accessible, semantic tables.
35 min•By Priygop Team•Last updated: Feb 2026
When to Use Tables
HTML tables should only be used for tabular data — information that logically belongs in rows and columns. Never use tables for page layout (that's CSS Grid and Flexbox). Screen readers announce tables as data grids and let users navigate cell-by-cell. A well-structured table includes <thead> for header rows, <tbody> for data rows, <tfoot> for summary rows, and <caption> for a descriptive title.
Table Elements
- <table> — Container for the entire table. Add border-collapse: collapse in CSS for clean borders
- <caption> — Describes the table's purpose. Screen readers read this first. Essential for accessibility
- <thead>, <tbody>, <tfoot> — Semantic grouping of header, body, and footer rows
- <tr> — Table row. Contains <th> or <td> cells
- <th> — Header cell. Has implicit scope (row or column). Bold and centered by default
- <td> — Data cell. Contains the actual content
- scope attribute on <th> — Explicitly associates headers with data: scope='col' for column headers, scope='row' for row headers
Table Code Examples
Example
<!-- Basic table with proper structure -->
<table>
<caption>Q3 2025 Sales Report</caption>
<thead>
<tr>
<th scope="col">Product</th>
<th scope="col">Units Sold</th>
<th scope="col">Revenue</th>
</tr>
</thead>
<tbody>
<tr>
<td>Widget A</td>
<td>1,250</td>
<td>$31,250</td>
</tr>
<tr>
<td>Widget B</td>
<td>890</td>
<td>$22,250</td>
</tr>
<tr>
<td>Widget C</td>
<td>2,100</td>
<td>$52,500</td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="row">Total</th>
<td>4,240</td>
<td>$106,000</td>
</tr>
</tfoot>
</table>Try It Yourself: HTML Tables
Try It Yourself: HTML TablesHTML
HTML Editor
✓ ValidTab = 2 spaces
HTML|30 lines|1206 chars|✓ Valid syntax
UTF-8