Lesson 6Intermediate 2 min read

HTML Tables

When to use tables

Tables are for tabular data — information that belongs in rows and columns, like spreadsheets, schedules, or comparison charts.

Do not use tables for page layout. That was common in the early 2000s, but CSS Flexbox and Grid are far better tools for layout today.

Basic table structure

HTML

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Role</th>
      <th>City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alice</td>
      <td>Developer</td>
      <td>London</td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>Designer</td>
      <td>Berlin</td>
    </tr>
  </tbody>
</table>

<table> wraps the entire table.
<thead> contains header rows; <tbody> contains data rows.
<tr> is a table row.
<th> is a header cell (bold and centered by default); <td> is a data cell.

Spanning rows and columns

Sometimes a cell needs to stretch across multiple columns or rows:

HTML

<table>
  <tr>
    <th colspan="2">Full Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>30</td>
  </tr>
</table>

colspan="2" makes the header span two columns. rowspan works the same way vertically.

Adding a caption

HTML

<table>
  <caption>Employee Directory — Q1 2026</caption>
  <thead>
    <tr>
      <th>Name</th>
      <th>Department</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alice</td>
      <td>Engineering</td>
    </tr>
  </tbody>
</table>

Captions are great for accessibility — they tell screen readers what the table is about.

Making tables accessible

Always use <th> for headers, not styled <td>.
Add scope="col" or scope="row" to <th> elements so screen readers know which direction the header applies to.
Use <caption> to describe the table.

HTML

<table>
  <caption>Monthly sales by region</caption>
  <thead>
    <tr>
      <th scope="col">Region</th>
      <th scope="col">January</th>
      <th scope="col">February</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">North</th>
      <td>$12,000</td>
      <td>$15,000</td>
    </tr>
  </tbody>
</table>

Styling tables with CSS

Default tables look plain. Here's a clean, modern look:

CSS

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid #e2e8f0;
}

th {
  background: #f8fafc;
  font-weight: 600;
}

tbody tr:hover {
  background: #f1f5f9;
}

border-collapse: collapse removes the double-border effect that tables have by default.

Key takeaway

Use tables only for tabular data. Structure them with <thead>, <tbody>, <th>, and <td>. Add scope attributes and <caption> for accessibility. Style with CSS, not HTML attributes.