WebDevelopersNotes logo

home-icon Home / HTML / HTML table tutorial – Tables part 1

HTML table tutorial – Tables part 1

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>
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.

Sponsored Links

Your comments
Star icon IMPORTANT Have a question / problem? Click here to ask an expert.

Etch-A-Sketch iPad case

Sponsored Links

Tips

How do I view a deleted web page?
Is there a way to view a deleted web page - one that is no longer available? Yes there is and the solution is quite simple. [more...]

Fact

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...]