5.1 Table Attributes - Styling
Styling can be applied to tables using attributes:
| Attribute | Purpose | border | Defines a table border (default=0) |
|---|---|
| cellpadding | Defines padding around cell contents (default=1) |
| cellspacing | Defines spacing between cells (default=2) |
| frame | Specifies which parts of the outside borders should be visible |
| rules | Specifies which parts of the inside borders that should be visible |
Border
When not specified the default border thickness is 0px but this can be increased. If the border is set to zero then again no border will be visible. When set to a value above this, it becomes visible. For example:
<table border="1"> <tr> <td>Cell 1</td> <td>Cell 2</td> </tr> <tr> <td>Cell 3</td> <td>Cell 4</td> </tr> </tr> </table>
This will give both the table and cell contents a visible border 1px wide.
| Cell 1 | Cell 2 |
| Cell 3 | Cell 4 |
Cellpadding
The cellpadding attribute is used to define the padding around the cell contents, that is the amount of space between the contents and the cell border. This attribute can be added into the table tag along with other attributes, such as the border attribute.
<table border="1" cellpadding="10"> <tr> <td>Cell 1</td> <td>Cell 2</td> </tr> <tr> <td>Cell 3</td> <td>Cell 4</td> </tr> </tr> </table>
In addition to a 1px border, this will give a padding between the cells and their contents of 10px.
| Cell 1 | Cell 2 |
| Cell 3 | Cell 4 |
Cellspacing
The cellspacing attribute is used to define the spacing between the cells. This attribute can also be added into the table tag along with other attributes.
<table border="1" cellpadding="10" cellspacing="7"> <tr> <td>Cell 1</td> <td>Cell 2</td> </tr> <tr> <td>Cell 3</td> <td>Cell 4</td> </tr> </tr> </table>
In addition to a 1px border and a padding between the cells and their contents of 10px, this will widen the spacing between the cells to 7px.
| Cell 1 | Cell 2 |
| Cell 3 | Cell 4 |
Unfortunately cellpadding and cellspacing are both deprecated and are better achieved using CSS.
Frame
The frame attribute is used to specify which parts of the outside borders should be visible. The choice of values available are:
| Value | Description |
|---|---|
| void | No frame is drawn (default) |
| above | Only the top side is drawn |
| below | Only the bottom side is drawn |
| hsides | Only the top and bottom sides are drawn |
| lhs | Only the left-hand side is drawn |
| rhs | Only the right-hand side is drawn |
| vsides | Only the left and right sides are drawn |
| box | All four sides are drawn |
| border | All four sides are drawn |
For example, if we wanted a table with vertical borders only:
<table border="1" frame="vsides"> <tr> <td>Cell 1</td> <td>Cell 2</td> </tr> <tr> <td>Cell 3</td> <td>Cell 4</td> </tr> </tr> </table>
This would look like this in a browser:
| Cell 1 | Cell 2 |
| Cell 3 | Cell 4 |
Rules
The rules attribute is used to specify which borders will appear between the cells. The choice of values are:
| Value | Description |
|---|---|
| none | No rules are drawn (default) |
| groups | Rules drawn between row groups and column groups |
| rows | Rules are drawn between rows only |
| cols | Rules are drawn between columns only |
| all | Rules are drawn between all rows and columns |
For example, if we wanted a table with the rows outlined only:
<table border="1" rules="rows"> <tr> <td>Cell 1</td> <td>Cell 2</td> </tr> <tr> <td>Cell 3</td> <td>Cell 4</td> </tr> </tr> </table>
This would look like this in a browser:
| Cell 1 | Cell 2 |
| Cell 3 | Cell 4 |
Frame and rules are not generally widely used in tables and can be used in the abscence of the border attribute. However, if border is specified as zero, these will default to void and none respectively.