CSS 101 | Part Seventeen - Tables

Welcome to another installment of the CSS 101 | A Beginner's Guide series. In this chapter we will be looking at a tag that has gained a lot of unpopularity over the years: the table tag and how to style tables with CSS.

What tables are used for ... and what they aren't used for

In the old days of web design, people used tables to layout their entire website (shockingly, some people still do), but this is not what the table tag is intended for. Tables are supposed to be used to hold data not for layout purposes. To layout your content, use div tags.

Tables are your friend

Some people have developed a phobia of tables, because it has been drilled into them that tables are bad. As a result they go out of their way to create substitute tables with "standard compliant" tags, such as divs, which culminates in cumbersome code that is difficult to maintain. There's no point in doing this. It's perfectly acceptable to use the table tag, as long as you use it for its intended purpose — to store data.

How to create a table

A table is denoted by the table tag and its rows and columns by tr and td tags respectively, which are inserted between the opening and closing table tags. Table headings should be represented by th tags, to add more semantic meaning to the table — as opposed to creating a heading class and applying it to your top row of tds. By default, ths are rendered in bold, to distinguish them from regular columns.

Example of a table

(X)HTML Code:

<table>
    <tr>
        <th>Heading One</th>
        <th>Heading Two</th>
        <th>Heading Three</th>
    </tr>
    <tr>           
        <td>Column One</td>
        <td>Column Two</td>
        <td>Column Three</td>
    </tr>
</table>

Result:

Styling tables

Applying styles to a table may seem confusing because there are several elements involved, and often it is challenge determining what you need to style. Let's break down some common tasks so we can see what you need to do in order to accomplish a specific task.

Adding padding to individual cells

This used to be done with the HTML table attribute cellpadding but (while cellpadding isn't deprecated) it isn't considered good practice to use HTML to control how an element looks — that's what CSS is for. Thus, to add padding around a cell, we use the CSS padding property and apply it to the tds of our table. Let's take a look.

CSS Code:

#cellPadding td {
	padding:6px;
}

.redCell {
	background-color:red;	
}

 .orangeCell {
	background-color:orange;	
}

 .yellowCell {
	background-color:yellow;	
}

 .greenCell {
	background-color:green;	
}

 .blueCell {
	background-color:blue;	
}

 .indigoCell {
	background-color:indigo;	
}

 .violetCell {
	background-color:violet;	
}

(X)HTML Code:

<table id="cellPadding">
	<tr>
    	<td class="redCell">Red</td>
        <td class="orangeCell">Orange</td>
        <td class="yellowCell">Yellow</td>
        <td class="greenCell">Green</td>
        <td class="blueCell">Blue</td>
        <td class="indigoCell">Indigo</td>
        <td class="violetCell">Violet</td>
    </tr>
</table>

Result:

Removing the space between cells

You may have noticed that table cells are individually spaced out by default, with a small gap in between each cell. This is down to the table borders, which are set to separate by default. Sometimes table borders can be annoying, for instance, when you want to apply a seamless background to your cells, as seen in the example below this paragraph.

To remove the table borders, we use the CSS property border-collapse and set it to collapse.

CSS Code:

#noCellSpace {
	border-collapse:collapse;
	font-size:2em;
}

.lighterGreyCell {
	background-color:#ccc;
}

.lightGreyCell {
	background-color:#999;
}

.darkishGreyCell {
	background-color:#666;
}

.darkGreyCell {
	background-color:#333;
	color:#fff;
}

(X)HTML Code:

<table id="noCellSpace">
	<tr>
    	<td class="lighterGreyCell">#ccc</td>
        <td class="lightGreyCell">#999</td>
	</tr>
    <tr>
        <td class="darkishGreyCell">#666</td>
        <td class="darkGreyCell">#333</td>     
    </tr>
</table>

Result:

Spacing out rows

Above, we talked about the table borders, which are turned on and off by setting border-collapse to separate and collapse, respectively. The reason I've mentioned border-collapse here is because manipulating the table borders is the only way to physically space out your rows. You can achieve the same effect by adding padding or margins to your cells, but this will only work if border-collapse is set to collapse, and this may not be the effect you're after.

Therefore, to increase the space in between our rows, we use the border property.In the example below, I have added a border-bottom to each cell and you can see that this has the effect of increasing the space between the rows in our table.

CSS Code:

#rowSpace td {	
	border-bottom:10px solid #fff;
	background-color:#4fbf59;
}

(X)HTML Code:

<table id="rowSpace">
	<tr>
    	<td>This is cell one</td>
        <td>This is cell two</td>
	</tr>
    <tr>    
        <td>This is cell three</td>
        <td>This is cell four</td>      
    </tr>
</table>

Result:

Give cells coloured border

At times you will want to add a coloured border to your cells. One way to do this involves ensuring your borders are separate (that border-collapse hasn't been set to a value other than separate or that it hasn't been set at all) and giving your table the background colour that you want your borders to be. We'll look at how to do this first, although I don't advocate using this method as it's rather like a hack and there is a better way of accomplishing the same task.

CSS Example:

#thinBorderBg {
	background-color:#e68a07;
}

#thinBorderBg td {		
	background-color:#4fbfb8;
}

(X)HTML Example:

<table id="thinBorderBg">
    <tr>
    	<td>One</td>
    	<td<Two>/td>
        <td>Three</td>
    	<td<Four>/td>
        <td<Five>/td>
    </tr>
    <tr>
    	<td>Six>/td<
    	<td>Seven>/td<
        <td>Eight</td>
    	<td<Nine>/td>
        <td<Ten>/td>
    </tr>
</table<

Result:

Using this method, your won't be able to reduce the size of your borders passed what is demonstrated above. This is due to the separate cell borders that increase the overall thickness of the border. Anyway, you really don't want to use this method. The best solution is to set border-collapse to collapse and apply a border to your tds, using the border property.

CSS Example:

#thinBorder {
	border-collapse:collapse;
}

#thinBorder td {	
	border:1px solid #e68a07;
	background-color:#4fbfb8;
}

(X)HTML Example:

<table id="thinBorder">
    <tr>
    	<td>One</td>
    	<td<Two>/td>
        <td>Three</td>
    	<td<Four>/td>
        <td<Five>/td>
    </tr>
    <tr>
    	<td>Six>/td<
    	<td>Seven>/td<
        <td>Eight</td>
    	<td<Nine>/td>
        <td<Ten>/td>
    </tr>
</table<

Result:

Centre aligning a table

In the olden days, we used the align property to align tables, or, even worse, the center tag (shudder). But now, good old CSS handles all things formatting related. So, how do we align a table with CSS? Quite simple, we use the margin property and set it to 0 auto. More on centre aligning can be found in The CSS way to align things.

CSS Code:

#centreAligned {
	margin:0 auto;
	font-size:140%;
	border:4px solid #052523;
}

#centreAligned td {
	padding:8px;	
}

(X)HTML Code:

<table id="centreAligned">
    <tr>
        <td>C</td>
        <td>D<td>
        <td>E</td>
        <td>F</td>
        <td>G</td>
        <td>A</td>
        <td>B</td>
    </tr>
</table>