How and Why You Should Still Use Tables
Since CSS has become so popular lately, there has been a lot of bad talk about tables. From what I have read using tables is taboo. This article will show you how to create tables using XHTML and explain why I believe there is still a need for tables.
First, we will talk about web layouts. A few years ago, before I learned CSS, I can remember chopping up an image and Photoshop and jumping straight into creating a table. Of course now the best way to do a layout is with CSS/XHTML. Tables are no longer accepted as a layout method and I would have to agree with that. The best way to present a layout is by using CSS and DIV tags.
So when should you use tables? I think it pretty obvious that when you are displaying tabular data, a table is the best way to do that. There are some people who believe that you should use nested DIV tags for this. The thing is that is way more difficult that using a table for what it was designed to do. I’m sorry, but I do not see the need to make 100 DIVS and define the style with CSS. Like I said, if you are displaying tabular data a table should be used.
Now that I have explained why tables should still be used, let’s go over creating a table using XHTML. In this tutorial I will show you how to create the basic structure for the table. In a tutorial later I will show you how to apply some CSS to change the style of the table.
Begin with the open and close table tags. We will add a border for the purpose of this tutorial. Later in part 2 we will define the style of the table using CSS.
<table border="1"> </table>
The basic tags that make a table are: TR which is a table row, TD which creates a table cell or column and TH which defines a cell as a table header.
So we are going to create a row in the table
<table border=”1”> <tr> </tr> </table>
Next we will add the TH tags to create our table header. My table will have three columns as you will see below.
<table border="1"> <tr> <th>First Name</th> <th>Last name</th> <th>Age</th> </tr> </table>
That is all the data for that row. Now we will add another row in our table using the TR tag. This time the cells are not header cells so we will create them using the TD tag.
<table border="1">
<tr>
<th>First Name</th>
<th>Last name</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>Ward</td>
<td>21</td>
</tr>
</table>
Now for all the other rows in our table we can copy the last row we created and update the info.
<table border="1">
<tr>
<th>First Name</th>
<th>Last name</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>Ward</td>
<td>21</td>
</tr>
<tr>
<td>Mike</td>
<td>Maguire</td>
<td>21</td>
</tr>
</table>
Now there is no limit to the number of rows you can add. Have fun adding some data.
<table border="1">
<tr>
<th>First Name</th>
<th>Last name</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>Ward</td>
<td>21</td>
</tr>
<tr>
<td>Mike</td>
<td>Maguire</td>
<td>21</td>
</tr>
<tr>
<td>Sara</td>
<td>Lee</td>
<td>61</td>
</tr>
<tr>
<td>Walter</td>
<td>Reed</td>
<td>1</td>
</tr>
</table>
Once you add the data, save the file with a .htm extension and open it in your favorite browser. You should see something like this.
Of course these are basic tables and could use an upgrade in the looks department. There are several HTML properties that you could define to change the style of these tables. I will not be showing you how to do that. I will show you how to style them using CSS since that is the standard today. Look for that tutorial in the future.
Other Related Tutorials
Make money from your website with Ads4dough. The only Team Tutorials approved Affiliate Network!
on February 13th, 2008 at 3:39 am
You are missing some important parts of the table. The <tr> with the <th>s in should be within a <thead> element and the rest of the table should be in a <tbody> element (this can cause JavaScript problems in IE if it isn’t included).
Also, the <th>s should have a scope attribute of “col” to show that they are the headings of columns.
on February 13th, 2008 at 10:32 am
You are right Phil. The
and evenon February 16th, 2008 at 11:36 am
John,
I believe that IE has trouble appending rows to a table if it doesn’t have a <tbody> element. I could be wrong, but that has been my experience. If you use <tbody> then you won’t have noticed it!
on February 28th, 2008 at 7:48 pm
on March 1st, 2008 at 9:16 am
What is the purpose of the HTML examples. In the 3rd paragraph you say - use tables not divs for creating tables of data. The examples just show you a random table with some data?! You should have at least shown a comparison to a table made with tables compared to one using CSS. Sorry but this article doesn’t really have much relevance!
on March 1st, 2008 at 1:52 pm
The purpose of the HTML examples is to show somebody how to create a table using HTML. I could compare it to a table created with div tags, but I don’t have a few days of spare time. It might not be relevant to you if you know how to make tables, but there are plenty of people how don’t know how.
on March 12th, 2008 at 2:01 pm
You don’t need to define 100s of DIVs. You can just use Classes instead of IDs.
on March 12th, 2008 at 2:02 pm
I agree, but I still don’t see the point of not using tables for what thy are designed for.
on March 17th, 2008 at 1:51 pm
Divs were made for designing. Tables were made for holding information. Please don’t make misleading tutorials.
on March 17th, 2008 at 2:01 pm
That’s the whole point.
on April 5th, 2008 at 6:12 am
In your first paragraph you talk about a lot of bad talk about tables.
I don’t think I have ever heard any bad talk about using tables as they were intended to be used (displaying tabular data). The bad talk to which you refer to, revolves around the use of tables to layout/format web pages.
The root of the issue is mixing content with design layout/formatting. Nothing that I’ve read ever lead me to think I need to build ‘tables’ using CSS, but instead that tables should be used as tables to display/organize stats, price list, etc… and any thing more than that (ie. formatting font, laying out page design, or anything else not directly related to the content) should be done with CSS.
I am not sure where you got the impression that nested div’s should be used, but that would be ridiculous. Div’s should be used to separate blocks of related content, allowing control over layout/formatting of the page. Div’s should not be used for any other purpose, divisions should be used as divisions and tables as tables. It is very simple.
I realize that this is what you may have been trying to get at, I just thought I would clarify in one small area.