== 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.
Articles Source - Free Articles
