Blogging Tips

Last week I explained the various tags available for coding tables. This week I’m going to show you how to use them!

I’m going to create a simple table to display the Blogging Tips weekly authors, their site address and how many posts they’ve written. So we’ll need a 3 column table for this.

The opening code

First of all we need to write out the opening code. Below is an example of this:

[sourcecode language="html"]

…

[/sourcecode]

The first line is the table tag opener with a summary to describe the table, line 2 then has the caption with is effectively the title for the table. Then the remaining lines map out the structure of the table setting the widths of the columns.

The table header and footer

The next step is the table header. We surround this with the thead tag and define our column headers:

[sourcecode language="html"] Author¹ Site Posts

[/sourcecode]

The above is fairly self explanatory. We’ve defined that it’s the table header, and also the title for each column header. I’ve added in a footnote number in next to the Author name which we then reference in the table footer as follows:

[sourcecode language="html"]
¹ The BloggingTips.com Weekly Authors

[/sourcecode]

The table body

We then just need to code up the table body:

[sourcecode language="html"]
Kevin http://www.kevinmuldoon.com/ 665 Ramkarthik http://www.bloggingtune.com/ 67 Yuwanda http://www.inkwelleditorial.com/ 87

….

[/sourcecode]

Above contains just a few of the authors for this example. All of the body rows are wrapped in a tbody tag. Then on line 2 we have the opening table row tag, which is closed on line 6. On line 3 I’ve defined a row header using the th tag with a scope of row. This allows us to set the relationship of the rest of the row to this cell.

Lines 7 to 16 are then just the same markup with different data.

The final code

Bringing this altogether gives us our final table, the code and the output can both be seen below.

[sourcecode language="html"]

[/sourcecode]

And the output is:

Conclusion

Hopefully this has given you an understanding of when you should use tables and how to mark them up.

Recommended additional reading: Tables in the CSS Age from David Anderson.