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.
The @ sign on the 33 Teletype keyboard which Ray Tomlinson used to invent the email system was located on alphabet "P" key. One had to use shift to type it. [more...]