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.

Web designer vs. web developer

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

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