The <TABLE> tag was introduced for displaying content in a tabular format. However, web developers soon discovered a hidden gem. They started utilizing this tag for page layout, placing various objects in table cells to achieve a holistic page design.
There were other developers who scorned at this ‘abuse of HTML tags’, arguing that <TABLE> was never intended for this purpose. But the technique was taken up by designers so well and implemented so fast across web sites that it became a sort of standard method for page layout.
The cross browser compatibility of Cascading Style Sheets (whenever that happens) will provide a powerful tool for page layout and design and might degrade this unconventional use of <TABLE>.
Let us look at some examples:
The code of a very simple table is presented below along with its display in a browser:
<TABLE BORDER="1"> <TR> <TD>Simple table</TD> </TR> </TABLE>
Now, lets increase the cell number. The table below has three cells.
<TABLE BORDER="1"> <TR> <TD>Cell 1</TD> <TD>Cell 2</TD> <TD>Cell 3</TD> </TR> </TABLE>
|Cell 1||Cell 2||Cell 3|
Each cell should start with <TD> and end with </TD>. The contents of the cell are placed between these tags. The three cells themselves are placed in a single row (one pair of <TR> – </TR>).
Now, we add one more row to this table
<TABLE BORDER="1"> <TR> <TD>Row 1, Cell 1</TD> <TD>Row 1, Cell 2</TD> <TD>Row 1, Cell 3</TD> </TR> <TR> <TD>Row 2, Cell 1</TD> <TD>Row 2, Cell 2</TD> <TD>Row 2, Cell 3</TD> </TR> </TABLE>
|Row 1, Cell 1||Row 1, Cell 2||Row 1, Cell 3|
|Row 2, Cell 1||Row 2, Cell 2||Row 2, Cell 3|
Addition of a row requires another set of <TR> – </TR> tags.
If this is not very clear, go through it once again and then proceed to the next session.
Ed Krol's book, "The Whole Internet User's Guide & Catalog", was probably the first popular book about the new medium. It was published in 1992 and selected by the New York Public Library as one of the most significant books of the 20th century. [more...]