Tables explained — how to use and style them

Back in the “old days” of the web, tables were used for creating page layouts ranging from complex to simple (for example — creating a contact form). Today, we use DIVs and SPANs instead, and we should use tables only for displaying tabular data. In this article I will show you how to use tables (we will use , and ), display a caption and style it up with some CSS.

Creating our table

For our example we will create a “shopping list” table, with table head, 3 rows with items, quantity, price per item and total cost, and finally table footer with total cost of our shopping list. Here are the data and the code.

Item Qty Price per item Total cost
Total cost 8.80 $
Eggs (12 in package) 2 2.40 $ 4.80 $
Bread 1 1 $ 1 $
Potatoes (1 kg) 2 1.50 $ 3 $
Shopping list
Item Qty Price per item Total cost
Total cost 8.80 $
Eggs (12 in package) 2 2.40 $ 4.80 $
Bread 1 1 $ 1 $
Potatoes (1 kg) 2 1.50 $ 3 $

When creating tables, we could use already present cellpadding and cellspacing values, but we won’t. Instead, we will use CSS padding, so we could apply different settings to different cells. Border property won’t be used either, because we would like to create nice looking border around the tables. I dislike borders created with border property in the TABLE tag.

Now that we defined a table, we will need a caption. There is a CAPTION tag that we will use just bellow the TABLE tag, as it is supposed to be used.

To better define a table, we will use THEAD, TFOOT and TBODY tags. This way we will group similar elements – head elements, footer elements and body elements. The proper order to use these elements is like they are written. THEAD and TFOOT should be used to display table columns information, and one or more TBODY should be used to display row data.

Header and footer of a table must appear before the body, because they must be rendered first, if the body has numerous data.

We will use table header (TH) and table data (TD) cells to display tabular data. TH will be used for displaying column information (Item, quantity, price per item, total cost), names of items and total cost in the footer. TD will be used for the rest.

Why we used all this? There are two main reasons. First, we used this code to be semantically correct, so the table will look exactly in all the major browsers. This kind of table is accessible, so it can be viewed with screen reader or textual browsers like Lynx. The second reason is – because the CSS. If we have more tags, we can apply more specific styles to each of them.

Styling the table

Now that we defined our table, created the structure and entered the data, we have to style it. First, we will style the CAPTION element.


caption {
	font-size:1.3em;
	text-align:left;
	padding-bottom:10px;
}

Depending of the CSS structure you have, you could group the CAPTION element with H2 or H3 (h2, caption { ... }), because of the similarity. We aligned the caption to the left, and gave it a 10px bottom padding to remove it from the table.


table {
	font-size:1.1em;
	width:100%;
	border-top:1px solid #CCC;
	border-right:1px solid #CCC;
	text-align:right;
}

We wanted our font-size to be 11px, so we used 1.1em (remember to have font-size in the body defined as 62.5%). Table is the element that can be 100% long, and the paddings inside the table won’t be added to overall width. All the text is aligned to the right, because most of the table data is currency, which we want to align to the right.

To create a border all around the table we can use border:1px solid #CCC;, but we used border-top and border-right instead. Why? If we used a border for the whole parts of the table, if we apply the border to cells, we would get a 2px border. By using top and right border values with table, and then left and bottom with the cells, we would get 1px of the border all around and inside of the table. Look at the next code.


th, td {
	padding:5px;
	border-left:1px solid #CCC;
	border-bottom:1px solid #CCC;
}

We grouped TH and TD elements, because they act the same. To remove the cells data one from another we used padding:5px;. Remember that table header cells display text bolded.

To finish styling the table, we would use background colors for table header and table footer. To the first cells of the row, we added a class called “first-child”. Because in every row the items display in the first column, we wanted the text aligned left, and the quantity (class “qty”) will be displayed centered. To apply a style to the first cell in a row, we could use :first-child pseudo-class. Unfortunately, this is not supported by (TA-DA!) Internet Explorer, so we used explained method instead.

And another thing that is not supported by IE (but we added it anyway :) is :hover pseudo-class to table rows. So, all of you using Firefox (and some other browsers too) will see a background color change if you go with your mouse over the body of the table. We used tbody tr:hover { ... } so the hover effects only the body of the table.


thead {
	background-color:#B3C252;
}
tfoot {
	background-color:#C6D564;
}

th.first-child, td.first-child {
	text-align:left;
}
.qty {
	text-align:center;
}
tbody tr:hover {
	background-color:#F5F5F5;
}

The example

Take a look at our table example

Further reading

Reference to the TABLE tag on HTMLDOG.COM
Tables in HTML documents on W3C.ORG


Comments

2 responses to “Tables explained — how to use and style them”

  1. One thing you missed out is the border-collapse style – when you need pixel perfection, that’s the one that’s usually been forgotten:

    
    table {
      border-collapse:collapse;
    }
    

  2. Thanks for your info Luc :). I must admit I didn’t used it yet, but it might prove itself usefull.

Leave a Reply

Your email address will not be published. Required fields are marked *