Tables are defined using the TABLE tag as follows:<TABLE BGCOLOR="#BDB76B" HEIGHT="100" WIDTH="80%" BORDER=1 HSPACE=6 VSPACE=4 ALIGN=RIGHT CELLPADDING=3 CELLSPACING=2> </TABLE> Here is a description of each of the attributes of the table tag:
- BGCOLOR
- Assigned either a predefined colour name, or the hexadecimal value of the desired colour for the background of the entire table.
- HEIGHT
- Assigned the number of pixels in height the table must occupy on the page
- WIDTH
- Assigned either the number of pixels in width the table must occupy on the page, or the percentage of the width of the window
- BORDER
- Assigned the number of pixels wide to draw a border around the table
- HSPACE
- Assigned the number of pixels of space to provide between the right and left of the table and surrounding objects
- VSPACE
- Assigned the number of pixels of space to provide between the top and bottom of the table and surrounding objects
- ALIGN
- Assigned either RIGHT or LEFT (default) to position the table at the right or left margin of the page
- CELLPADDING
- Assigned the number of pixels of space between the edges of each cell and the cell's contents
- CELLSPACING
- Assigned the number of pixels of space between each cell in the table
A caption may be added to a table using the CAPTION tag as follows:
<CAPTION ALIGN=BOTTOM> Sample Table </CAPTION> Here is a description of each of the attributes of the caption tag:
- ALIGN
- Assigned either BOTTOM or TOP (default) to position the caption at either the bottom or top of the table. Do not place the CAPTION inside any of the TR, TH or TD tags!
All of the table parts are contained with rows. So each row of the table is defined as follows:
<TR BGCOLOR="#F5F5DC" ALIGN=CENTER VALIGN=TOP> </TR> The attributes of the row tag are:
- BGCOLOR
- Assigned either a predefined colour name, or the hexadecimal value of the desired colour for the background of the entire row.
- ALIGN
- Assigned either LEFT (default), CENTER or RIGHT to position the contents of each cell within the row at either the left, center, or right of their respective cells within the row.
- VALIGN
- Assigned either BASELINE, BOTTOM or MIDDLE (default) or TOP to position the contents of each cell either the bottom (baseline), middle (vertically) or top of thetheir respective cells within the row.
Column headings are defined as follows:
<TH BGCOLOR="#FFA500" ALIGN=CENTER VALIGN=BOTTOM COLSPAN=1 ROWSPAN=1 NOWRAP> </TH> Each of the attributes of the column headings are:
- BGCOLOR
- Assigned either a predefined colour name, or the hexadecimal value of the desired colour for the background of the individual heading cell.
- ALIGN
- Assigned either LEFT (default), CENTER or RIGHT to position the contents of the heading cell within the row at either the left, center, or right of their respective cells within the row.
- VALIGN
- Assigned either BASELINE, BOTTOM or MIDDLE (default) or TOP to position the contents of each cell either the bottom (baseline), middle (vertically) or top of the their respective cells within the row.
- COLSPAN
- Assigned the number of columns in width this cell occupies
- ROWSPAN
- Assigned the number of rows in height this cell occupies
- NOWRAP
- No value assigned, specifies that thhe text within the cell are not tbe broken (no word wrap)
Individual cells are defined as follows:
<TD BGCOLOR="#FAEBD7" ALIGN=CENTER VALIGN=TOP COLSPAN=1 ROWSPAN=1 NOWRAP> </TD> Each of the attributes of the table cells are:
- BGCOLOR
- Assigned either a predefined colour name, or the hexadecimal value of the desired colour for the background of the individual cell.
- ALIGN
- Assigned either LEFT (default), CENTER or RIGHT to position the contents of the cell within the row at either the left, center, or right of their respective cells within the row.
- VALIGN
- Assigned either BASELINE, BOTTOM or MIDDLE (default) or TOP to position the contents of each cell either the bottom (baseline), middle (vertically) or top of the their respective cells within the row.
- COLSPAN
- Assigned the number of columns in width this cell occupies
- ROWSPAN
- Assigned the number of rows in height this cell occupies
- NOWRAP
- No value assigned, specifies that thhe text within the cell are not tbe broken (no word wrap)
All together, the table definition looks like this:
<TABLE BGCOLOR="#BDB76B" HEIGHT="100" WIDTH="60%" BORDER=1 HSPACE=6 VSPACE=4 ALIGN=RIGHT CELLPADDING=3 CELLSPACING=2> <CAPTION ALIGN=BOTTOM> Sample Table </CAPTION> <TR BGCOLOR="#F5F5DC" ALIGN=CENTER VALIGN=TOP> <TH BGCOLOR="#FFA500" ALIGN=CENTER VALIGN=BOTTOM COLSPAN=1 ROWSPAN=1 NOWRAP> Col 1 </TH> <TH BGCOLOR="#FFA500" ALIGN=CENTER VALIGN=BOTTOM COLSPAN=1 ROWSPAN=1 NOWRAP> Col 2 </TH> </TR> <TR BGCOLOR="#F5F5DC" ALIGN=CENTER VALIGN=MIDDLE> <TD BGCOLOR="#FAEBD7" VALIGN=TOP COLSPAN=1 ROWSPAN=1> Item 1 </TD> <TD BGCOLOR="#F66BD7" ALIGN=LEFT COLSPAN=1 ROWSPAN=1> This is some text </TD> </TR> <TR BGCOLOR="#F5F5DC" ALIGN=CENTER VALIGN=TOP> <TD ALIGN=RIGHT COLSPAN=1 ROWSPAN=1 NOWRAP> Item 2 </TD> <TD ALIGN=CENTER VALIGN=BOTTOM COLSPAN=1 ROWSPAN=1> This long text that is supposed to wrap when it exceeds the width of the cell. It should look different than the cell above it. </TD> </TR> </TABLE> And the table displays like this, with the text that follows it wrapping around to the left, the same as an image with the ALIGN attribute set to RIGHT:
Sample Table Col 1 Col 2 Item 1 This is some text Item 2 This long text that is supposed to wrap when it exceeds the width of the cell. It should look different than the cell above it.