Lesson 11: More about tables
The title "More about tables" may sound a bit boring. But look at the positive side, when you master tables, there is absolutely nothing about HTML that will knock you out.
What is left then?
The two attributes colspan
and rowspan
are used when you want to create fancy tables.
Colspan
is short for "column span". Colspan
is used in the <td>
tag to specify how many columns the cell should span:
Example 1:
<table border="1">
<tr>
<td colspan="3">Cell 1</td>
</tr>
<tr>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table>
Will look like this in the browser:
Cell 1 | ||
Cell 2 | Cell 3 | Cell 4 |
By setting colspan
to "3", the cell in the first row spans three columns. If we instead had set colspan
to "2", the cell would only have spanned two columns and it would have been necessary to insert an additional cell in the first row so that the number of columns will fit in the two rows.
Example 2:
<table border="1">
<tr>
<td colspan="2">Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
<td>Cell 5</td>
</tr>
</table>
Will look like this in the browser:
Cell 1 | Cell 2 | |
Cell 3 | Cell 4 | Cell 5 |
What about rowspan?
As you might already have guessed, rowspan
specifies how many rows a cell should span over:
Example 3:
<table border="1">
<tr>
<td rowspan="3">Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 4</td>
</tr>
</table>
Will look like this in the browser:
Cell 1 | Cell 2 |
Cell 3 | |
Cell 4 |
In the example above rowspan
is set to "3" in Cell 1. This specifies that the cell must span over 3 rows (its own row plus an additional two). Cell 1 and Cell 2 are thereby in the same row, while Cell 3 and Cell 4 form two independent rows.
Confused? Well, it is not uncomplicated and it is easy to lose track. Therefore, it might be a good idea to draw the table on a piece of paper before you begin with the HTML.
Not confused? Then go ahead and create a couple of tables with both colspan
and rowspan
on your own.