HTML Tables

By Amrit Hallan
2005-06-01

HTML Tables

Tables are used to display information in an orderly manner. Incidentally, here we are not talking furniture. A table means tabular representation of certain data on your computer screen or in printed form.

Ideally, a table consists of rows and columns. Mathematically, every table has at least one row, and at least one column.

In an empty square box, even if you don't see multiple vertical and horizontal lines, there is at least one row and at least one column.

So when we are defining a table, there are three tags that are deeply involved in the entire tabular configuration. The chief tag <TABLE> </TABLE> kindles the initiation. Then we have the child tag, namely, <TR> </TR> which brings on the row, and the last, but not the least, we have a grandchild tag here, <TD> </TD> which originates a column.

The legal sequence of these three tags goes like this:

<TABLE WIDTH="n%" BGCOLOR="some color" BORDER="n">
<TR>
<TD>
The information you want to show off about.
</TD>
</TR>
</TABLE>

Where n can be any positive number. Within every <TABLE> </TABLE>, there can be n numbers of <TR> </TR>, and within every <TR> </TR>, there can be n numbers of <TD> </TD>. Then you can have nested tables. For instance, within a single cell of nth row and mth column, you can have more tables.

Note: If the upper row has a single column, and the preceding one has multiple columns, its better to define the single-columned row in a separate table.

Let's promenade through a day-to-day example. Let us create a tiny table displaying your marks in English, Mathematics and Philosophy, in two semesters and see how it fairs on your upcoming web page. Don't get intimidated by so many tags and their attributes - once you are able to create and apprehend the architecture of one table, you'll be able to create any kind of table.

Note: Within  we can insert comments so that we can keep account of complex HTML coding. Literally, you insert the comments like this - Less-than sign, exclamation mark, dash dash, space, you comment, space, dash dash, greater-than sign.

The code:

<TABLE WIDTH="100%" BORDER="1">


<TR BGCOLOR="black">


<TD WIDTH="100%" ALIGN="center"> My Marks </TD>


</TR>


</TABLE>



<TABLE WIDTH="100%" BORDER="1">


<TR BGCOLOR="silver">

<TD WIDTH="25%"> </TD>



<TD WIDTH="25%" ALIGN="center"> English </TD>




<TD WIDTH="25%" ALIGN="center"> Mathematics </TD>

<TD WIDTH="25%" ALIGN="center"> Philosophy </TD>

</TR>

<TR BGCOLOR="white">

<TD WIDTH="25%"> SEM1 </TD>

<TD WIDTH="25%" ALIGN="center"> 72% </TD>

<TD WIDTH="25%" ALIGN="center"> 82% </TD>

<TD WIDTH="25%" ALIGN="center"> 60% </TD>

</TR>

<TR BGCOLOR="white">

<TD WIDTH="25%"> SEM2 </TD>

<TD WIDTH="25%" ALIGN="center"> 75% </TD>

<TD WIDTH="25%" ALIGN="center"> 78% </TD>

<TD WIDTH="25%" ALIGN="center"> 65% </TD>

</TR>

</TABLE>

If you want to discern what these lines do, save, and refresh your page.

WIDTH="100%" means a particular table should cover the entire width of your computer screen, and a particular column should cover the entire width of the table containing it. <TD WIDTH="25%"> means the column is covering only 25% space of the stipulated table.

This raps up the table business. Make as many tables as you can as an exercise. The next section tells you something about the Style sheets and Server Side Includes.

Tutorial Pages:
» HTML Tables

| Write For Us

Related Tutorials:
» Enrich Your Web Applications
» Microsoft Complicates HTML Emails With Outlook 2007
» Testing Your Forms for Hijacking Vulnerability
» Control Your Domain Registration Data
» HTML Forms POST, GET
» Navigation Bar and Bulleted Lists