HTML table tutorial - Tables part 1

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>

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>

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>

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.