Sometimes a single cell should stretch across multiple columns or rows - for example, a heading that sits above the entire table. There are two attributes for this: colspan and rowspan.

colspan: merging multiple columns

colspan="2" makes a cell take up the space of two columns (instead of just one):

<table>
  <tr>
    <th colspan="2">Matchday 1</th>
  </tr>
  <tr>
    <td>Home</td>
    <td>Away</td>
  </tr>
</table>

Important: since the first row only has one cell, but it takes up the space of two columns, you don't need to adjust anything in the second row - colspan automatically "uses up" the column slots for you.

rowspan: merging multiple rows

rowspan="2" works the same way, just vertically: the cell takes up the space of two rows:

<table>
  <tr>
    <th rowspan="2">Goalkeeper</th>
    <td>Player B</td>
  </tr>
  <tr>
    <td>Backup: Player C</td>
  </tr>
</table>

Here, the first row has two cells (one of them with rowspan="2"), but the second row only has a single one - since the goalkeeper cell already covers both rows, the second row doesn't need its own cell for it anymore.

A small fixture table for Finn

Let's build a small table for the next match, where one heading spans two columns:

<h2>Next Game</h2>
<table>
  <tr>
    <th colspan="2">Saturday, 3pm</th>
  </tr>
  <tr>
    <td>Home</td>
    <td>Sample Town FC</td>
  </tr>
  <tr>
    <td>Away</td>
    <td>Example Village FC</td>
  </tr>
</table>