Pro Blog Design

Have you ever used tables in your articles? These days most people haven’t.

HTML tables were used a lot a few years ago but nowadays most people have forgotten about them.

Maybe it is because designers used to have to design web sites by using tables in the early days. Since this was a very confusing way to style web sites it created a rather negative feeling towards using tables. No matter what the actual reason was, tables are still a great way to present content.

They make is so easy at presenting information that once you get the hang of it you never want to have to miss them again.

What Kind of Information Can Be Presented in Tables?

HTML tables can prove useful for several sorts of information. Of course there is information which does not make sense to present in a table but some content will simply look great when you use tables to display it. For example you could use tables for:

• comparison of all sorts of information, e.g. different web hosts
• lists (common to social media)
• time lines

For a working example; I used a table to present the different ways you can make money off a web site.

Basic HTML Table Knowledge

Before we can begin with creating a table, we need to have some basic knowledge for creating tables. The following are the common HTML tags used for tables.

I hope this helps you in understanding about what makes up a table. If you are still not sure then I suggest reading a more thorough HTML table guide.

Here is the standard HTML table layout:

<table border="0">
<tbody></tbody>
<thead>
<tr>
<th>Headline</th>
<th>Second Headline</th>
</tr>
</thead>
<tbody>
<tr>
<td>First Row, First Column</td>
<td>First Row, Second Column</td>
</tr>
<tr>
<td>Second Row,First Column</td>
<td>Second Row, Second Column</td>
</tr>
</tbody>
<caption>This is the table caption</caption></table>

This code creates a new table with three rows and two columns. The first row contains the table header while the other two are just normal table rows.

You also have to know that there is a way through which you can span one cell across multiple columns. You can do this by using the <td colspan=”3″> property. In this case the column will span across three columns.

Because this default table (without any CSS) doesn’t look good, the next thing we need to do is to add some custom CSS code to completely change the look of the table.

How to Style Tables Nicely

In order to style your table you need to locate your default CSS stylesheet which is usually called style.css . At the bottom of the file, add this code for the table.

table {
	width:100%;
	border-collapse:collapse;
	line-height:1.6em;
	color:#3B485F;
	text-align:center;
}

The CSS width tag is used in this case to make the table spread across the whole content section. Border-collapse is used to remove the default borders that are created when using tables. We have also increased the line height and changed the color of the text. Further, notice that the text is center-aligned.

table tr.odd {
	background:#FFEFEF;
}
table tr {
	background: #FCFFDF;
	border-bottom:1px solid #EFEFEF;
}

tr.odd is used to style every odd row. To make these odd rows stand out we just change the background color. And to separate rows from previous ones we added a little border.

table td {
	padding:0.1em 0.2em;
}

Now we have added some padding to the columns to make the content blend in well.

table th {
	padding:0.2em 1em;
	background: #AFCCFF;
	border-bottom: 1px solid #9F9F9F;
	color:#fff;
}

We changed a lot in the table header to make it stand out from the rest of the content. We added more padding, a different background and border, and also set the text color to white.

table thead th {
	height:35px;
	background: url(tableheaderbackground.png) repeat-x;
	font-size:1.1em;
}

We want the main table header to stand out most of all, so we apply some extra rules to it.

In this case we use a background image (a simple gradient, click the link to download it) that should be placed behind our table header column to make it look nice. The picture should be as high as the height we set, i.e. 35px. We also increase the font-size a little bit to make it standout from the rest of the table.

table caption {
        caption-side:bottom;
        font-size:0.9em;
        padding:8px 5px;
        color: #7F7777;
}

The CSS property caption-side is used to define where the caption should be placed, in this case we want the caption below the table. Then we decreased the font-size a little bit, changed the color of the text and added some padding to set the caption apart from the rest of the table.

Here is what the table will look like using different content but the same CSS code:

If you do not want to use this format for every table, then go ahead and add a class to every table entry mentioned, for example table.list.

Ideas to Enhance Tables

One cool feature with CSS is that you can use the :hover method not only on links but on all sorts of HTML tags. For example you could add a td:hover to the CSS code to style columns differently when people hover over it.

Further if you want to make your table more exotic you could also change the cursor when someone moves over the table by using the CSS cursor property. Even though some people do it I would be very careful to not change the cursor into something completely unknown as it will confuse your visitors.

Conclusion

This article outlined the overall use of tables and what kind of information can be presented through them. I also hope it helped you in understanding tables better. You should play around with styling tables and maybe design your own cool table that especially matches the style of your web site.

Have you ever used a table in your post content? Or do you just not trust them at all anymore?