HTML Table colspan and rowspan: Merging Cells

Sometimes one cell needs to cover more than one column or row. Use colspan for columns and rowspan for rows.

colspan

index.html

HTML

<style>
  table, th, td { border: 1px solid #ccc; border-collapse: collapse; padding: 6px 10px; }
</style>
<table>
  <tr>
    <th colspan="2">Weekend hours</th>
  </tr>
  <tr>
    <td>Saturday</td>
    <td>10:00 to 17:00</td>
  </tr>
  <tr>
    <td>Sunday</td>
    <td>11:00 to 16:00</td>
  </tr>
</table>

The first cell spans two columns, so that row needs only one cell.

rowspan

index.html

HTML

<style>
  table, th, td { border: 1px solid #ccc; border-collapse: collapse; padding: 6px 10px; }
</style>
<table>
  <tr>
    <th rowspan="2">Fiction</th>
    <td>Mystery</td>
  </tr>
  <tr>
    <td>Fantasy</td>
  </tr>
</table>

The first cell spans two rows, so the second row starts one cell later.

Keep the count right

Add up the cells in each row, counting spanned cells. Every row must cover the same total number of columns, or the table will look broken.

warning

Too many cells after a span

If a cell has colspan="2" and the row still lists the full number of cells, the row will stick out. Remove the cells that the span has replaced.

Exercise: a price table with a spanning header

Create a table with a header that spans two columns reading “Prices”, followed by two rows of item and price.

Show a possible solution

index.html

HTML

<table>
  <tr><th colspan="2">Prices</th></tr>
  <tr><td>Tea</td><td>$3</td></tr>
  <tr><td>Coffee</td><td>$4</td></tr>
</table>