XHTML Tutorial - Chapter 9: Tables

Tables are used on web pages to structure data into, well, tables. You've probably seen them in a lot of places, one common use is for example to list e-mails in a webmail inbox, or to list members on community sites or forums, etc. Let's look at a quick example of how a table might look, in this case containing information about a few fruits and their colors:



Here is the source code for the above table (all other HTML omitted):

<table border="1">
  <tr>
    <td>Bananas</td>
    <td>Yellow</td>
  </tr>
  <tr>
    <td>Pears</td>
    <td>Green</td>
  </tr>
  <tr>
    <td>Apples</td>
    <td>Red or green</td>
  </tr>
</table>

Just like in the previous chapter about lists we now again have a big element (the table) which is composed of several smaller elements, except this time it's two "layers" deep. A table is made up of cells, and they are arranged in horizontal rows. The tags you see above mean the following:

  • The <table> tag tells the browser to start building a new table. I have also added one additional attribute to it called border="1", this sets the thickness of any border around the table and it's only there because without it (or if it were set to zero) we would simply not get a border at all and only the names of the fruits and colors would be visible. Sometimes you might want this effect, but for this tutorial it would make a poor visual example.

  • The <tr> tag is for starting a new row of cells. Note that each row of the table is represented by a new <tr></tr> block in the code.

  • Finally, the <td> tag is for the individual table cells that contain the data.




Now obviously, the table above is quite an ugly little thing and tables can certainly get a lot more elaborate and fancier than that. There is even a lot more optional table tags you can use - you can split the table up into a header (where you put labels such as "fruit" and "color") with the <thead> tag, you can have a footer tag in much the same way but at the bottom of the table with a <tfoot> block, and the body inbetween is then put in a <tbody> block, etc.

There is also a whole lot of properties you can use to set widths, heights, text alignment and colors etc for your cells, but we're not going to go into all of that here as this tutorial is only meant to introduce you to the basics of XHTML code. If you want to delve more deeply into all the things you can do with tables, I again have to recommend googling about them.





A brief history lesson: Table page layouts

Even though this is something that is currently in widespread use on the internet (admittedly there are still pages around that I've built myself that use it, too) recommended in many older tutorials still and even generated by some webdesign software, I've referenced it as a thing of the past because it really ought to be. What I'm talking about is table based website design.

The thing about tables is, they can easily be used to build a sort of "box model" to divide a square area up into many smaller squares. In the earlier days of the web, this made it particularly well suited for layouting web pages because you could split the whole page up into (compared to other methods available at the time) conveniently manageble cells.

However, since those days we have gotten a new and quite excellent method for styling the content of web pages called CSS, or Cascading Style Sheets, and even though you could still apply CSS properties to a table-based design, the by far superior way of doing things is by splitting your page layout up into divisional (<div>) elements instead and referencing those in the CSS.

The main reason for why you should avoid tables for page design is in my opinion that you get a very rigid and unflexible code structure that might work fine as-is, but if it ever has to be redesigned in the future or have individual parts of it moved around, resized or otherwise changed, it's going to become a monumental pain in the rear to work with.

Besides that part, tables also generate way, way more unnecessary code to achieve the same result compared to CSS and <div>'s. This makes your code uglier and harder to decipher for other human eyes, not to mention slower to download and potentially worse for search engine indexing as well.

Tables were originally intended, and are supposed to still be, a method for displaying data in a neat table format. If someone or something tells you to use them for anything other than that, I strongly recommend walking the other way :o)





More chapters are on their way but they are unfortunately not finished yet.

< Previous: Lists

robert@eagleowl.se     +46 (0)26-16 13 61     www.eagleowl.se
©2021 EagleOwl