8.0 HTML, Table Tags and Properties

<TABLE>...</TABLE>

ALIGN=Option | (LEFT | CENTER | RIGHT)

BACKGROUND=Document | BGCOLOR=Color | BORDER=Value

BORDERCOLOR=Color | BORDERCOLORDARK=Color| BORDERCOLORLIGHT=Color

CELLPADDING=Value | CELLSPACING= Value

FRAME=Option | (ABOVE | BELOW | BOX | HSIDES | LHS | RHS | VOID | VSIDE)

WIDTH=Value | HEIGHT= Value

RULES=Option | (ALL | COLS | NONE | ROWS)


This tag marks the beginning and the end of a table. Many properties can be used with this tag, ensuring the ability to create the exact table format that you desire. In the following HTML examples many of these properties will be used, and their effects will be portrayed.

HTML Example

<TABLE ALIGN = CENTER BORDER=Value BGCOLOR=Color WIDTH=250 Height=150 BORDERCOLOR=Color>

<TR>

<TD>...</TD>

</TR>

</TABLE>

Browser Output

BORDER = 4 BORDERCOLOR = #A9A9A9 BGCOLOR = #FFE4E1

BORDER = 8 BORDERCOLOR = #4F2F4F BGCOLOR = #FFE4E1

HTML Example

<TABLE ALIGN = CENTER BORDER=10 BGCOLOR=#FFE4E1 WIDTH=250 Height=150 BORDERCOLORDARK=#4F2F4F BORDERCOLORLIGHT=#A9A9A9>

<TR>

<TD>...</TD>

</TR>

</TABLE>

Browser Output

HTML Example

<TABLE ALIGN = CENTER BORDER=4 BGCOLOR=#FFE4E1 WIDTH=100 Height=40 BORDERCOLOR=#4F2F4F FRAME=Option | ( BOX | HSIDES | VSIDE | VOID)>

<TR>

<TD>...</TD>

</TR>

</TABLE>

Browser Output

FRAME=BOX

FRAME=HSIDES

FRAME=VSIDES

FRAME=VOID

HTML Example

<TABLE ALIGN = CENTER BORDER=4 BGCOLOR=#FFE4E1 WIDTH=100 Height=40 BORDERCOLOR=#4F2F4F FRAME=Option | ( ABOVE | BELOW | LHS | RHS)>

<TR>

<TD>...</TD>

</TR>

</TABLE>

Browser Output

FRAME=ABOVE

FRAME=BELOW

FRAME=LHS

FRAME=RHS

HTML Example

<TABLE ALIGN = CENTER BORDER=4 BGCOLOR=#FFE4E1 WIDTH=250 Height=150 BORDERCOLOR=#545454 RULS=Option | ( ALL | COLS | NONE | ROWS)>

<TR>

<TD>ONE</TD>

<TD>TWO</TD>

</TR>

<TR>

<TD>THREE</TD>

<TD>FOUR</TD>

</TR>

</TABLE>

Browser Output

RULES=ALL

ONE TWO
THREE FOUR

RULES=NONE

ONE TWO
THREE FOUR

HTML Example

<TABLE ALIGN = CENTER BORDER=4 BGCOLOR=#FFE4E1 WIDTH=250 Height=150 BORDERCOLOR=#545454 CELLSPACING=Value (space between cell text and the cell border in pixels) CELLPADDING=Value (space between table cells in pixels >

<TR>

<TD>ONE</TD>

<TD>TWO</TD>

</TR>

<TR>

<TD>THREE</TD>

<TD>FOUR</TD>

</TR>

</TABLE>

Browser Output

CELLSPACING=0 CELLPADING=10

ONE TWO
THREE FOUR

CELLSPACING=10 CELLPADING=0

ONE TWO
THREE FOUR

HTML Example

<TABLE ALIGN = CENTER BORDER=4 BACKGROUND="singin_rain.jpg" WIDTH=250 Height=150 BORDERCOLOR=#545454>

<TD>

<TR>...</TR>

</TD>

</TABLE>

Browser Output

              Previous Section                   Table Of Contents



<CAPTION>...</CAPTION>

ALIGN=Option | (LEFT | RIGHT | CENTER | TOP | BOTTOM)

VALIGN=Option | (TOP | BOTTOM)


The <CAPTION> tag encloses the table caption. You can specify the alignment of the caption by using the ALIGN property. You can also specify the vertical alignment of the caption with respect to the table by using the VALIGN property.

HTML Example

<TABLE ALIGN = CENTER BORDER=4 BGCOLOR=#FFE4E1 WIDTH=250 Height=150 BORDERCOLOR=#545454 FRAME=BOX>

<CAPTION ALIGN=Option VALIGN=Option >...text...</CAPTION>

<TR>

