|
A
Row is divided into Columns (or cells) -
Each Cell has many attributes the define
what the appearance of that cell is. We
will continue with the previous example
when defining a row to add 3 columns to
the row and place some text within each
of the three cells. The following
is what our table will look like when we
are done:
| COLUMN
1 |
COLUMN
2 |
COLUMN
3 |
Let's start
by adding the three columns to our example
code.
Each column
(or cell) is define by the <td> and
</td> tags. Below we have placed
these two tags between the table row tags
(i.e. <tr> and </tr> tags).
We have placed three sets because we want
three columns:
<table
bgcolor="#800000" width="43%"
height="70%" border="1"
cellspacing="15" cellpadding="8"
bordercolor="#008080" bordercolorlight="#000080"
bordercolordark="#FFFFCC">
<tr align=center
valign=top bgcolor="#800000">
<td></td>
<td></td>
<td></td>
</tr>
</table> |
Now lets' talk about the various attributes
that can be set for each Cell. First
you can define a Cell's vertical alignment
and horizontal alignment just like a row.
Any attributes defined for a cell will overide
the attributes defined for the row the cell
resides in. The Following example
shows the vertical alignment and horizontal
alignment added in for our table example:
<table
bgcolor="#800000" width="43%"
height="70%" border="1"
cellspacing="15" cellpadding="8"
bordercolor="#008080" bordercolorlight="#000080"
bordercolordark="#FFFFCC">
<tr align=center
valign=top bgcolor="#800000">
<td
valign="middle"
align="center"></td>
<td
valign="middle"
align="center"></td>
<td
valign="middle"
align="center"></td>
</tr>
</table> |
Next we add in the definition to define
the overiding background color for the cell.
We have defined the cell color to e Silver
in the following example:
<table
bgcolor="#800000" width="43%"
height="70%" border="1"
cellspacing="15" cellpadding="8"
bordercolor="#008080" bordercolorlight="#000080"
bordercolordark="#FFFFCC">
<tr align=center
valign=top bgcolor="#800000">
<td valign="middle" align="center"
bgcolor="#FFFFCC"></td>
<td valign="middle" align="center"
bgcolor="#FFFFCC"></td>
<td valign="middle" align="center"
bgcolor="#FFFFCC"></td>
</tr>
</table> |
The "nowrap" attribute forces
the browser to keep the text of the cell
on a single line without automatically word
wrapping the text to the next line.
The following
example shows the nowrap as part of the
Tags:
<table
bgcolor="#800000" width="43%"
height="70%" border="1"
cellspacing="15" cellpadding="8"
bordercolor="#008080" bordercolorlight="#000080"
bordercolordark="#FFFFCC">
<tr align=center
valign=top bgcolor="#800000">
<td valign="middle" align="center"
bgcolor="#FFFFCC" nowrap></td>
<td valign="middle" align="center"
bgcolor="#FFFFCC" nowrap></td>
<td valign="middle" align="center"
bgcolor="#FFFFCC" nowrap></td>
</tr>
</table> |
Now let's add our text that will be the
contents of each of the three cells.
The text, images, etc. will be placed between
the <td> and </td> tags.
See the following example:
<table
bgcolor="#800000" width="43%"
height="70%" border="1"
cellspacing="15" cellpadding="8"
bordercolor="#008080" bordercolorlight="#000080"
bordercolordark="#FFFFCC">
<tr align=center
valign=top bgcolor="#800000">
<td valign="middle" align="center"
bgcolor="#FFFFCC" nowrap>Column
1</td>
<td valign="middle" align="center"
bgcolor="#FFFFCC" nowrap>Column
2</td>
<td valign="middle" align="center"
bgcolor="#FFFFCC" nowrap>Column
3</td>
</tr>
</table> |
Our Table is now complete. The previous
code represents the table at the beginning
of this web page. Just when you thought
we were done theres one last item we must
discuss. Table Headings. Table
headings are exactlly what they sound like.
It's a way to define the heading value for
a column. The table Headings are defined
exactly as the Table Description (cells)
except the tag is <th> and </th>
instead of <td> and </td>
In the following
example, we have added a row above the one
we previously define and also defined the
table headings for the three columns:
| <table
bgcolor="#800000" width="43%"
height="70%" border="1"
cellspacing="15" cellpadding="8"
bordercolor="#008080" bordercolorlight="#000080"
bordercolordark="#FFFFCC">
<tr align="center"
valign="top" bgcolor="#800000">
<th valign="top" align="center"
bgcolor="#FFFFCC" nowrap>Heading
1</th>
<th valign="top" align="center"
bgcolor="#FFFFCC" nowrap>Heading
2</th>
<th valign="top" align="center"
bgcolor="#FFFFCC" nowrap>Heading
3</th>
</tr>
<tr align=center valign=top bgcolor="#800000">
<td valign="middle"
align="center" bgcolor="#FFFFCC"
nowrap>Column 1</td>
<td valign="middle"
align="center" bgcolor="#FFFFCC"
nowrap>Column 2</td>
<td valign="middle"
align="center" bgcolor="#FFFFCC"
nowrap>Column 3</td>
</tr>
</table> |
The next example is the completed table
with the headings defined
| Heading
1 |
Heading
2 |
Heading
3 |
| Column
1 |
Column
2 |
Column
3 |
|