Elements of HTML – Tables

Over the next few weeks, Snoskred and I will be taking a look at some of the elements of HTML; as is customary, I’ll be looking at more advanced pieces of code – stuff you may or may not really need, and Snos will take a look at some of the essential pieces of HTML.

This week, I’m going to talk about tables. Tables were first introduced as an element only for Netscape browsers back in around 1994, with version 2.0 of their Navigator product. Not long after, they were added to the full HTML specification and implemented in other browsers over time.

To this day, they’re extremely useful for laying out a web page, however their usefulness has gone down with the growth of other tools, such as Cascading Style Sheets and XHTML. I’m going to show you a couple of things that you can do with tables, such as putting a caption on it, and also making it appear where you want it to appear.

First, we have to cover the code.

All tables must start with a <table> tag. This is what tells the browser that you’ve got a table here. Depending on whether you manually put HTML together or allow a program to do the coding for you (for example, the TinyMCE editor in WordPress), another piece of code may be added called <tbody>. The purpose of the TBODY tag is to designate the part of the table that is the body. If used in conjunction with the tags – <thead> and <tfoot> – for the header and footer respectively, you can create tables that, when printed, will have headers and footers on all pages.

The next important tag for a table is the <tr> tag, which says that this is the beginning of a row in the table. Within a row, you may have two types of cells – headers and regular cells. Headers use the code <th>table heading text</th> and regular cells use <td>table cell text</td>. At the end of each row, you need to “close” the row by using the </tr> tag.

At the end of the table, after you’ve closed the last row of it, you need to close the table, otherwise it will throw off the rest of the page you’re trying to write. To close the table, simply use the </table> code.

Formatting Tables

You can format a table to appear in just about any format you wish. One of the best things about HTML is that no matter the overall code you use, generally the attributes you assign for the element will be consistent. For example, if you want the table to be centered on the screen, then you just add this to the <table> tag –

align="center"

if you want it on the right or left, then just change it to the one you wish.

However, there are some attributes which are specific to tables. The first of which is the border. Most of the time, when you have a table, you will want to have a border. Depending on the browser you’re using, it may not show the border, or you may get a border that is too big for what you want. To create the border, simply add this attribute to the <table> tag – border="{size}" – replacing {size} with the number of pixels you want the border to be in width.

Another specialized attribute for tables is the cellpadding attribute. Put simply, cell-padding is used to create space around every cell in the table, which is quite useful when you may want to have your text more readable, or have an image which has things you want to see that are right on the border of the image. Again, to set the cell padding, simply put this into the <table> tag – cellpadding="{size}"

A similar property to the cellpadding is cellspacing. This attribute tells the browser how much space to put between each individual cell while leaving the actual borders in place. The padding in the border area will appear the best if you don’t have the border set to zero. You can see an example of this below. To use the cellspacing attribute, put this into the <table> tag – cellspacing="{size}"

You may wish to put a caption onto a table, such as “Figure 1-4. Text tools of alignment for HTML code”. In HTML, the way to put a caption on a table is not much different to how you put a title on a page. You need to put a separate tag into the table’s code for it to appear. Here is what the beginning of a table’s code would look like with a caption (and I’m setting it to show at the bottom):

<table>
<caption align="bottom">This is your caption.</caption>
<tr> et cetera

Some examples

I bet y’all are wanting to see some examples now, aren’t ya? 😉

If you want to see the underlying code from the table, simply select it and view selection source if you are in Firefox.

OK, here’s the first example – centred, with 10 pixel cell padding and no border:

Heading 1 Heading 2
First Row
Second Row

Example 2: Aligned to the right, 5 pixel border, 10 pixel cell spacing:

Heading 1 Heading 2
First Row
Second Row

Example 3: Left-aligned, 5 pixel border, 5 pixel spacing and padding, caption, and a background color:

Heading 1 Heading 2
First Row
Second Row

Further reading

Just a note – there might not be a companion post to this as Snoskred hasn’t been feeling well for the last few days, and hasn’t had the energy to focus on writing.
W3 Schools: HTML <table> tag
W3 Schools: HTML <tbody> tag
HTML Help: TABLE – Table

Over to you

Take some time to experiment with this code if you wish. If you come up with something cool in a table, drop me a link in the comments 🙂

As always, we’re open for suggestions for future Tuesdays; if you have one, drop me a line via the contact form. 🙂

Previously in the Tuesday Think Tank

21st August: RSS
14 Reasons Readers Unsubscribe From Your Blog
Tuesday Think Tank: All About RSS

28th August: Blog Templates
Blog Design – Open Your Eyes.
Demystifying Blogger Template Editing

4th September: Nofollow
Spam, Spiders And Do Follow, Oh My!
Say No! to Nofollow

11th September: Site Meters
Do NOT Rely On Your Site Meter.
Track Your Visitors with Google Analytics

18th September: Technorati
Technorati – Sending Out An SOS
The Ups (and Downs) of Technorati

25th September: Google Reader
Google Reader Can Make Your Life Easier – Here’s How.
Improving your Google Reader Experience

2nd October: HTML
Basic HTML for Bloggers.
Some HTML Tips & Tricks

9th October: Time Management
Time Management – Tuesday Think Tank
Use Google Calendar to organize your life

16th October: One last Blogger Thing
Move your Blogspot blog to your own Domain with ease

23rd October: Skype
All About Skype – Tech Tuesday
Skype – A phenomenal tool for communication

30th October: Image Hosting/Blog Stats
The Truth About Blog Stats Revealed
Host Images online for free? Yes, you can!