HTML Tables

Introduction

Timetables, price lists, sports scores: some information is naturally a grid. HTML tables are made for exactly that. They are not made for laying out a web page. For layout we use CSS, which you will learn later.

The basic table

A table is built from rows. Each row holds cells.

• table wraps the whole thing.
• tr is a table row.
• th is a header cell (bold and centred by default).
• td is a normal data cell.

The border and cellpadding attributes are only here so you can see the grid. In real projects you style tables with CSS.

Caption and groups

A well-built table has a title and clear sections:

• caption gives the table a title and must be the first thing inside table.
• thead groups the header row, tbody the main rows and tfoot the summary rows.
• On th, scope="col" or scope="row" tells assistive technology which cells the header describes.

Merging cells

colspan makes a cell stretch across columns. rowspan makes it stretch down rows.

When not to use a table

Only use a table for real tabular data: information that makes sense in rows and columns. Do not use it just to put things side by side. That is a job for CSS.

Try it yourself

Add a third row to this timetable, then add a caption as the first child of the table.

Summary

• table, tr, th and td build a table.
• Add caption, thead, tbody and tfoot for a clear structure.
• colspan and rowspan merge cells.
• Use tables for data, not for page layout.