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.
HTML-XHTML-Table-Tutorial

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.

Subscribe To Our Newsletter

Subscribe To Our Newsletter

Join the TeamTutorials mailing list and get the latest tips, tricks, and special discounts for members only.

Thanks! Please click the link in the email we just sent you to confirm.

  • 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.

  • You are right Phil. The

    and even tags should be used properly. Also the scope should be used for

    tags because they could be headers for either rows or columns. I personally have never had issues with IE rendering tables, but I do a lot of javascript work. Well, even with standardized code, IE has problems rendering elements, but that is another issue.
  • 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!

  • v
  • 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!

  • 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.

  • You don’t need to define 100s of DIVs. You can just use Classes instead of IDs.

  • I agree, but I still don’t see the point of not using tables for what thy are designed for.

  • Divs were made for designing. Tables were made for holding information. Please don’t make misleading tutorials.

  • That’s the whole point.

  • Ian

    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.

  • sime

    good article imo. the people disagreeing with you are missing the point.

  • I also agree, but I still don’t see the point of not using tables for what thy are designed for.

  • Joe Bloggs

    Yesterday I spent 4 hours trying to get my divs to behave like a table. In other words, have rows adjust to the highest row, have row height match up, have columns adjust to the content, not overlapping, not having strange border issues, using clear fix, trying to get display-inline to act as expected…Still, four hours!

    Bug after bug appeared. Fixing one bug created another. Everything finally looked great – until I tested in IE. Then the whole thing basically exploded. Four and half hours later, I decided to do the same thing with a table. I got some coffee, sat back down at my desk at 12 noon. 8 minutes later, I was done.

    And I have been writing html, Java, PHP, some ASP/C# pages, and CSS for around 15 years. I am not a novice. Sometimes, the only way to make html behave like a table, is to use a table.

  • Oregon Rams (Pacific Time Frame Zone web marketers).
    With all the dueling monologues, there is
    no dialogue. There is also a trend of many college students running
    up debts on sports betting.