🎓 A1Learner
🔍

HTML Table Spans

A table span makes one cell cover several columns or several rows. The colspan and rowspan attributes set the size of a span.

A header across two columns

The colspan value 2 makes the header cell cover two columns. The header labels both columns under it.

<table>
<tr>
<th colspan="2">Name</th>
<th>Score</th>
</tr>
<tr>
<td>Ana</td>
<td>Lee</td>
<td>10</td>
</tr>
</table>

A cell down two rows

The rowspan value 2 makes the cell cover two rows. The second row holds one fewer cell of its own.

<table>
<tr>
<th rowspan="2">Team</th>
<td>Ana</td>
</tr>
<tr>
<td>Ben</td>
</tr>
</table>

One cell for a wide note

A data cell can span columns too. This note cell covers the full width of its table.

<table>
<tr>
<th>Name</th>
<th>Score</th>
</tr>
<tr>
<td>Ana</td>
<td>10</td>
</tr>
<tr>
<td colspan="2">Ben has no score yet</td>
</tr>
</table>

Example

<!DOCTYPE html>
<html>
<head>
<title>Class Times</title>
</head>
<body>
<h1>Class Times</h1>
<table>
<caption>Lessons on Monday</caption>
<tr>
<th>Day</th>
<th colspan="2">Lessons</th>
</tr>
<tr>
<td rowspan="2">Monday</td>
<td>Maths</td>
<td>Art</td>
</tr>
<tr>
<td>Music</td>
<td>Gym</td>
</tr>
</table>
</body>
</html>

Key points

  • colspan attribute: how many columns one cell covers
  • rowspan attribute: how many rows one cell covers
  • A row under a rowspan holds one fewer cell of its own
  • Spans let one cell hold the space of several cells.

In this example, the Lessons header spans two columns with colspan. It labels the lesson columns for both rows. The Monday cell spans two rows with rowspan. The second lesson row holds no day cell of its own. The Monday cell already covers that space.

Note

A span value of 1 is the normal single cell.

Try it Yourself

Edit the code, then press Run.

Runs in your browser — the preview under the editor is the real result. Nothing is sent to a server. The code runner panel (right) does the same with more room.

Exercise

Which code makes a cell cover three columns?