Row Span

A cell can also stretch down over several rows. We do this just like a column span, only with the rowspan attribute (short for row span) instead of colspan. Its value is the number of rows the cell spans.

For example, in this schedule, Monday is a day off in the morning and in the afternoon:

<table>
	<tr>
		<th></th>
		<th>Monday</th>
		<th>Tuesday</th>
	</tr>
	<tr>
		<th>Morning</th>
		<td rowspan="2">Day off</td>
		<td>School</td>
	</tr>
	<tr>
		<th>Afternoon</th>
		<td>Football practice</td>
	</tr>
</table>

This code could be displayed like this:

	Monday	Tuesday
Morning	Day off	School
Afternoon	Day off	Football practice

The cell with rowspan="2" also takes up Monday's place in the row below it, so the Afternoon row has only one td: the cell for Tuesday.

It was sunny on both days of our measurements. Let's add a third column for the weather, in which one cell covers both days.

Instructions

In the row with the headings, add a third heading cell (th) with the content Weather.

The table now has three columns, so the top cell has to span all three: change the value of its colspan attribute to 3.

In the row with 8/20/2023, add a third cell (td) with the content Sunny and the rowspan attribute with the value 2, so that it covers both days. Don't add a cell to the last row: its place there is taken by the cell from the row above.

Start programming for free

6/7