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 |
HTML tables – Important points
- The opening and closing table tags are <TABLE> and </TABLE>.
- A table consists of many rows each of which begins with <TR> and ends with </TR>. The table above consists of only one row.
- Each row can contain one or more cells. The <TD> and </TD> tags denote a table cell. The table information (text, graphics etc.) are contained inside the table cells. The above table has one one cell.
- The contents of this table cell “Simple table” are placed inside the table cell tags.
- So, even if you have to make only one cell, you have to write this entire code.
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.
