Lesson 7
Tables
Tables are beneficial for much more than
just presenting data in tabular columns. They can be a valuable aid to
formatting your pages, graphics and all. The basic elements of the table
consist of the <table>...</table> tag which surrounds the entire
table, the <tr> tag which defines the individual rows of the table and
the <td> tag which defines the cells within the table rows. Another tag
is the <th> tag which creates a table header in a bold font. The
attributes of the <table> tag would affect the entire table. They are as
follows:
- <align>. Enables text to flow
around the table. values are align=left or align=right.
- <border>. Sets the table border
thickness. The default value is border=0 (no border)
- <cellspacing>. Defines the
distance a cell frame is from the edges of the object within the frame. The
default is cellpadding=1.
- <width>. Specifies the desired
width of the table in pixels or percentages.
- <height>. Specifies the desired
height of the table in pixels or percentages.
These attributes can only be used with the
<tr>, <td> and <th> tags:
- <align>. Specifies the alignment
of text or graphics within the cell. Values are align=left, align=right or
align=center. The default is align=left.
- <valign>. Specifies the vertical
alignment of text or graphics within the cell. Values are valign=top,
valign=bottom, valign=middle or valign=baseline. The default is
valign=middle.
These attributes can only be used with the
<td> and <th> tags:
- <width>. Specifies a width (which
affects all the cells in that column) for the element in pixels or as a
percentage of the screen. If more than one cell uses the width attribute, the
widest cell setting will be used (Note: if the total of the widths specified
exceeds that specified in the width attribute of the <table> tag, the
table tag width will be overridden).
- <height>. Specifies a height
(which affects all the cells in that row) for the element in pixels or as a
percentage of the screen. If more than one cell uses the height attribute, the
tallest cell setting will be used. (Note: if the total of the heights specified
exceeds that specified in the height attribute of the <table> tag, the
table tag height will be overridden).
- <colspan>. The number of columns
that the cell spans.
- <rowspan>. The number of rows that
the cell spans.
- <nowrap>. The text wrapping
feature is disabled.
An example of this would be this 2 column
table which will be constructed a column at a time. We start with the first
column:
<table border=4>
<tr>
<th align=center>First 6 Months of the
Year</th>
</tr>
<tr>
<td>January</td>
</tr>
<tr>
<td>February</td>
</tr>
<tr>
<td>March</td>
</tr>
<tr>
<td>April</td>
</tr>
<tr>
<td>May</td>
</tr>
<tr>
<td>June</td>
</tr>
</table>
This is how the first column would
look:
| First 6 Months of the
Year |
| January |
| February |
| March |
| April |
| May |
| June |
Now for the second column all you would do is just
build on the first:
<table border=4>
<tr>
<th align=center>First 6 Months of the
Year</th>
<th align=center>Last 6 Months of the
Year</th>
</tr>
<tr>
<td>January</td>
<td>July</td>
</tr>
<tr>
<td>February</td>
<td>August</td>
</tr>
<tr>
<td>March</td>
<td>September</td>
</tr>
<tr>
<td>April</td>
<td>October</td>
</tr>
<tr>
<td>May</td>
<td>November</td>
</tr>
<tr>
<td>June</td>
<td>December</td>
</tr>
</table>
This is how both columns would
look:
| First 6 Months of the
Year |
Last 6 Months of the
Year |
| January |
July |
| February |
August |
| March |
September |
| April |
October |
| May |
November |
| June |
December |
Next take a look at how the attribute
"cellpadding=6" added to the <table> tag makes the table look
nicer:
| First 6 Months of the
Year |
Last 6 Months of the
Year |
| January |
July |
| February |
August |
| March |
September |
| April |
October |
| May |
November |
| June |
December |
This is an example with a third column added in
between the first and the second. Notice that some of the cells in the middle
are blank, the cell at the bottom under "my birthday" looks nicer
because it has a non-breaking space ( ) tag included within the
<td> tag:
<table border=4
cellpadding=6>
<tr>
<th align=center>First 6 Months of the
Year</th>
<th align=center>Special
Days<br>(first 6 Months)</th>
<th align=center>Last 6 Months of the
Year</th>
</tr>
<tr>
<td>January</td>
<td>"leave this area
blank"</td>
<td>July</td>
</tr>
<tr>
<td>February</td>
<td>Valentine's
Day</td>
<td>August</td>
</tr>
<tr>
<td>March</td>
<td>"leave this area
blank"</td>
<td>September</td>
</tr>
<tr>
<td>April</td>
<td>Easter
(usually)</td>
<td>October</td>
</tr>
<tr>
<td>May</td>
<td>My
Birthday</td>
<td>November</td>
</tr>
<tr>
<td>June</td>
<td> </td>
<td>December</td>
</tr>
</table>
This is how it would look:
| First 6 Months of the
Year |
Special
Days
(first 6 months) |
Last 6 Months of the
Year |
| January |
|
July |
| February |
Valentine's Day |
August |
| March |
|
September |
| April |
Easter (usually) |
October |
| May |
My Birthday |
November |
| June |
|
December |
Note: If you check out the above table you'll notice that the center cell at
the bottom has a nice edge around it as opposed to the two other empty cells,
to accomplish this just insert a non-breaking space ( ) into the cell.
To add background colors to tables, check this
out.
|
