HTML Tables Cheat Sheet

HTML Tags

Tag	Name	Description
<table>	Table	The wrapper element for all HTML tables, which contains all other table elements.
<caption>	Caption	A text caption.
<thead>	Table Head	The set of rows defining the column headers in a table.
<tbody>	Table Body	The set of rows containing primary table data.
<tfoot>	Table Foot	The set of rows defining the footer (e.g. total and average data) in a table.
<tr>	Table Row	A table row container.
<th>	Table Header	A table header (cell) container.
<td>	Table Data	A table data (cell) container.

HTML Attributes

Attribute	Name	Description
colspan	Column Span	Defines how many columns a <td> or <th> element should span.
rowspan	Row Span	Defines how many rows a <td> or <th> element should span.
scope	Scope	Defines the <th> header scope/type (col, row, colgroup, or rowgroup).

Simple Example

The example table below uses the fundamental (semantic) HTML elements.


          <table>
  <thead>
    <tr>
      <th>th (Row 1, Col 1)</th>
      <th>th (Row 1, Col 2)</th>
      <th>th (Row 1, Col 3)</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>td (Row 2, Col 1)</td> 
      <td>td (Row 2, Col 2)</td>
      <td>td (Row 2, Col 3)</td>
      </tr>
    <tr>
      <td>td (Row 3, Col 1)</td> 
      <td>td (Row 3, Col 2)</td>
      <td>td (Row 3, Col 3)</td>
    </tr>
  </tbody>
</table>

th (Row 1, Col 1)	th (Row 1, Col 2)	th (Row 1, Col 3)
td (Row 2, Col 1)	td (Row 2, Col 2)	td (Row 2, Col 3)
td (Row 3, Col 1)	td (Row 3, Col 2)	td (Row 3, Col 3)

Complex Example

The example table below includes <caption>, <tfoot>, colspan, and scope.


          <table>
  <caption>London Weather in Spring</caption>
  <thead>
    <tr>
      <th></th>
      <th colspan="2" scope="colgroup">Temperature</td>
      <th colspan="2" scope="colgroup">Rainfall</td>
    </tr>
    <tr>
      <th scope="col">Month</th>
      <th scope="col">Low Temp. (°C)</th>
      <th scope="col">High Temp. (°C)</th>
      <th scope="col">Rainfall (mm)</th>
      <th scope="col">Rainfall ≥1 mm (days)</th>
    </tr>
  </thead>
  <tbody>
    <tr>
        <th scope="row">April</th>
        <td>7</td>
        <td>15</td>
        <td>42</td>
        <td>8.8</td>
      </tr>
    <tr>
      <th scope="row">May</th>
      <td>10</td>
      <td>18</td>
      <td>45</td>
      <td>8.0</td>
    </tr>
    <tr>
      <th scope="row">June</th>
      <td>13</td>
      <td>21</td>
      <td>47</td>
      <td>8.3</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row">Average</th>
      <td>10</td>
      <td>18</td>
      <td>45</td>
      <td>8.4</td>
    </tr>
  </tfoot>
</table>

London Weather in Spring
	Temperature		Rainfall
Month	Low Temp. (°C)	High Temp. (°C)	Rainfall (mm)	Rainfall ≥1 mm (days)
April	7	15	42	8.8
May	10	18	45	8.0
June	13	21	47	8.3
Average	10	18	45	8.4