5.2 Table Attributes - Layout
Some basic formatting can be applied to tables using the following attributes:
| Attribute | Purpose |
|---|---|
| colspan | Defines how many columns a cell should span |
| rowspan | Defines how many rows a cell should span |
| align | Defines the horizontal alignment of the content in the entire table, in a row or in a single cell (left, center or right) |
| valign | Defines the vertical alignment of the content in a cell (top, middle or bottom) |
Colspan
Colspan is particularly useful for arranging table layout. For example:
<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>
This would look like this in a browser:
| Cell 1 | ||
| Cell 2 | Cell 3 | Cell 4 |
Setting colspan to 3 in the first row makes that cell span three columns. If colspan was set to 2, the cell would have spanned two columns and it would have been necessary to insert an additional cell in that row to even things up like below:
<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>
This would look like this in a browser:
| Cell 1 | Cell 2 | |
| Cell 3 | Cell 4 | Cell 5 |
Colspan is set to 2 making cell 1 span 2 cols. Here we have added another cell to the first row to even things up.
Rowspan
Rowspan is also useful for arranging table layout. An example using rowspan could look like this:
<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>
This would look like this in a browser:
| Cell 1 | Cell 2 |
| Cell 3 | |
| Cell 4 |
Setting rowspan to 3 in Cell 1 makes the cell span over 3 rows. Cell 1 and Cell 2 are actually in the same row, while Cell 3 and Cell 4 form two more rows.
Align and Valign
Align and Valign can be used for aligning the content of a table cell. Align has three values: left, right or center (the default). Valign also has three: top, bottom or middle (the default). For example:
<table border="1"> <tr> <td align="left" valign="top">Cell A</td> <td>Cell B</td> <td align="right" valign="bottom">Cell C</td> </tr> <tr> <td align="left" valign="bottom">Cell D</td> <td>Cell E</td> <td align="right" valign="top">Cell F</td> </tr> </table>
This would look like this in a browser:
| Cell A | Cell B | Cell C |
| Cell D | Cell E | Cell F |
Notice where align and valign have not been specified the default values take over. Unfortunately align and valign are deprecated and their effects are better achieved using CSS, which will be covered in the CSS Tutorial. Colspan and rowspan are still useful and have no CSS equivalents (yet).