Hack University
← All cheatsheets
HTML
Tables

HTML Cheatsheet

Tables

Use this HTML reference while you build software engineering projects, review code for technical interview prep, or polish examples for a software engineer resume.

Basic Table Structure

<table>
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Age</th>
      <th scope="col">City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alice</td>
      <td>30</td>
      <td>New York</td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>25</td>
      <td>London</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">2 records</td>
    </tr>
  </tfoot>
</table>

Table Elements

ElementPurpose
<table>Root table element
<caption>Table title/description (goes immediately after <table>)
<thead>Header row group
<tbody>Body row group (multiple allowed)
<tfoot>Footer row group
<tr>Table row
<th>Header cell
<td>Data cell
<col>Styling hook for a column
<colgroup>Groups <col> elements

<th> and scope

scope tells screen readers which cells a header applies to.

<table>
  <caption>Employee roster</caption>
  <thead>
    <tr>
      <!-- Column headers -->
      <th scope="col">Name</th>
      <th scope="col">Department</th>
      <th scope="col">Salary</th>
    </tr>
  </thead>
  <tbody>
    <!-- Row header -->
    <tr>
      <th scope="row">Alice</th>
      <td>Engineering</td>
      <td>$120,000</td>
    </tr>
    <tr>
      <th scope="row">Bob</th>
      <td>Design</td>
      <td>$95,000</td>
    </tr>
  </tbody>
</table>
scope valueApplies to
colAll cells in the column
rowAll cells in the row
colgroupAll cells in the column group
rowgroupAll cells in the row group

Spanning Cells

<table>
  <tr>
    <!-- spans 2 columns -->
    <td colspan="2">Merged columns</td>
    <td>Cell C</td>
  </tr>
  <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
  </tr>
</table>
<table>
  <tr>
    <!-- spans 3 rows -->
    <td rowspan="3">Merged rows</td>
    <td>Row 1 Col B</td>
  </tr>
  <tr>
    <td>Row 2 Col B</td>
  </tr>
  <tr>
    <td>Row 3 Col B</td>
  </tr>
</table>
<!-- Combined colspan + rowspan -->
<table>
  <tr>
    <th scope="col">Q1</th>
    <th scope="col">Q2</th>
    <th scope="col">Q3</th>
    <th scope="col">Q4</th>
  </tr>
  <tr>
    <td colspan="2">H1 combined</td>
    <td colspan="2">H2 combined</td>
  </tr>
  <tr>
    <td rowspan="2">Jan–Mar</td>
    <td>Apr</td>
    <td>Jul</td>
    <td>Oct</td>
  </tr>
  <tr>
    <td>May–Jun</td>
    <td>Aug–Sep</td>
    <td>Nov–Dec</td>
  </tr>
</table>

<caption> Element

Provides a visible title and accessible description for the table.

<table>
  <caption>Monthly Sales — Q4 2024</caption>
  <thead>
    <tr>
      <th scope="col">Month</th>
      <th scope="col">Revenue</th>
      <th scope="col">Units</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>October</td><td>$120,000</td><td>1,200</td></tr>
    <tr><td>November</td><td>$145,000</td><td>1,450</td></tr>
    <tr><td>December</td><td>$210,000</td><td>2,100</td></tr>
  </tbody>
</table>

Multiple <tbody> Sections

Split a table into logical groups, each with its own body.

<table>
  <caption>Annual Report</caption>
  <thead>
    <tr><th scope="col">Month</th><th scope="col">Sales</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row" colspan="2">Q1</th></tr>
    <tr><td>January</td><td>$50k</td></tr>
    <tr><td>February</td><td>$60k</td></tr>
    <tr><td>March</td><td>$55k</td></tr>
  </tbody>
  <tbody>
    <tr><th scope="row" colspan="2">Q2</th></tr>
    <tr><td>April</td><td>$70k</td></tr>
    <tr><td>May</td><td>$80k</td></tr>
    <tr><td>June</td><td>$75k</td></tr>
  </tbody>
</table>

<colgroup> and <col>

Apply styles to entire columns without modifying each cell.

<table>
  <colgroup>
    <col style="width: 40%">
    <col style="width: 30%">
    <col style="width: 30%; background-color: #f5f5f5;">
  </colgroup>
  <thead>
    <tr><th>Name</th><th>Role</th><th>Salary</th></tr>
  </thead>
  <tbody>
    <tr><td>Alice</td><td>Engineer</td><td>$120k</td></tr>
  </tbody>
</table>
<!-- span attribute — one <col> covers multiple columns -->
<colgroup>
  <col span="2" style="background-color: #eef;">
  <col span="2" style="background-color: #ffe;">
</colgroup>

headers Attribute (Complex Tables)

For complex tables with irregular structure, use id/headers to explicitly link cells to their headers.

<table>
  <tr>
    <th id="name">Name</th>
    <th id="q1">Q1</th>
    <th id="q2">Q2</th>
  </tr>
  <tr>
    <th id="alice">Alice</th>
    <td headers="alice q1">$50k</td>
    <td headers="alice q2">$60k</td>
  </tr>
  <tr>
    <th id="bob">Bob</th>
    <td headers="bob q1">$45k</td>
    <td headers="bob q2">$55k</td>
  </tr>
</table>

Responsive Table Patterns

Tables don't reflow naturally on small screens. Common approaches:

<!-- Scroll wrapper -->
<div style="overflow-x: auto;" role="region" aria-label="Sales data table" tabindex="0">
  <table>
    <!-- ... -->
  </table>
</div>

Accessibility Checklist

  • Always use <caption> to name the table.
  • Use <th> for headers, not styled <td>.
  • Add scope="col" or scope="row" to all <th> cells.
  • For complex tables, use id/headers.
  • Wrap in <div> with overflow-x: auto for responsive scroll.
  • Never use tables for layout — use CSS Grid/Flexbox instead.
<!-- Accessible full example -->
<figure>
  <table>
    <caption>
      Student grades — Spring 2025
      <span style="display:block;font-weight:normal;font-size:.875em">
        Scores out of 100
      </span>
    </caption>
    <thead>
      <tr>
        <th scope="col">Student</th>
        <th scope="col">Math</th>
        <th scope="col">Science</th>
        <th scope="col">English</th>
        <th scope="col">Average</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">Alice</th>
        <td>95</td>
        <td>88</td>
        <td>92</td>
        <td>91.7</td>
      </tr>
      <tr>
        <th scope="row">Bob</th>
        <td>78</td>
        <td>82</td>
        <td>85</td>
        <td>81.7</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <th scope="row">Class avg</th>
        <td>86.5</td>
        <td>85</td>
        <td>88.5</td>
        <td>86.7</td>
      </tr>
    </tfoot>
  </table>
</figure>

<td> and <th> Shared Attributes

AttributeDescription
colspanNumber of columns to span (default 1)
rowspanNumber of rows to span (default 1)
headersSpace-separated list of ids of associated <th> elements
abbr(<th> only) Short form of the header
scope(<th> only) col, row, colgroup, rowgroup