CATEGORIES

YOUR FIRST HTML PAGE - V 
By Amrit Hallan


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.

== Step 8: ==

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 <!-- 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 --> <TABLE WIDTH="100%" BORDER="1">

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

<!-- Column --> <TD WIDTH="100%" ALIGN="center">

<FONT COLOR="white">My Marks</FONT>

</TD> <!-- Column ends -->

</TR> <!-- Row ends -->

</TABLE> <!-- The title table ends -->

<!-- The rest of the table starts here --> <TABLE WIDTH="100%" BORDER="1">

<!-- First row --> <TR BGCOLOR="silver">

<!-- First column --> <TD WIDTH="25%"> </TD> <!-- First column ends -->

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

<!-- And so on... -->

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

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

</TR>

<TR BGCOLOR="white">

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

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

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

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

</TR>

<TR BGCOLOR="white">

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

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

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

<TD WIDTH="25%" ALIGN="center"> <FONT COLOR="black">65%</FONT> </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.


About the Author
Amrit Hallan is a freelance web designer. For all web site development and web promotion needs, you can get in touch with him at http://www.bytesworth.com. For more such articles, visit http://www.bytesworth.com/articles and http://www.bytesworth.com/learn You can subscribe to his newsletter [BYTESWORTH REACHOUT] on Web Designing Tips & Tricks by sending a blank email at Bytesworth-subscribe@topica.com 

 

 


FEATURED TEMPLATES