Column Span

Sometimes a cell needs to span several columns. For example, in a schedule, a school trip can take two whole days, so its cell should stretch across both the Monday and the Tuesday column.

We do this with the colspan attribute (short for column span). Its value is the number of columns the cell spans:

<table>
	<tr>
		<th>Monday</th>
		<th>Tuesday</th>
	</tr>
	<tr>
		<td colspan="2">School trip</td>
	</tr>
</table>

The code above would be displayed like this:

Monday	Tuesday
School trip

Notice that the second row has only one cell: the cell with colspan="2" takes up the place of two cells.

We've added a second day of measurements to our table. Now let's give the table a title row with the place and month of the measurements, spanning both columns.

Instructions

Above the row with the headings, add a new first row (tr) with one heading cell (th) with the content Chicago, August 2023. Run the code: the new cell fills only the first column.

Add the colspan attribute with the value 2 to this cell, so that it spans both columns.

Start programming for free

5/7