Tables tags are an integral part of HTML and we stress how important it is to get a thorough grounding in them. There is a magic formula that enables you to write successful cross-browser tables right from the beginning and this tutorial teaches you the principles and techniques behind this magic formula.
A Necessary Skill
Learning to create tables correctly is a very necessary skill if you want to create successful cross-browser web pages. Yet many people who are learning HTML stumble at this particular hurdle because their tables won’t work at all or they will appear to work in one browser but behave differently in another browser.
There are usually two primary reasons for this problem. The first reason is that they haven’t grasped the principle of how an HTML table operates, even though they have learn some of the HTML table tags syntax. The second reason is that they haven’t learn how to write their HTML script in a structured manner and their script is difficult or impossible to understand. You see this all too often on the Web and I am sure that my tables wouldn’t work under these circumstances.
So lets move forward and begin the tutorial. We will be working towards creating a simple table of nine cells, arranged in a matrix of three rows down by three cells across. The principles that you learn in this tutorial should be applied to every table you ever write in the future, no matter how complex that table might be. There are no exceptions..
Basic Table Tags
Although there are other tags associated with HTML tables we are going to concentrate on three basic tags. You should consider them as the basic building blocks of a table and they are listed here.
- <table></table> The table start tag and table end tag which creates a table.
- <tr></tr> The table row start tag and table row end tag which creates a table row.
- <td></td> The table data start tag and table data end tag which creates a table data cell.
We have deliberately listed the start and end tags in this pedestrian fashion to establish the importance we place on using closing tags, if only to enable you to understand each different section of the table in your script, both now and in the future. Closing tags are a part of the HTML 3.2 specification.
A One Row Table
If you studied the graphic at the start of this tutorial you will remember that it states that the Cardinal Rule is that tables are made up of rows not columns. Bearing this in mind we will now create a simple table with one row down and three cells across.
the table …
| Cell 1 | Cell 2 | Cell 3 |
the script …
| <table> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> </tr> </table> |
Don’t be frightened to use line feeds (carriage returns) in your scripts. They separate different sections of your script and make it more readable and understandable. White space costs nothing and is worth a great deal. Also, don’t be worried if some of the lines of script appear a little short at the moment. That’s fine because it is far better to have short structured lines rather than long lines that are not structured and are difficult to understand.
It is a good general rule with tables that if your script is UN-structured and chigger-piggeldy then your tables will almost certainly be the same, whereas if your script is structured, neat and understandable then your tables are likely to ‘work’ correctly in all cases.
A Three Row Table
If there is a lesson that you should learn from this tutorial it is that rows should be separately sectioned within your table script and to demonstrate this we will now create another simple table, this time with three rows down and three cells across.
the table …
| Cell 1 | Cell 2 | Cell 3 |
| Cell 1 | Cell 2 | Cell 3 |
| Cell 1 | Cell 2 | Cell 3 |
the script …
| <table> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> </tr> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> </tr> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> </tr> </table> |
If you study the table script above you will see that it has been created in five distinct sections. These are the table start, the three distinct table rows and the table finish. This is the magic formula for writing successful cross-browser tables that work correctly under all circumstances and if your table scripts look like the one above then you are well on your way to creating successful cross-browser tables.
