1. Technology
Send to a Friend via Email

Simple Table Styles

Use CSS to Style HTML Tables

By

Excel table with numbers
Adrian Assalve/E+/Getty Images

Start with a Standard Table

If you don't know how to build a table with HTML, you should first read the HTML Tables Tutorial before starting in on this article.

When you build a basic table without any styles or attributes, modern browsers display them very plainly. They don't include any borders or colors. The only nod to style or layout that most browsers use is to bold and center any header cells.

For the purposes of this article, I created a two-column, four-row table with table head and table body sections defined.

<table>
 <thead>
 <tr><th>Name</th><th>Alias</th></tr>
 </thead>
 <tbody>
 <tr><td>Jennifer Kyrnin</td><td>Web Design / HTML Guide</td></tr>
 <tr><td>Mark Kyrnin</td><td>PC Hardware / Reviews Guide</td></tr>
 <tr><td>Shasta</td><td>Moe</td></tr>
 <tr><td>McKinley</td><td>Kinkin</td></tr>
 </tbody>
 </table>

First, Let's Define the Borders

Before CSS, when you defined the border attribute on a table, this affected all the borders around the table as a whole as well as in between sections, rows, and columns. So many people think that CSS will act the same way, but it doesn't. Instead, CSS puts a border on the table itself - not around any of the cells.

So, to put a border around the cells of the table, you need to define that in your CSS:

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

And as you can see, this puts a grey border around every cell. But it looks somewhat strange. After all, the cells are all separated from one another - they don't look like a standard spreadsheet or table.

Collapse Your Table Borders

The HTML tables specification provides two ways of handling table borders: collapsed and separated. This gets really complicated really quickly, but suffice it to say that most browsers will display tables with the cells separated if you don't specify a preference. To fix this, you need to put a border-collapse style on your table:

table { border-collapse: collapse; }

When you use this style, your table borders will display as you might expect - simple lines between each cell. As you can see here.

Add Color

Adding color to your tables makes them much easier to read. And the benefit of using the thead and tbody tags means that you don't have to define a style for every row or cell - you just assign a background color to the thead and the tbody and your table cells will be colorized. It can be more complicated if you want to alternate row colors but even that is possible.

Make Your Table Responsive

One of the things you might notice about Web 2.0 pages is that they often use tabular data with visual feedback. In other words, the table rows or columns change color depending upon where your mouse is hovering.

With just a small amount of JavaScript and a line or two of CSS, you can create a table that highlights the row that the mouse is hovering over or changes color when it's clicked on.

Don't Be Afraid of Tables

When you need to post tabular data, don't leave it up to the browser to define how it will look. Instead use the CSS and JavaScript tools at your disposal to create a table that looks as good as the rest of your Web site.

©2014 About.com. All rights reserved.