Did you find this useful?
Socialize it today.


CSS Styling Tables

Saturday, March 17, 2012

tags CSS

Styling tables can really spruce up your web pages that contain structured data. Before you try to apply CSS to a table, you should be familiar with how to structure a table. When you build a basic table without any styles, most modern browsers will display them without any issues, but also without any formatting. The non-styled table will not include any borders or colors. The only style that most browsers use is to bold and center any header cells (<th>).


Basic Table

For the purpose of this article, we will use the following HTML code to display a table. We will then look at different CSS styling options to improve the appearance of the table.

<table>
<thead>
<tr><th>Name</th><th>Title</th></tr>
</thead>
<tbody>
<tr><td>John Smith</td><td>CEO</td></tr>
<tr><td>Sally Sheen</td><td>CIO</td></tr>
<tr><td>Joseph McKinley</td><td>CFO</td></tr>
<tr><td>Walter Conrad</td><td>CSO</td></tr>
</tbody>
</table>


NameTitle
John SmithCEO
Sally SheenCIO
Joseph McKinleyCFO
Walter ConradCSO


Table Borders

Unlike CSS, in HTML you define the border attribute on the table element itself. This attribute affects all the borders around the table as well as the rows, and columns. CSS does not handle the borders in the same way. In CSS, if you apply a border to a table, it creates a border on the table itself, not around any of the cells with the table. This is a much more flexible solution.


table { border: 1px #ccc solid; }


NameTitle
John SmithCEO
Sally SheenCIO
Joseph McKinleyCFO
Walter ConradCSO


To add a border around the cells of the table, you need to define that in your CSS as follows:


table { border: 1px #ccc solid; }
td, th { border: 1px #ccc solid; }


NameTitle
John SmithCEO
Sally SheenCIO
Joseph McKinleyCFO
Walter ConradCSO


While the table's presentation has improved, there are still other styling properties needed. You may notice that the table has a grey border around every cell. But it still does not look polished. We need to fix the space between the cells.


Collapse Borders

We can use the border-collapse property to set whether the table borders are collapsed or separated. The default view for most browsers is separed. We want to collapse the borders.


table { border: 1px #ccc solid; border-collapse: collapse; }
td, th { border: 1px #ccc solid; }


NameTitle
John SmithCEO
Sally SheenCIO
Joseph McKinleyCFO
Walter ConradCSO


Table Margins and Padding

The information in the table would be more presentable if you added some margins and padding within the cells. A margin around the table will provide space between the table and other elements, and the padding property will create space between the text and borders within the cells.


table { border: 1px #ccc solid; border-collapse: collapse; margin: 1em; }
td, th { border: 1px #ccc solid; padding: .5em;}


NameTitle
John SmithCEO
Sally SheenCIO
Joseph McKinleyCFO
Walter ConradCSO


Table Colors

Adding color to your table is a great way to put the finishing touches on your table. While you can apply color rows or even individual cells, if you define a thead and tbody element in your table, we can apply color to these elements directly.


table { border: 1px #ccc solid; border-collapse: collapse; margin: 1em; }
td, th { border: 1px #ccc solid; padding: .5em;}
thead { background: #FF0000; }
tbody { background: #FFFFFF; }


NameTitle
John SmithCEO
Sally SheenCIO
Joseph McKinleyCFO
Walter ConradCSO


Of course there are other properties that we can apply to the table elements such as width, height, text alignment, and so on, to further customize your tables. You can also apply a different background color to alternating rows by creating multiple CSS classes, or use javascript to highlight rows when you hover over them. Many of these other techniques are covered in the HTML, CSS, and Javascript tutorials.

Please help us spread the word by socializing it today!

email contact us

Did you find something wrong with the information on this page? Please take a moment to report it to us so that we can continue to improve the quality of the information on this site. Click here to report an issue with this page.



Recommended Books & Training Resources

HTML CSS and JavaScript Editor HTML CSS: The Complete Reference CSS: The Missing Manual