HTML Β· Chapter 18 of 45
HTML Tables
Tables display tabular data using <table>, with rows defined by <tr>, header cells by <th>, and data cells by <td>.
Tables should be used for genuinely tabular data (like spreadsheets), not for page layout β that job belongs to CSS. The <thead>, <tbody>, and <tfoot> elements help organize larger tables semantically.
Syntax
<table><tr><th>Head</th></tr><tr><td>Data</td></tr></table>Basic table structure
<table> wraps everything, <tr> defines each row, <th> creates bold header cells, and <td> creates regular data cells.
Semantic sections
<thead> groups header rows, <tbody> groups the main data, and <tfoot> groups summary rows like totals β improving accessibility and styling hooks.
Example 1 (html)
<table>
<tr><th>Name</th><th>Age</th></tr>
<tr><td>Alice</td><td>30</td></tr>
</table>Output
Name | Age
Alice | 30A simple two-column table with one header row and one data row.
Example 2 (html)
<table>
<thead><tr><th>Item</th><th>Price</th></tr></thead>
<tbody><tr><td>Book</td><td>$10</td></tr></tbody>
</table>Output
Item | Price
Book | $10thead and tbody organize the table semantically.
Key points
- <table>, <tr>, <th>, and <td> build tables.
- <th> cells are bold and centered by default.
- Use thead/tbody/tfoot for larger, structured tables.
- Never use tables for page layout β use CSS instead.
π‘ Note: The colspan and rowspan attributes let cells span multiple columns or rows.