Html table tutorial, online free html table tutorial, tables in html tutorial online free, html table course guide
html table tutorial, online free html table tutorial, tables in html tutorial online free, html table course guide

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

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.


Online Workspace

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.


Back Next


AddThis Social Bookmark Button
Page contents: Html table tutorial, online free html table tutorial, tables in html tutorial online free, html table course guide

Page URL: http://www.webdevelopersnotes.com/tutorials/adhtml/ html_table_tutorial_tables_part_1.php3



Join Mailing List


Feedback/Questions




50+ web hosting FAQs

Search engine for your website

Free software from Google - The Google Pack Collection

Create your own search engine
Search WebDevelopersNotes.com