///HTML Tables

HTML Tables

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">
The information you want to show off about.

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 <!– and –> 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:

<!– The title table –>

<!– The row begins here –>
<TR BGCOLOR="black">

<!– Column –>
<TD WIDTH="100%" ALIGN="center"> <P><FONT COLOR="white"><B>My Marks</B></FONT></P> </TD>
<!– Column ends –>

<!– Row ends –>

<!– The title table ends –>

<!– The rest of the table starts here –>

<!– First row –>
<TR BGCOLOR="silver">
<!– First column –>
<TD WIDTH="25%"> </TD>
<!– First column ends –>

<!– Second column –>
<TD WIDTH="25%" ALIGN="center"> <FONT COLOR="black"><B>English</B></FONT> </TD>
<!– Second column ends –>

<!– And so on… –>

<TD WIDTH="25%" ALIGN="center"> <FONT COLOR="black"><B>Mathematics</B></FONT> </TD>

<TD WIDTH="25%" ALIGN="center"> <FONT COLOR="black"><B>Philosophy</B></FONT> </TD>


<TR BGCOLOR="white">

<TD WIDTH="25%"> <FONT COLOR="black"><B>SEM1</B></FONT> </TD>

<TD WIDTH="25%" ALIGN="center"> <FONT COLOR="black"><B>72%</B></FONT> </TD>

<TD WIDTH="25%" ALIGN="center"> <FONT COLOR="black"><B>82%</B></FONT> </TD>

<TD WIDTH="25%" ALIGN="center"> <FONT COLOR="black"><B>60%</B></FONT> </TD>


<TR BGCOLOR="white">

<TD WIDTH="25%"> <FONT COLOR="black"><B>SEM2</B></FONT> </TD>

<TD WIDTH="25%" ALIGN="center"> <FONT COLOR="black"><B>75%</B></FONT> </TD>

<TD WIDTH="25%" ALIGN="center"> <FONT COLOR="black"><B>78%</B></FONT> </TD>

<TD WIDTH="25%" ALIGN="center"> <FONT COLOR="black"><B>65%</B></FONT> </TD>



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.

2010-05-26T11:01:26+00:00 June 1st, 2005|HTML|0 Comments

About the Author:

Amrit Hallan is a freelance web developer. You can checkout his website at http://www.bytesworth.com. For more such articles join BYTESWORTH REACHOUT at http://www.bytesworth.com/br/default.asp or if you have a web dev related question then post it at http://www.business180.com/index.php

Leave A Comment