<TD>...</TD>

</TR>

</TABLE>

Browser Output

VALIGN=TOP

VALIGN=BOTTOM

ALIGN=RIGHT

ALIGN=LEFT
              Previous Section                   Table Of Contents



<TR>...</TR>

ALIGN=Option | (LEFT | RIGHT | CENTER)

BGCOLOR=Color

BORDERCOLOR=Color | BORDERCOLORDARK=Color | BORDERCOLORLIGHT=Color

VALIGN=Option | (TOP | MIDDLE | BOTTOM)

ALIGN=Option | (LEFT | RIGHT | CENTER)


The <TR> tag encloses table cells that are in a single row. The ALIGN and VALIGN properties enables you to vertically and horisontaly align the text in a given row. The other properties can be used to specify the border and the background colors.

HTML Example

<TABLE ALIGN = CENTER BORDER=4 BGCOLOR=#FFE4E1 WIDTH=250 Height=150 BORDERCOLOR=#545454 RULS=ALL>

<TR BGCOLOR=WHITE BORDERCOLOR=#DB7093 ALIGN=CENTER VALIGN=BOTTOM>

<TD>ONE</TD>

<TD>TWO</TD>

</TR>

</TABLE>

Browser Output

ONE TWO
THREE FOUR
FIVE SIX
              Previous Section                   Table Of Contents



<TD>...</TD>

ALIGN=Option | (LEFT | RIGHT | CENTER)

VALIGN=Option | (TOP | MIDDLE | BOTTOM)

BACKGROUND=Document | BGCOLOR=Color | BORDERCOLOR=Color

BORDERCOLORDARK=Color | BORDERCOLORLIGHT=Color

COLSPAN=Value | ROWSPAN=Value

HEIGHT=Value | WIDTH=Value | NOWRAP


The <TD> tag encloses the text that will appear in an individual table cell. This tag has many properties, the ALIGN and VALIGN properties specify the horizontal and vertical alignment of cell text. The background and border colors can be specified by using their properties. COLSPAN and ROWSPAN specify the number of either columns or rows the cell should span. The WIDTH and HEIGHT properties allows you to specify the exact width or height of the cell in pixels or as a percentage. the NOWRAP property prohibits the browser from wrapping text in the cell

HTML Example

<TABLE ALIGN = CENTER BORDER=4 BGCOLOR=#FFE4E1 WIDTH=250 Height=150 BORDERCOLOR=#545454 RULS=ALL>

<TR>

<TD COLSPAN=2 BGCOLOR=WHITE BORDERCOLOR=#DB7093 ALIGN=CENTER VALIGN=TOP >ONE</TD>

<TD ROWSPAN=5 BGCOLOR=WHITE BORDERCOLOR=#00FF00 ALIGN=CENTER VALIGN=MIDDLE>TWO</TD>

</TR>

</TABLE>

Browser Output

ONE TWO
THREE FOUR
FIVE SIX
              Previous Section                   Table Of Contents



<TH>...</TH>

ALIGN=Option | (LEFT | RIGHT | CENTER)

VALIGN=Option | (TOP | BOTTOM | MIDDLE)

BACKGROUND=Document | BGCOLOR=Color | BORDERCOLOR=Color

BORDERCOLORDARK=Color | BORDERCOLORLIGHT=Color

COLSPAN=Value | ROWSPAN=Value

HEIGHT=Value | WIDTH=Value | NOWRAP


The <TH> tag encloses the text that will appear in an individual table header cell. Many characteristics can be specified for the header cell such as the alignment of it's text, both the background color and the border color, the number of columns and rows the header cell should span, and the height and the width of the header cell.

HTML Example

<TABLE ALIGN = CENTER BORDER=4 BGCOLOR=#FFE4E1 WIDTH=250 Height=150 BORDERCOLOR=#545454 RULS=ALL>

<TR>

<TH COLSPAN=2 BGCOLOR=WHITE BORDERCOLOR=#DB7093 ALIGN=CENTER VALIGN=MIDDLE >THIS IS THE HEADER</TH>

</TR>

</TABLE>

Browser Output

THIS IS THE HEADER
THREE FOUR
FIVE SIX
              Previous Section                   Table Of Contents



<TFOOT>...</TFOOT>

HALIGN=Option | (LEFT | RIGHT | CENTER)

VALIGN=Option | (TOP | BOTTOM | MIDDLE)


The <TFOOT> tag encloses footer information that will show in the table footer when the table is printed on multiple pages.

HTML Example

<TABLE>

<TFOOT HALIGN = CENTER VALIGN=BOTTM> THIS IS THE TABLE FOOTER<TFOOT>

<TR>

</TR>

</TABLE>

Browser Output

N/A

              Previous Section                   Table Of Contents