Tables tutorial in HTML - HTML Tables part 2

Now that you have understood the basic tags that comprise a HTML table let us look at some of their important attributes.

Attributes of <TABLE>

• ALIGN: Takes LEFT, RIGHT or CENTER as value and aligns the table with respect to surrounding information. If the table is aligned to the right, any text or information will be aligned to the left of the table.
• BACKGROUND: The value of this attribute has to be an image URL. This image is displayed as the background of the table. If the table is larger, the image is tiled.
• BGCOLOR: Specifies the background color, hexadecimal color codes or color names accepted.
• BORDER: We have already met this attribute in the previous section. It makes a border around the table. The thickness of this border depends on the number in pixels supplied as its value.
• BORDERCOLOR: Table borders can be colored using this attribute. It takes hexadecimal color code or color name as value.
• BORDERCOLORDARK and BORDERCOLORLIGHT: Works only with Internet Explorer. The default rendering of table borders is in 3D. If you don't want this, you can specify the same color in BORDERCOLORDARK and BORDERCOLORLIGHT attributes. For such cases, BORDERCOLOR attribute should also be used with that color value so that the table display looks similar in Netscape and Internet Explorer.
• CELLPADDING: Its value, supplied as number of pixels, denotes the amount of space between the edge of the table and its contents.
• CELLSPACING: This attribute sets the width in pixels between the individual table cells.
• FRAME: Its value determines the display of a frame around the table. The default value is BORDER or BOX which indicates that the table should have a frame (This works only when the BORDER attribute has a positive value). A value of ABOVE makes a frame only at the top of the table. BELOW makes only at the bottom. HSIDES and VSIDES make horizontal and vertical edges, respectively. RHS specifies only the right edge to be displayed and LHS only the left edges.
• HEIGHT: Specifies the table height. The value has to be in pixels. (Percentage values are supported by Internet Explorer only).
• WIDTH: determines the table width. Its value can be in pixels and results in a fixed table size or in percentages where the table width changes depending on the size of browser window.

Phew!

Attributes of <TD> Tag

• ALIGN: Its value can be CENTER, LEFT, RIGHT or JUSTIFY, which determine how cell contents are aligned.
• VALIGN: Aligns the contents to the TOP, MIDDLE or BOTTOM of the cell.
• BGCOLOR: Specifies background color, hexadecimal color code or color name.
• BORDERCOLOR, BORDERCOLORDARK and BORDERCOLORLIGHT: Determines bordercolors; the last two are specific to Internet Explorer.
• COLSPAN and ROWSPAN: Value has to be a number. The attributes are explained along with examples in the following sections... hold on.
• HEIGHT and WIDTH: specify dimensions in pixels.

Attributes of <TR> Tag

• ALIGN: Its value can be CENTER, LEFT, RIGHT or JUSTIFY, which aligns the content.
• BGCOLOR: Similar to TD, above.
• BORDERCOLOR: Similar to TD, above.
• BORDERCOLORDARK and BORDERCOLORLIGHT: Similar to TD, above.

Okay, enough theory, here are a few examples.

We will make a single row table with 2 cells. We shall put a background color to add spice to an otherwise drab table.

<TABLE BORDER="3" BGCOLOR="#00CC00">
<TR>
<TD>Cell 1</TD>
<TD>Cell 2</TD>
</TR>
</TABLE>

The BGCOLOR attribute in <TABLE> defines a background green color.

What if we wanted to put a different background color in these cells? For this, we use the BGCOLOR attribute of the <TD> tag.

<TABLE BORDER="3">
<TR>
<TD BGCOLOR="#FF0000">Cell 1</TD>
<TD BGCOLOR="#0000FF">Cell 2</TD>
</TR>
</TABLE>

The first cell has a red background while the second has blue. If you use a background color for the table as a whole (specified by its BGCOLOR attribute) its value will be overridden by the BGCOLOR of <TD>.

Table cell contents need not be text. They can be images and other multimedia files. Let us work on the width and border of the table and try our hands at aligning cell contents.

<TABLE WIDTH="400" BORDER="2" BORDERCOLOR="#000000" 
BORDERCOLORDARK="#000000" BORDERCOLORLIGHT="#000000">

<TR>

<TD ALIGN="LEFT"><IMG SRC="apple1.gif" WIDTH="32" 
HEIGHT="32" ALT="Full Apple"></TD>

<TD ALIGN="CENTER"><IMG SRC="apple2.gif" WIDTH="32" 
HEIGHT="32" ALT="Bite taken"></TD>

<TD ALIGN="RIGHT"><IMG SRC="apple3.gif" WIDTH="32" 
HEIGHT="32" ALT="Nothing left"></TD>

</TR>

</TABLE>

The default value for CELLSPACING is 2, if we make this as 0, our table borders look neater. Don't you think? (See below)

<TABLE WIDTH="400" BORDER="2" BORDERCOLOR="#000000"
CELLSPACING="0" BORDERCOLORDARK="#000000"
BORDERCOLORLIGHT="#000000">

--- The rest of the code same as above --

</TABLE>

BORDERCOLOR, BORDERCOLORDARK, and BORDERCOLORLIGHT are supported well only by Internet Explorer. We should not use them, if we want our pages to look similar in all browsers.

Setting the BORDER value to 0, we can create an invisible table. The table below has been centrally aligned by placing it inside a <DIV> tag (<DIV align="center">)

<DIV ALIGN="CENTER">
<TABLE WIDTH="400" BORDER="0">

<TR>

<TD ALIGN="LEFT"><IMG SRC="apple1.gif" WIDTH="32" 
HEIGHT="32" ALT="Full Apple"><BR>I'm hungry</TD>

<TD ALIGN="CENTER"><IMG SRC="apple2.gif" WIDTH="32" 
HEIGHT="32" ALT="Bite taken"><BR>Yum!</TD>

<TD ALIGN="RIGHT"><IMG SRC="apple3.gif" WIDTH="32" 
HEIGHT="32" ALT="Nothing left"><BR>Burp!</TD>

</TR>

</TABLE>
</DIV>

I'm hungry

Yum!

Burp!

Now play with the code:
To check the result, click on the "Display" button. Another browser window pops up with the results. Modify the code in the box and check the results again. Get a good feel of this before proceeding to the next section.