HTML Tables
HTML tables present tabular data — rows and columns. They are built from a small set of elements that nest in a predictable way.
Table elements
| Element | Purpose |
|---|---|
<table> | Wraps the entire table. |
<caption> | Title or summary, shown above the table. |
<thead> / <tbody> / <tfoot> | Group the header, body, and footer rows. |
<tr> | A table row. |
<th> | A header cell. Bold and centered by default. |
<td> | A regular data cell. |
Spanning rows and columns
| Attribute | Effect |
|---|---|
colspan="2" | Cell stretches across two columns. |
rowspan="3" | Cell stretches across three rows. |
scope="col" / scope="row" | Tells screen readers whether a <th> labels a column or a row. |
Use tables for data, not layout. Page layout belongs to CSS Flexbox or Grid. Tables are for things like price lists, schedules, and stats.
Example
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Tables</title>
</head>
<body>
<h1>HTML Tables</h1>
<p>This is a demo page for the "HTML Tables" lesson.</p>
</body>
</html>
Try it Yourself »
Exercise
Add the header row tag so the first <tr> is marked as a heading row.
<table>
<
><tr><th>Name</th></tr></
>
<tbody><tr><td>Ada</td></tr></tbody>
</table>
Grouping element for header rows.
Discussion
Loading…