Tables: thead, tbody, th, td, colspan

11 min read

HTML Tables

Tables are used to display tabular data — information that naturally lives in rows and columns. The core elements are <table>, <tr> (table row), <th> (header cell), and <td> (data cell).

html

<table>
  <caption>Student Grades — Q1 2026</caption>
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">HTML</th>
      <th scope="col">CSS</th>
      <th scope="col">JavaScript</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Alice</th>
      <td>95</td>
      <td>88</td>
      <td>92</td>
    </tr>
    <tr>
      <th scope="row">Bob</th>
      <td>80</td>
      <td>76</td>
      <td>85</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row">Average</th>
      <td>87</td>
      <td>82</td>
      <td>88</td>
    </tr>
  </tfoot>
</table>

Spanning Columns and Rows

html

<table>
  <thead>
    <tr>
      <th rowspan="2">Name</th>
      <th colspan="2">Scores</th>
    </tr>
    <tr>
      <th>Midterm</th>
      <th>Final</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alice</td>
      <td>88</td>
      <td>94</td>
    </tr>
  </tbody>
</table>

Never use tables for page layout. Tables are for data. Using them for layout breaks accessibility, makes responsive design very difficult, and is considered outdated practice.

Ready to test yourself?

Practice HTML— quiz & coding exercises