With the recent move towards semantic, clean, tableless, and beautiful code, there have been people who have gone overboard trying to perfect their code by leaving tables out completely. Many swear that they are bad, shouldn’t be used, and are just a sign of bad, outdated coding. This is not the case however, and tables are a semantic, and useful tool in many situations.
When they should be used?
Even with the abundance of such people who curse tables, there are some people who use tables from time to time. The clear majority of these people use them for one purpose, and that is for tabular data. This sounds like a broad term, however, tabular data includes anything that should be represented with rows and columns, which includes, but is not limited to the following:
- Hosting plan information
- Invoices
- Shopping carts
The aforementioned information is what uses tables, as no other way of coding them makes sense, however there are people who will do whatever they can to avoid tables and still present this information how they need to. If you have to convince yourself that you should use something else since a table makes most sense, then chances are, a table is right for the job.
Here is an example of a properly used table via the amazon.com shopping cart:
When shouldn’t they be used?
This is a rather obvious question, even for people who don’t code but just stay on the design side of the spectrum. The main thing that a table should not be used for, is of course, an entire layout. There was once a time where it was okay, and even encouraged to use a table for an entire site, however as browsers have become better, they have been better suited to handle use of tableless layouts along with the implementation of CSS. In addition to using them for layouts, tables shouldn’t be used for any purpose other than for data, tabular data that is. To use them for any other purpose would be considered outdated.
Common ways to get around tables
Over the years, coders have come up with many ways to get around having to use tables. Some use lists, both <ul> lists and definition lists, <div>’s, and any other tag they could use. All of these ways are considered wrong, and for many reasons.
The following code is an example of how someone may code a pseudo-table using lists:
<ul id=”headings”> <li>ID</li> <li>Name</li> <li>Qty</li> <li>Remove</li> </ul> <ul id=”item”> <li>1</li> <li>Tables using lists</li> <li>3</li> <li>Yes / No</li> </ul>
Take that code, and imagine that there is one list for the heading, and another one for each item in the example shopping cart. While it will result in the same amount of markup, a list isn’t the correct way to represent a single item in a shopping cart.
This next example is the same pseudo-table, but by using <div>’s in place of lists.
<div id=”headings”> <div>ID</div> <div>Name</div> <div>Qty</div> <div>Remove</div> </div> <div id=”item”> <div>1</div> <div>Tables using divsts</div> <div>3</div> <div>Yes / No</div> </div>
As you can see, this code is remarkably similar to using lists, however it is far less semantic than using a list, while lists still aren’t semantic. For example, if you wanted to have bold text on a page, you wouldn’t use the <span> tag with an inline style to bold the text, you would just use the <strong> tag because it makes more and it was made strictly for that purpose.
How do you make a proper table?
Here I am going to show a quick code example of what a simple, yet proper table, should look like, using code. I’ll use the same example as I did earlier, with a pseudo-shopping cart.
| ID | Name | Qty | Remove |
|---|---|---|---|
| 1 | A proper table | 3 | Yes / No |
You can view the source of the table here:
<table border=”1” cellspacing=”0” cellpadding=”4” summary=”Shopping cart for user”> <thead> <tr> <th>ID</th> <th>Name</th> <th>Qty</th> <th>Remove</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>A proper table</td> <td>3</td> <td>Yes / No</td> </tr> </tbody> </table>
Now to go over each part of the tables code. Of course, you have the opening tag, which includes any declarations that can’t be done using CSS, which includes cellspacing, and others which include the border and cellpadding. However, there is a new one in the opening tag that you may have never seen before, which is summary. This attribute is rather self explanatory, and it includes a brief summary of what the table is for and what it is used for.
There is also two other tags which are rarely used, which are <thead> and <tbody>. Again, these tags are self-explanatory, however, in addition to these, there is also <tfooter>. The purpose of these three tags, is to define a header section, which includes table headings, a body section, which includes all of the items (inside a shopping cart, for example), ad a footer section which would include items such as a checkout button, subtotal, tax, etc. While these are not 100% necessary, they do combine to create a proper table using correct markup techniques.
Lastly, are the most common tags, as they are used in every single table, which are the <td> and <th> tags, which create a “table detail” cell, and a “table heading” cell inside the table. The <td> tag should be used for all cells, except when they are a table header, such as the ID, Name, Qty, and Remove headings in the above table example.
Here is an example of a properly coded table, making use of the caption tag as well: (click for live view)
Have fun coding your tabular data!