HTML Tables

HTML tables are built for presenting tabular data — information that naturally has rows and columns, like a pricing comparison or a schedule. Tables have a well-defined internal structure with dedicated elements for headers, body rows, and (optionally) footers, and understanding that structure is what separates an accessible, well-formed table from a fragile pile of nested divs pretending to be one.

Why it matters

Prices, timetables, comparison charts and reports are tabular data, and a properly built table lets a screen reader say which row and column a cell belongs to. Tables were once misused for page layout; knowing why that is wrong, and how to mark up headers correctly, is a standard interview topic.

Core Table Elements

A table starts with <table>, which typically contains three sections: <thead> for the header row(s), <tbody> for the main data rows, and optionally <tfoot> for summary rows like totals. Each row is a <tr> (table row), and each row contains cells: <th> for header cells (bold and centered by default, and semantically marked as headers) and <td> for standard data cells.

• <thead> — wraps the header row(s), containing <th> cells.
• <tbody> — wraps the main data rows, containing <td> cells.
• <tfoot> — optional footer rows, often used for totals or summaries.
• scope="col" or scope="row" on <th> tells assistive technology which cells a header applies to.

Why Tables Should Not Be Used for Page Layout

In the early 2000s, developers commonly used tables to lay out entire web pages (headers, sidebars, columns) because CSS layout tools were immature. This is now considered bad practice: table-based layouts are inaccessible (screen readers announce layout tables as data tables, confusing users with irrelevant row/column announcements), inflexible for responsive design, and mix presentation with structure. Modern layout should always use CSS (Flexbox, Grid) instead, reserving <table> strictly for genuinely tabular data.

Example

<table>
  <thead>
    <tr>
      <th scope="col">Plan</th>
      <th scope="col">Price</th>
      <th scope="col">Storage</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Basic</td>
      <td>$5/mo</td>
      <td>10 GB</td>
    </tr>
    <tr>
      <td>Pro</td>
      <td>$15/mo</td>
      <td>100 GB</td>
    </tr>
  </tbody>
</table>

Renders a data table with a bold header row (Plan, Price, Storage) and two data rows beneath it; screen readers announce each cell's associated column header when navigating.

Exercise

Build a table with the caption Course sizes, a header row with the columns Course and Lessons, and two data rows: HTML with 18, and Python with 121. Mark the header cells as column headers.

Expected result: a table with a caption, one header row and two body rows.

<table>
  <!-- TODO: caption -->
  <!-- TODO: thead with the two column headers -->
  <!-- TODO: tbody with the two rows -->
</table>

<table>
  <caption>Course sizes</caption>
  <thead>
    <tr>
      <th scope="col">Course</th>
      <th scope="col">Lessons</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>HTML</td>
      <td>18</td>
    </tr>
    <tr>
      <td>Python</td>
      <td>121</td>
    </tr>
  </tbody>
</table>

Quick quiz

Interview questions