HTML Tables: Attributes
HTML tables come equipped with several attributes. On this page, we focus on three attributes: caption, rowspan, and colspan. These attributes enable us to fuse table cells so that we can get more space when adding information. The rowspan and colspan allow cells to span more than one row or column respectively. As flexible as rowspan/colspan attributes seem, it is an error to define cells that are overlapping.
Let us look at these attributes using two examples.
The first example demonstrates the use of rowspan attribute. In this case, one of the <td> cells has a rowspan of 3 -- this means that it is going to occupy 3 cells in that column. This is okay in this (rather artificial) example since we have to list three items (three moons) pertaining to the one single entry. As we can see from our example, we do not need to add <td> for the other two cells after specifying the <td> for the column that has the rowspan.
<!doctype html>
<html>
<head>
<title> HTML Tables: Using rowspan</title>
</head>
<body>
<table>
<caption>Planets and Moons</caption>
<tr><th>Planets </th><th>Moons </th></tr>
<tr><td>Earth </td><td>Moon </td></tr>
<tr><td rowspan="3">Jupiter </td><td>Ganymede</td></tr>
<tr> <td>Callisto</td></tr>
<tr> <td>Europa</td></tr>
<tr><td>Neptune </td><td>Triton</td></tr>
</table>
</body>
</html>
With the output (added below), we see that the second row in the first column of the table, in fact, spans three rows.
Figure: HTML table: rowspan attribute
The next example focuses on rowspan's counterpart: colspan attribute. In this case, two of the <td> cells has a colspan of 2 -- this means that it is going to occupy 2 cells in that row. This example is trying to print two associated values (first two moons) of the data in the first column (a given planet). However, the trick is that some of the planets may have only one moon (like Earth) or no moon (like Venus), while other would have a whole lot. So, in this case, it makes sense to merge two columns for cases, where we have less than 2 moons. As we can see from our example, we do not need to add <td> for the other two cells after specifying the <td> for the row that has the colspan.
<!doctype html>
<html>
<head>
<title> HTML Tables: Using colspan</title>
</head>
<body>
<table>
<caption>Planets and Moons</caption>
<tr><th>Planet </th><th>1st Moon</th><th> 2nd Moon</th></tr>
<tr><td>Venus </td><td colspan="2"> </td></tr>
<tr><td>Earth </td><td colspan="2"> Moon </td></tr>
<tr><td>Jupiter</td><td>Ganymede</td><td>Callisto </td></tr>
<tr><td>Neptune</td><td>Triton </td><td> Nereid </td> </tr>
</table>
</body>
</html>
And, here is the output.
Figure: HTML table: colspan attribute
An easy way to remember these two attributes is that the rowspan applies to columns and the colspan applies to rows.