HTML Tags – Part 5: The Table Tag

The decision to use tables in your site is still a bit of a controversial topic because of its use in the past. If you’re not sure whether you should use a table in your site, read this article to find out what it is, how it was once used, and how you can use it effectively.

HTML Tags - Table Tag

HTML Tags – Part 5: The Table Tag History

Way back in the day, the HTML Table tag, <table>, was the go to tag for designing the layout of a website. The navigation, the header, the content, and even the footer were structured using this tag. If you wanted to colorize one section of the page or place an image on the right side of your copy, you’d have to located which section of the table had the area you wanted to manipulate and make your changes.

Each item that would need to be placed on the page would have it’s own <table> tag, which could get very confusing when there were tables embedded in other tables. It was very common and considered the only way to design a website.

Since the rise of web standards and CSS (Cascading Style Sheets), it is now severely looked down upon to use the <table> tag for designing the layout of a site. Combining CSS and the HTML Div tag, which is discussed in detail in my article called Learn CSS – Part 2: Other Ways to Write CSS, will take the place of using the <table> tag from the olden days.

This tag is still used today but only to store and show informational data. There are some who feel that everything can be accomplished using CSS, but it’s still good to know how to use it.

HTML Tags – Part 5: The Table Tag and Its Components

The <table> tag has quite a few tags that are required. Here is a screenshot from Adobe Dreamweaver of a table with explanations of how each sub-tag works below:

HTML Tags - Table Tag Code and Example

  • <caption> – provides a description of the contents of the table
  • <tbody> – similar to the <body> tag, it encloses all of the tags and information within the table
  • <tr> – the table row of the table
  • <th> – the table header; names of the headers for each column
  • <td> – the table data; all of the content that is listed under each column

Cellpadding and Cellspacing Attributes

There are a few more attributes that are still in use today but can be adjusted using CSS. Two of them are cellpadding and cellspacing attributes. The example below will show the difference between the two.

HTML Tag - Table Tag Cellspacing and Cellpadding Attributes

The first table shows the cellpadding method and as you can see, it adds cushion between the content inside the cell and the cell itself. The cellspacing, in the bottom table, adds distance between each cell.

Both attributes provide room so that the information can be easily read, just in a different way.

Other attributes used are the width and col commands. The width will determine how wide the <table> will be and col will determine the width of the columns.

So what do you think?

Do you believe the <table> tag is worth using within a webpage today? Give me your thoughts on my Facebook Fan Page.