HTML Tables: quick revision, 13 bites

What is an HTML Table?

Organize data in rows and columns.

An **HTML table** is a structured way to display data in a grid of rows and columns. It is defined using the `<table>` element, which contains rows (`<tr>`) and cells (`<td>` for data, `<th>` for headers). Tables are ideal for presenting tabular information like schedules, pricing, or comparisons.

Takeaway. An HTML table is a grid of rows and columns built with `<table>`, `<tr>`, and `<td>`/`<th>`.

Basic Table Structure

See a simple table in action.

This creates a table with two columns (Name and Age) and two data rows. The header row uses `<th>` to label each column.

Takeaway. A basic table uses `<tr>` for rows and `<th>`/`<td>` for header/data cells.

Table Sections: thead, tbody, tfoot

Group rows for clarity and styling.

Tables can be divided into semantic sections: **`<thead>`** (header rows), **`<tbody>`** (body rows), and **`<tfoot>`** (footer rows). This improves accessibility and allows separate styling or scrolling of the body.

Takeaway. Use `<thead>`, `<tbody>`, and `<tfoot>` to structure table content semantically.

Using thead, tbody, and tfoot

Organize a table with sections.

Takeaway. Splitting a table into thead, tbody, and tfoot makes it more readable and accessible.

Spanning Columns and Rows

Merge cells across columns or rows.

Use the **`colspan`** attribute on a `<td>` or `<th>` to make a cell span multiple columns, and **`rowspan`** to span multiple rows. This is useful for grouping data or creating headers that cover sub-columns.

Takeaway. `colspan` and `rowspan` let you merge cells to create complex table layouts.

Using colspan and rowspan

Merge cells for better layout.

Takeaway. `colspan` merges columns, `rowspan` merges rows, enabling complex table structures.

Table Caption and Accessibility

Add a title and improve screen readers.

The **`<caption>`** element provides a title for the table, displayed above it. For accessibility, use the **`scope`** attribute on `<th>` to indicate whether it is a column header (`scope="col"`) or a row header (`scope="row"`).

Takeaway. Add a `<caption>` and use `scope` on headers to make tables more accessible.

Adding Caption and Scope

Make your table accessible.

Takeaway. Use `<caption>` and `scope` to provide context and improve accessibility.

Using Tables for Layout

Don't use tables for page design.

A common mistake is using HTML tables to create page layouts (e.g., sidebars, headers). This is outdated and harms accessibility and responsiveness. Tables should be used **only for tabular data**.

Takeaway. Tables are for data, not layout. Use CSS for page structure.

Styling Tables with CSS

Make tables look clean and readable.

Use CSS to style tables: add **borders**, **padding**, **background colors**, and **hover effects**. The `border-collapse` property is often set to `collapse` to remove double borders.

Takeaway. Style tables with CSS for better readability and visual appeal.

Real-World Use Cases

Where tables are essential.

Takeaway. Tables are used wherever structured data needs to be presented clearly.

Remembering Table Tags

Mnemonics for table elements.

To remember the order: **T**able → **TR** (row) → **TH** (header) / **TD** (data). Think: "**T**able **R**ows **H**ead **D**ata".

Takeaway. Remember: Table → TR → TH/TD.

Tables Before CSS

How websites were built in the 90s.

Before CSS became powerful, web developers used complex nested tables to create multi-column layouts. This made code hard to maintain and caused accessibility issues. Modern web design uses CSS Grid and Flexbox instead.

Takeaway. Tables were once used for layout, but now CSS handles that.