HTML Tables Cheat Sheet: thead, colspan, Scope & Responsive Markup

An HTML table is for tabular data: rows and columns that share a relationship. Use caption, thead/tbody, and th with scope so screen readers announce headers. Do not use tables for page layout.

This HTML cheat sheet is written for people searching for a fast, accurate reference: students, junior developers, and teams shipping production software. Pin it, copy the snippets, and come back when syntax slips.

Quick reference

• caption: First child of <table>. Names the table for everyone, not only visually.
• th: Header cell. scope="col" for column headers, scope="row" for row headers.
• thead / tbody: Group header rows vs data rows. Helps print and sticky header CSS.
• colspan: Cell spans N columns. Keep the row cell count consistent after spanning.
• rowspan: Cell spans N rows. Easy to break; count remaining cells on following rows.
• colgroup: Optional column styling hooks. Prefer CSS on th/td unless you need column width.
• Layout: Never use tables for headers, sidebars, or cards. Use CSS Grid or Flexbox.
• Overflow: Wrap wide tables in a region with overflow:auto and a tabindex so keyboard users can scroll.

Copy-paste examples

Accessible data table

scope is what makes header–cell relationships work in assistive tech.

<table>
  <caption>2026 course prices</caption>
  <thead>
    <tr>
      <th scope="col">Plan</th>
      <th scope="col">Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Starter</th>
      <td>$49</td>
    </tr>
    <tr>
      <th scope="row">Pro</th>
      <td>$99</td>
    </tr>
  </tbody>
</table>

Common mistakes

• Using tables to position a login form or whole page layout.
• Only bolding the first row in CSS instead of using <th> headers.
• Mismatched colspan so some rows have extra or missing cells.
• Putting paragraphs of prose inside one giant table cell.

FAQ

1. When should I avoid a table? If you could read the content as a list of cards or a definition list, do that. Tables shine when comparing the same fields across many rows.

1. Are layout tables still needed for email HTML? Many email clients still layout with tables. Public websites should not.

1. How do I make tables responsive? Allow horizontal scroll, or restyle with CSS on small screens. Do not hide header text that explains the numbers.

Related HTML cheat sheets

• Html Cheat Sheet 2026
• Html Forms Cheat Sheet
• Html5 Semantic Tags Cheat Sheet

Build with this stack

When a cheat sheet is not enough — you need a production app, a student FYP, or a custom dashboard — ArpaNeuro builds custom web development and also sells ready-made source code. Request a quote and tell us the stack.

Browse software development services or the source code marketplace if you want a working codebase instead of starting from a blank file.