|
Information on a web page can be presented in the form of a table. A table is created
as a set of rows and columns. A table is defined by the TABLE tag and within the TABLE tag,
the table is arranged in rows, defined by the TABLE ROW tag and columns defined by the
TABLE DATA tag.
The code opposite defines a table which has two rows and within each row there are
three columns. The actual data resides between the TABLE DATA tags which define an
area known as a table data cell. The TABLE DATA tags
are contained between the TABLE ROW tags. Add the code to your document.
The structure of the table is made visble by setting the BORDER attribute of the
TABLE tag to a value greater than 0. Set the BORDER attribute to 1 as shown below. |
<TABLE>
<TR>
<TD>Row 1, Column 1</TD>
<TD>Row 1, Column 2</TD>
<TD>Row 1, Column 3</TD>
</TR>
<TR>
<TD>Row 2, Column 1</TD>
<TD>Row 2, Column 2</TD>
<TD>Row 2, Column 3</TD>
</TR>
</TABLE> |
| |
|
|
A Table Data Cell can be made to span several rows or columns by adding the ROWSPAN
or COLSPAN attributes. Add the COLSPAN attribute to the Table Data Cells shown below. |
The BORDER attribute
gives the thickness
of the border in pixels. |
|
|
<TD COLSPAN="2">Row 1, Column 1</TD>
<TD COLSPAN="2">Row 2, Column 3</TD>
|
|
A Table Data Cell can contain both ROWSPAN AND COLSPAN attributes. |
|
|
The align attribute can be used with the TABLE DATA tag to align the data in the cell
to the left, center or right of the cell. Align the text in the cells that span two
columns to the center of the cells as shown. |
|
<TD COLSPAN="2" ALIGN="center">
| |
|
 |
The CELLSPACING attribute of the TABLE tag defines the spacing between the cells in the
table. The CELLPADDING attribute defines the space around the content of a cell. The
diagram opposite shows the parts of the cell specified by the attributes. Apply the
attribute values shown below to your code. |
|
|
<TABLE CELLPADDING="4" CELLSPACING="4">
|
|
Table cells can also be given a background color using the BGCOLOR attribute. |
|
TABLE tags and TABLE DATA tags do not possess an
attribute
to change the color of the text in a cell. To
achieve this
you must surround the text with a FONT
tag and use the FONT
tag's COLOR attribute. |
|
The BGCOLOR attribute can either be applied to the whole table by including it in the
TABLE tag or to individual cells by including it in the TABLE DATA tag. |
|
|
Apply the background color shown to the cells that span two columns. |
|
<TD COLSPAN="2" BGCOLOR="#FFFFCC">
| |
|
