Building Tables

In this article I am going to be writing about how to create a table using HTML. However before I go into the finer details of how to build a table, I feel I must mention what table are good for, what they can be used for and why they are not necessarily the best for this purpose.

A table is a great way of displaying tabula data (spreadsheets, databases and any other format of facts and figures, Frequently Asked Questions etc). This is what they were originally built for. However in the early 90's they were used to layout a website, At the time this was the only way to do such a thing and guarantee you would have support in a web browser. However if you was to go on any web developers forum, and mention you are building a website using tables, you can expect to be laughed all the way off the cliff into oblivion - but why will they do this? Tables are typically a very messy way to code up a website design, and in an age where page load speed is one of the key metrics for a website, adding in a lot of messy code wastes valuable time in transferring data across the internet - however this isnt the primary reasons Tables are hated by web developers. Ask a lot of designers and they will go on about the page structure being defined to rigidly, slowing any design changes they may need to make in the future and thus bumping up costs for changes- Do you think this is the true reason - a true concern for a clients bank balance? I sincerly doubt this to be the fact as those bigger bills mean that they can earn more money. Is it because the rigidity of the page layout prevents changes being made with ease, taking only 20 minutes to make a simple change on a CSS based design, would be hard to estimate on a table based design without checking things over before a quote... Possibly. However I believe the true reason modern web developers do not like tables, is becuase they are inherently lazy.

Yes I am calling modern web designers lazy. A web designer is always looking to make the absolutely minimal amount of work on a website to allow them to charge as many 1 hour minimum charges for 20 minutes work as possible!, this means he can do whatever he likes for 2 hours - potentially making more money in an hour or simply take it easy and read the news!

So Lets work on a basic table with two columns and three rows- I will leave the layout design for another article.

Now if you look at the table, the header is bold and the other cells (each area with text in is a cell) This is because we have used the <th> tag instead of <td> to create the header row.

<table>
<tr>
<th>Odd</th><th></th>
</tr>
<tr>
<td>1</td><td>2</td>
</tr>
<tr>
<td>3</td><t4>2</td>
</tr>
</table>

Now looking at the table, lets break the code down into what it is:

<table> --> This tag instructs the web browser we are requesting a table to be drawn
<tr> --> This commands us to draw a row on the table
<th> --> This commands us to draw a Table header, which are bold and centered for display.
<td> --> A table data cell - allows any HTML you want in there