Styling Tables with CSS
- To use CSS to format tables.
Although tables should not be used for laying out pages, they should still be used for tabular data, such as financial reports or a meeting agenda.
A Review of HTML Table Syntax
The following code sample shows a basic unstyled table:
Code Sample: StylingTables/Demos/TableHomeRuns.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Home Run Hitters</title> </head> <body> <table summary="This table shows the all-time home run leaders in major league baseball."> <caption>All-time Home Run Leaders</caption> <thead> <tr> <th>Player</th> <th>Home Runs</th> <th>Team</th> </tr> </thead> <tfoot> <tr> <td colspan="3">*Alleged steroid user</td> </tr> </tfoot> <tbody> <tr> <td>Barry Bonds*</td> <td>762</td> <td>Giants</td> </tr> <tr> <td>Hank Aaron</td> <td>755</td> <td>Braves</td> </tr> <tr> <td>Babe Ruth</td> <td>714</td> <td>Yankees</td> </tr> </tbody> </table> </body> </html>
The following table shows the structural and informational attributes used in HTML tables:
| Attribute | Tags |
|---|---|
| summary | table |
| colspan | th, td |
| rowspan | th, td |
Most other attributes are for formatting and can be replaced with CSS.
The following table shows the formatting attributes used in HTML tables and their CSS replacements:
| Attribute | CSS Replacement | Tags |
|---|---|---|
| cellspacing | border-collapse and border-spacing | table |
| cellpadding | padding (applied to cells) | table |
| border | border | table |
| background(see footnote) | background-image | table, th, td |
| bgcolor | background-color | all |
| width | width | table, th, td |
| height | height | table, tr, th, td |
| align | text-align | tr, th, td |
| valign | vertical-align | tr, th, td |
Some of the CSS replacements shown in the table above can be used in other table tags. For example:
- The border property can be applied to td and th as well as the table tag.
- The text-align property can be applied to table, thead, tbody, and tfoot as well as the tr, th and td tags.
We'll only discuss the cellpadding, cellspacing, and border replacements in this lesson as the other properties are all general formatting properties that have no specific behavior unique to tables.
border-spacing
The border-spacing property is used to specify the space between adjacent borders and the content surrounding the table.
Code Sample: StylingTables/Demos/border-spacing.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#spacing-0 {
border-spacing:0px;
}
#spacing-10 {
border-spacing:10px;
}
#spacing-20 {
border-spacing:20px;
}
td {
border:10px solid black;
padding:20px;
}
caption {
font-weight:bold;
}
</style>
<title>border-collapse</title>
</head>
<body>
<table id="spacing-0">
<caption>border-spacing: 0px</caption>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
<hr/>
<table id="spacing-10">
<caption>border-spacing: 10px</caption>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
<hr/>
<table id="spacing-20">
<caption>border-spacing: 20px</caption>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
</body>
</html>
The above code renders as follows in Firefox 3:
In Internet Explorer 7 and earlier, border-spacing is not supported.
border-collapse
The border-collapse property takes the values separate and collapse. It is used to indicate whether adjacent borders should be merged (collapse) or not (separate). The default behavior is to keep the borders separate. For example, if two adjacent borders have 5px borders, a 10px border would appear between them.
The screenshot below illustrates this:
Notice the border between cells 1 and 2 is twice the width of the edge borders. The rule used to achieve this effect is shown below:
table {
border-spacing:0px;
border-collapse:separate;
}
As separate is the default, the border-collapse declaration could be left out.
The screenshot below shows how the border changes when border-collapse is set to collapse:
Notice the dividing border is now the same width as the edge borders.
Some things to note about border-collapse:
- When border-collapse is set to collapse, border-spacing becomes moot.
- When collapsing borders, if two adjacent cells have different border widths, the wider of the two borders will be used.
- In Internet Explorer 7 and earlier, border-collapse does not override the cellspacing attribute which defaults to 2. For it to work, you must either include the cellspacing attribute with a value of 0 or use a more advanced CSS hack.
border
The deprecated border attribute of the table tag affects all the borders of the table. It is not possible to have borders on some rows or cells but not others. Likewise, it is not possible to have vertical borders without horizontal borders. It's all or nothing.
CSS gives you much more control. It allows you to control the borders of each side of the table and each side of each cell independently using the border properties discussed in Borders.
For example, to apply a 2px solid dark blue border to the top and bottom of the table, but not to the left and right, you could use the following CSS:
table {
border-collapse: collapse;
border-top: 2px solid darkblue;
border-bottom: 2px solid darkblue;
}
You might then wish to add light blue horizontal borders within the table:
td, th {
border-top: 2px solid lightblue;
border-bottom: 2px solid lightblue;
}
The result of adding code differs between browsers. In Firefox and Safari, the cell borders take precedence over the table border, so the dark blue borders defined for the table will be replaced by the light blue borders. Not so in Internet Explorer, which gives precedence to the table border.
Now let's add silver vertical borders within the table by adding a couple of declarations to the td, th rule:
td, th {
border-top: 2px solid lightblue;
border-bottom: 2px solid lightblue;
border-left: 2px solid silver;
border-right: 2px solid silver;
}
We now have a table that looks something like this (FF and Safari on the left, IE on the right):
One fix for the different approach to border precedence would be to apply a dark blue border to the top border of cells in the top row and to the bottom border of cells in the bottom row of the table. But let's instead get rid of the outer table border entirely. That should be easy enough to do - just get rid of the border-top and border-bottom declarations for the table tag. It's not as simple as that though, because the top and bottom rows have borders and so do all the left-most and right-most cells. Here's the trick:
table {
border-collapse: collapse;
border: 2px solid #fff; /*for IE*/
border-style:hidden; /*for FF and Safari*/
}
As you can see from the comments, we need to add two declarations: one for IE and another for Firefox and Safari. But it gets the job done:
padding
The padding property should be applied to table cells (e.g, th and td) to create a buffer between their content and the cell borders. For example, to add space around the content in the cells in the table header, you could do this:
thead th {
padding: 5px;
}
You might also want to push down the content in the footer of the table some:
tfoot td {
padding-top: 10px;
}
As you can imagine, with all this control, you have the ability to design some pretty slick tables, a lot slicker anyway than you could with plain old HTML. By adding colors and modifying other properties, we have improved our table's appearance:
The code for this page is in StylingTables/Demos/borders.html.
Exercise: Styling a table
In this exercise you will style an employee timecard. The HTML already exists and there are some CSS settings for the page, but you must write all the CSS for the table itself.
- Open TableLayout/Exercises/Timecard.html in your editor.
- Add CSS to make the table appear like the one below:
- The colors used are listed below:
- Darker orange (caption background and horizontal borders): #f79646
- Lighter orange (background of thead and tbody even rows): #fde9d9
- Darker gray (tfoot background): #687886
- Lighter gray (vertical borders): #ccc
- White (font color in caption and tfoot): #fff
Styling Tables with CSS Conclusion
In this lesson of the CSS tutorial, you have learned to style HTML tables with CSS.
Footnotes
-
*The background attribute is actually not legal HTML in tables and table cells, but it has been pretty well supported, so we include it here to show how you should use CSS instead.