Colspan & Rowspan

The way the HTML markup is structured means that you in some rows can have four cells, some three cells, some two cells and so forth. In order for this to actually function, you need to use the attributes colspan and rowspan (the value of these attributes is always whole numbers). It can be quite tricky to use these attributes so you might need some patience.

Let’s use the example from the previous chapter and have the first row have just two cells instead of three and additionally merge the second cell of row three and four.

<table border="1" width="100%">
	<tr>
		<td colspan="2">Row 1, cell 1</td>
		<td>Row 1, cell 2</td>
	</tr>
	<tr>
		<td>Row 2, cell 1</td>
		<td>Row 2, cell 2</td>
		<td>Row 2, cell 3</td>
	</tr>
	<tr>
		<td>Row 3, cell 1</td>
		<td rowspan="2">Row 3, cell 2</td>
		<td>Row 3, cell 3</td>
	</tr>
	<tr>
		<td>Row 4, cell 1</td>
		<td>Row 4, cell 3</td>
	</tr>
</table>

As you can see, I removed the third cell in row 1 and added the colspan attribute to the first cell in row 1. What you need to know when you want to create cells that spans across columns is, that the span is always to the right.

To create a cell that spans across rows, you have to remember to that when you span across rows, the span is always downwards. This means, you have to remove a cell in the following rows or else the table is not going to look like you intended.