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>
| Simple 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.
Now play with the code:
To check the result, click on the "Display" button. Another browser window pops up with the results. Modify the code in the box and check the results again. Get a good feel of this before proceeding to the next section.
Page contents: Html table tutorial, online free html table tutorial, tables in html tutorial online free, html table course guide
Comments, questions, feedback... whatever!