More Tables
Tables can be very much more complicated than just showing
columns of things. For example: this entire page is one big table, which
keeps everything in place and adjusts to the user's screen. Following is
a table (OK, tables are important for teaching people how to use them too...!),
of all the different attributes a table (or rather the <TABLE> tag),
can have:
| Attribute | Possible Values | Explanation |
|---|---|---|
| ALIGN="x" | LEFT, RIGHT | How the table is aligned: on the left or the right. |
| BACKGROUND="url" | filename for background image. | A background image that goes behind all the table's cells. |
| BGCOLOR="#RRGGBB" | An RGB colour triplet. | A background colour for the table (instead of background image). |
| BORDER="n" | 0 and anything above | Sets the size of the border around the table. (default is 0). |
| BORDERCOLOR="#RRGGBB" | An RGB colour triplet. | The colour of the table's border, (BORDER must be set to something other than 0). |
| BORDERCOLORLIGHT="#RRGGBB" | An RGB colour triplet. | One of the two colours used to draw a 3D border for the table, (BORDER must be set to something other than 0). |
| BORDERCOLORDARK="#RRGGBB" | An RGB colour triplet. | The other of the two colours used to draw a 3D border for the table, (BORDER must be set to something other than 0). |
| CELLPADDING="n" | Any number in pixels. | Controls the spacing between the sides of a cell and its contents. |
| CELLSPACING="n" | Any number in pixels. | Controls the spacing between the different cells in a table. |
| COLS="n" | Any number | Specifies the number of columns in the table. This makes processing faster. |
| WIDTH="x" | Any number in pixels, or a percentage, with the % sign after it. | The actual width of the table compared to its container, normally the page. |
| FRAME="x" | VOID, ABOVE, BELOW, HSIDES, LHS, RHS, VSIDES, BOX, BORDER. |
Specifies what borders
appear on the table: (in order), none, above, below, on the horizontal
sides, left hand side, right hand side, vertical sides, border
all round, border all round.
|
| RULES="x" | NONE, GROUPS, ROWS, COLS, ALL. | Specifies what rules (inner-borders), are placed in the table. The values (in order): None shown, around specific groups of cells (discussed later), rows only, columns only, all shown. |
Note: BORDERCOLORLIGHT; BORDERCOLORDARK, FRAME, BACKGROUND, and RULES are not yet available in Netscape Navigator, only in Internet Explorer 4.0x and higher. Also in IE 4.0x, you can place a <CAPTION> tag straight after the opening <TABLE> tag:
<TABLE COLS=3 BORDER=2>
<CAPTION ALIGN="x">Caption Text</CAPTION>
..Rest of table data and tags...
</TABLE>
In the <CAPTION> tag, x can be TOP or BOTTOM, depending on where
you want the table caption to go.
Cells in a table can be divided up into groups, which then can have different
properties (e.g. a different BGCOLOR). These groups are:
|
Group
|
Use
|
|---|---|
| <TBODY> & </TBODY> | Specifies a main group of cells. You may have more than one <TBODY> of cells. |
| <THEAD> & <THEAD> | Only one set of header cells is allowed per table. |
| <TFOOT> & <TFOOT> | Only one set of footer cells is allowed per table. |
These different groups will help separate your table up a bit. You can
also control the RULES attribute in the <TABLE> tag more effectively
with grouping. The grouping is used in the following way:
<TABLE>
<THEAD>
<TR>
<TD>One cell in the Table header group</TD><TD>Another
cell in the table header group</TD>
</TR>
<TR>
<TD>Another cell in another row in the Table header group.</TD></TD>
</TR>
</THEAD>
<TBODY>
<TR><TD>Rows of a Table body</TD> <TD></TD>
</TR>
<TR><TD></TD><TD></TD>
</TBODY>
<TFOOT>
<TR><TD>One cell in the row of the table foot</TD><TD></TD>
</TR>
</TFOOT>
<TABLE>
You can also group columns together:
<COLGROUP SPAN="x" WIDTH="y">
<COL>
<COL>
<COL>
</COLGROUP>
Where x is the number of columns the group should include, and y is the
width of the group, in pixels or as a percentage (with the % sign after
it).
Finally, there are lots of attributes for the <TD> (table cell), <TH> (table header cell), and <TR> (table row), tags too:
For <TD> and <TH>:
| Attribute | Possible Values | Explanation |
|---|---|---|
| ALIGN="x" | LEFT, RIGHT, CENTER. | How text in the cell is aligned with respect to the borders of the cell. Default is CENTER. |
| BACKGROUND="url" | filename for background image. | A background image that goes behind the cell. |
| BGCOLOR="#RRGGBB" | An RGB colour triplet. | A background colour for the cell, (instead of background image). |
| BORDERCOLOR="#RRGGBB" | An RGB colour triplet. | The colour of the cell's border. |
| BORDERCOLORLIGHT="#RRGGBB" | An RGB colour triplet. | One of the two colours used to draw a 3D border for the table. |
| BORDERCOLORDARK="#RRGGBB" | An RGB colour triplet. | The other of the two colours used to draw a 3D border for the table. |
| COLSPAN="n" | A number | The number of columns the cell spans, i.e. a cell can occupy two columns. |
| ROWSPAN="n" | A number | As above, but with rows. |
| NOWRAP="NOWRAP" | NOWRAP | Stops word-wrap in the cell. |
| VALIGN="x" | TOP, MIDDLE, BOTTOM, BASELINE. | Specifies the vertical alignment of text in the cell. The setting can be (in order): at the top of the cell, in the middle, at the bottom, or on a common baseline with all the other cells in the row. |
For <TR> the attributes are all specified in the same way with the same possible values, but these apply to the whole table row, as opposed to only one cell. However, COLSPAN, ROWSPAN, and NOWRAP do not exist as attributes of the <TR> tag, for obvious reasons.
Tables can act as containers for any kind of object. In other words, you can put images into table cells just by enclosing the <IMG> tag in between two <TD> and </TD> tags withing a <TABLE> tag:
<TABLE>
<TR>
<TD><IMG SRC="somepic.gif"></TD>
<TD>There is an image in the cell to the left of this one!</TD>
</TR>
</TABLE>
Now we incorporate this into our example from the last page:
<HTML>
<HEAD> <TITLE> Iceman's Web Page </TITLE> </HEAD>
<BODY TEXT="#000000" ALINK="#FFFF00" VLINK="#8080FF" LINK="#0000FF"
BACKGROUND="greyweave.gif">
<H1> This is a heading of size 1</H1> <BR>
<FONT COLOR="#FFFF00"> <H1> This is a heading of size
1 in a different colour (yellow) </H1> </FONT>
<FONT SIZE=+2 FACE="Verdana">This is text of font size +2 and
in the Verdana Font</FONT><BR>
<A HREF="mypage.htm">This is a hyperlink to mypage.htm (Don't
Click This!!)</A>
<!-- This is a comment, it won't appear in the browser, but is useful
when looking at source code. -->
<CENTER>
<A HREF="nextpage.htm">
<IMG SRC="mail.jpg">
</A>
</CENTER>
Don't Click This Either!!
<TABLE CELLPADDING=15 BORDER=10 BORDERCOLOR="#FF0000"
BACKGROUND="greyweave.gif" RULES="GROUPS" COLS=2>
<THEAD>
<TR>
<TD><B>This is in a cell in the table header.<B></TD>
<TD><B>This
is in another cell in the table header.</B></TD>
</TR>
</THEAD>
<TBODY>
<TR>
<TD BGCOLOR="#00FF00"> This is in a cell in the Table
body, which is green.</TD>
<TD> This is a message in the second row of the second column
of the table (table body)</TD>
</TBODY>
<TFOOT>
<TR>
<TD COLSPAN=2><FONT FACE="Comic Sans MS, Arial">A
cell spanning two columns of the cell in the footer, in a different font.</FONT></TD>
</TR>
</TFOOT>
</TABLE>
</CENTER>
</BODY>
<HTML>
Click Here for the Resulting
Page.
O.K Try it out!
