114 - TABLE
Attributes of the Tag <TR>: ALIGN, VALIGN and BGCOLOR
<P> <BODY BACKGROUND="BGWite.jpg">
<CENTER>
<P> <B> ATtRIBUTES OF THE TAG TR </B>
(TR) VALIGN: Vertical alignment of the text in all cells in
(TR) BGCOLOR: Background color of all cells in the same row except
<BR> ALIGN, VALIGN and BGCOLOR
<!-------------------------------------Description of the Attributes
(TR) ALIGN: Horizontal alignment of the text in all cells in
the same row except the cells differently specified by (TD) ALIGN.
(TD) ALIGN affects only the cell in which it was specified.
Values for the attribute ALIGN are: Left, Right and Center.
the same row except the cells differently specified by (TD) VALIGN.
(TD) VALIGN affects only the cell in which it was specified.
Values for the attribute VALIGN are: Top, Bottom and Middle.
the cells differently specified by (TD) BGCOLOR that affects only
the cell in which it was specified.
------------------------------------------------------------>
<P>
<!---------------------------- EXAMPLE TABLE FOR (TR) ATTRIBUTES -->
<TABLE BORDER=1 WIDTH=200 HEIGHT=100 BGCOLOR=Lime>
<!------------------------------------Background Colors
Possible colors with words:
White, Aqua, Fuchsia, Blue, Yellow, Lime, Red, Silver
Gray, Teal, Purple, Navy, Olive, Green, Maroon, Black
---------------------------------------------------------------->
<TR>
<!-- No TR attributes: this row assumes the color of the table that is
Lime -->
<TD>
R1 C1
</TD>
<TD>
R1 C2
</TD>
<TD>
R1 C3
</TD>
</TR>
<TR BGCOLOR=Aqua>
<!--This row assumes the specified color: Aqua -->
<TD>
R2 C1
</TD>
<TD>
R2 C2
</TD>
<TD>
R2 C3
</TD>
</TR>
<TR ALIGN=Center VALIGN=Top BGCOLOR=Yellow>
<!--In this row the text is centered, in the top and has a yellow background -->
<TD>
R3 C1
</TD>
<TD>
R3 C2
</TD>
<TD>
R3 C3
</TD>
</TR>
</TABLE>
</CENTER>
</BODY>
</HTML>
How to test the home page above:
[1] Copy the codes from <HTML> to </HTML> into a new file
using the Windows Notepad or a HTML editor.
[2] Save the file with whichever name but with the extension .htm or
.html in a computer folder (suggested name for the folder:
BasicHTML) specially created for holding this course test files.
Suggestion for the name of the file: AATestXXX.htm
where XXX is the number at the top of this screen. The double "A"
will put the file name at the top of the list in the folder, making
it easier to locate.
[3] Open the file by means of any browser to get the following
home page, supposing it has been made the download of the file
BGWite.jpg as required in the
Lesson 104:
Note the following remarks:
The closure of the tags with </name of the tag> is essential in designing tables. Small tables without the tags </TR> and </TD> may even be displayed (seemingly) right by means of a certain browser but, it will be displayed deformed in other browsers.
It is common in designing a table to start with a simple one that will gradually become more complex. Therefore it is quite important to keep all tags closed with </name of the tag> and maintain the programming sheet well organized so that it may be compatible with the expected layout to be displayed through most popular browsers. Otherwise further maintenace may become a hellish experience.
One of the most forgotten tag to be closed is the tag <TABLE> itself in large tables, because the tag </TABLE> remains far too low in the programming sheet. In this case, messy texts are displayed with no resemblance to a table.
To acquire discipline in editing down a programming sheet it is quite important, from the beginning, to master the habit of keeping horizontal indentations, vertical spacing, short comments and delimiting comments of important areas (Ex: <!--HERE STARTS TABLE "SO AND SO" -->) in upper cases and well to the right to avoid mixing it with the table tags and texts, so being more easily found.
The values of the attribute BGCOLOR may also be specified in hexadecimal codes found in HTML books or directly edited through a HTML editor.
Updated Aug/2000 by
