Tables
Display structured data in rows and columns — the right way to present tabular information.
1. Introduction
Tables are used to display structured data that has a clear relationship between rows and columns. Think: pricing tables, schedules, comparison charts, sports results, financial data.
A common mistake beginners make is using tables to lay out page designs. Never do this. Tables are for data only. Use CSS Flexbox or Grid for layouts.
2. Theory
Core Table Elements
| Element | Full Name | Purpose |
|---|---|---|
<table> | Table | Container for the entire table |
<tr> | Table Row | One horizontal row |
<th> | Table Header | Header cell — bold, centred by default |
<td> | Table Data | Regular data cell |
Semantic Table Elements
| Element | Purpose |
|---|---|
<thead> | Groups header rows — visually and semantically |
<tbody> | Groups body rows — the main data |
<tfoot> | Groups footer rows — totals, summaries |
<caption> | Table title — displayed above the table |
Spanning Cells
Cells can span multiple columns or rows:
<!-- Span 2 columns -->
<td colspan="2">This cell takes 2 columns</td>
<!-- Span 3 rows -->
<td rowspan="3">This cell takes 3 rows</td>The scope Attribute for Accessibility
Adding scope to <th> tells screen readers which cells the header belongs to:
<th scope="col">Product Name</th> <!-- Header for a column -->
<th scope="row">Total</th> <!-- Header for a row -->3. Real World Example
A sports league table, a weekly class timetable, a product comparison chart, a bank statement — all of these are perfect candidates for HTML tables. The data has clear rows and columns with header labels that tell you what each column means.
4. Code Example
<table>
<caption>Q1 2024 Sales Results</caption>
<thead>
<tr>
<th scope="col">Salesperson</th>
<th scope="col">January</th>
<th scope="col">February</th>
<th scope="col">March</th>
<th scope="col">Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alice Johnson</td>
<td>£12,400</td>
<td>£15,200</td>
<td>£18,900</td>
<td><strong>£46,500</strong></td>
</tr>
<tr>
<td>Bob Smith</td>
<td>£9,800</td>
<td>£11,600</td>
<td>£14,200</td>
<td><strong>£35,600</strong></td>
</tr>
<tr>
<td>Carol White</td>
<td colspan="2">On leave</td>
<td>£22,100</td>
<td><strong>£22,100</strong></td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="row">Team Total</th>
<td>£22,200</td>
<td>£26,800</td>
<td>£55,200</td>
<td><strong>£104,200</strong></td>
</tr>
</tfoot>
</table>5. Code Breakdown
| Code | What It Does |
|---|---|
<caption> | Displayed above the table as its title. Helps users understand what the data represents. |
<thead> | Wraps header rows. Browsers can repeat this on each printed page if the table spans pages. |
<th scope="col"> | Header cell for a column. Bold and centred by default. scope="col" tells screen readers this is a column header. |
<tbody> | The main table data. Even if omitted, browsers add it automatically. |
colspan="2" | This cell spans 2 columns. The next cell in the same row starts after those 2 columns. |
<tfoot> | Footer row — typically used for totals or summaries. |
<th scope="row"> | A header that labels the current row, not a column. |
6. Common Mistakes
Tables should never be used to create multi-column page layouts. This was done in the 1990s before CSS existed. Today, use CSS Flexbox or Grid for layouts.
Each row must have the same number of cells (accounting for colspan/rowspan). Mismatched cell counts break the table layout.
Without header cells (<th>), screen reader users cannot understand what each column means. Always include header cells with appropriate scope attributes.
7. Best Practices
scope="col" for column headers and scope="row" for row headers.8. Practice Exercise
Create table-practice.html and build a weekly class timetable. Include:
- A
<caption>saying "Weekly Class Timetable" <thead>with days of the week as column headers (scope="col")- At least 4 rows in
<tbody>with time slots as row headers (scope="row") - At least one cell using
colspan(e.g. a 2-hour lesson) - A
<tfoot>with a summary row
9. Assignment
Create a product comparison table comparing 3 hosting plans (Free, Basic, Pro). The table should compare: Storage, Bandwidth, Custom Domain, Email Accounts, Price/month. Include all semantic table elements and accessibility attributes.
10. Interview Questions
Q1: When should you use an HTML table?
Answer: HTML tables should only be used for tabular data — information that has a logical relationship between rows and columns, with meaningful headers. Examples: comparison charts, schedules, financial data. They should never be used for page layout.
Q2: What is the difference between <th> and <td>?
Answer: <th> is a table header cell — it labels a row or column and is bold and centred by default. It also carries semantic meaning used by screen readers. <td> is a table data cell — it contains the actual data. Both are placed inside <tr> (table row) elements.
Q3: What does colspan do?
Answer: colspan="N" makes a cell span across N columns. For example, colspan="2" makes one cell take the space of two. The next cell in the same row starts after those N columns. Similarly, rowspan="N" makes a cell span N rows vertically.