22 min read
HTML Tables
Build a table row by row with table, tr, th and td; add a caption; and group rows with thead, tbody and tfoot.
When to Use a Table
Use a table for data in rows and columns — a menu with prices, a timetable, a product catalogue. Do not use tables to lay out a whole page; that is CSS's job.
Building a Table
A simple menu tableHTML
<table> <caption>Teas</caption> <tr> <th>Tea</th> <th>Description</th> <th>Price (LKR)</th> </tr> <tr> <td>Nuwara Eliya</td> <td>Light, bright and floral</td> <td>650</td> </tr> <tr> <td>Ruhuna</td> <td>Strong and malty</td> <td>600</td> </tr></table>What the browser shows
| Table elements | |
|---|---|
thead, tbody and tfoot
Grouped rowsHTML
<table> <caption>Cakes and short eats</caption> <thead> <tr> <th>Item</th> <th>Price (LKR)</th> </tr> </thead> <tbody> <tr> <td>Love cake</td> <td>550</td> </tr> <tr> <td>Kokis (plate of four)</td> <td>400</td> </tr> </tbody> <tfoot> <tr> <td>Afternoon tea set (both, with a pot of tea)</td> <td>1,450</td> </tr> </tfoot></table>What the browser shows
Grouping rows helps screen readers, lets browsers repeat the header when printing a long table, and makes it easy to style the header differently in CSS.
What the browser shows
Try it: Add a row for Saturday and Sunday (8.00 am – 8.00 pm). Then add a fourth column, "Kitchen closes".
Practice
Which element creates a new row in a table?
More lessons in HTML · Next: Merging Cells: colspan and rowspan · Previous: Semantic Page Layout