| Now we're starting to get into some really interesting stuff.
You've probably had some experience with tables in a word processing package
like MS-Word or WordPerfect. Or maybe you've built some spreadsheets in
Lotus 1-2-3 or Excel. If you have, that's great, because that means you're
kind of familiar with the concept of rows and columns and cells.
If you haven't, well, maybe this might actually be easier for you. I
find that I'm having to overcome my "missionary" view of tables
as I try to use them to create structure on my pages. I'll start off slow
and see how far we get before you pass out!
We'll be using the following tags - <table>,
<caption>, <tr>,
<th> and <td>.
Plain Tables
I told you it'd be slow - let's put three items in cells:
| Stuff in cell 1 |
More stuff in cell 2 |
Final stuff in cell 3 |
This is about as basic as you can get and it looks like this in HTML
code:
<table border="1" width="100%">
<tr>
<td width="33%">Stuff in cell 1</td>
<td width="33%">More stuff in cell 2</td>
<td width="34%">Final stuff in cell 3</td>
</tr>
</table>
In this example we've set a lot of the variables and controlled the formatting
to our liking. We could have left off the stuff and it would look like
this:
| Stuff in cell 1 |
More stuff in cell 2 |
Final stuff in cell 3 |
Which is the result of the following code:
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>Stuff in cell 1</td>
<td>More stuff in cell 2</td>
<td>Final stuff in cell 3</td>
</tr>
</table>
You probably noticed that the first table was a little more presentable.
Let's play around with a few more of the table attributes and see what
happens. We'll start by making the border thicker:
| Stuff in cell 1 |
More stuff in cell 2 |
Final stuff in cell 3 |
This is produced by:
<table border="6" width="100%">
<tr>
<td width="33%">Stuff in cell 1</td>
<td width="33%">More stuff in cell 2</td>
<td width="34%">Final stuff in cell 3</td>
</tr>
</table>
We've let the system use it's default cell attributes up to now - let's
go do some wild and crazy things with those:
| Stuff in cell 1 |
More stuff in cell 2 |
Final stuff in cell 3 |
The code that did this is:
<table border="6" width="100%" cellspacing="5" cellpadding="5">
<tr>
<td width="33%">Stuff in cell 1</td>
<td width="33%">More stuff in cell 2</td>
<td width="34%">Final stuff in cell 3</td>
</tr>
</table>
The cellspacing="5" gave us the bigger borders
around the individual cells while the cellpadding="5"
gave us the extra space between the text in the cell and the edge of the
cell.
Now let's play around inside the cells - like changing fonts, backgrounds
and colors.
| Stuff in
cell 1 |
More
stuff in cell 2 |
Final
stuff in cell 3 |
The code behind this horrible concoction is:
<table border="6" width="100%" cellspacing="5" cellpadding="5">
<tr>
<td width="33%" bgcolor="#FF0000">
<strong><font face="Arial">Stuff in cell 1</font></strong>
</td>
<td width="33%" bgcolor="#FFFF00">
<font face="Georgia" size="4" color="#008080">
<strong>More stuff in cell 2</strong>
</font>
</td>
<td width="34%" background="../images/bgbrick1.jpg">
<strong>
<font face="Brush Script MT" size="5">
Final stuff in cell 3
</font>
</strong>
</td>
</tr>
</table>
All right, let's make it a little narrower and add some headings for
the cells.
| Column
1 |
Column
2 |
Column
3 |
| Stuff in
cell 1 |
More
stuff in cell 2 |
Final
stuff in cell 3 |
This code looks like:
<table border="6" width="75%" cellspacing="5" cellpadding="5">
<tr>
<th width="33%" bgcolor="#000000">
<strong><font color="#FFFFFF">Column 1</font></strong>
</th>
<th width="33%" bgcolor="#000000">
<strong><font color="#FFFFFF">Column 2</font></strong>
</th>
<th width="34%" bgcolor="#000000">
<strong><font color="#FFFFFF">Column 3</font></strong>
</th>
</tr>
<tr>
<td width="33%" bgcolor="#FF0000">
<strong>
<font face="Arial">Stuff in cell 1</font>
</strong>
</td>
<td width="33%" bgcolor="#FFFF00">
<font face="Georgia" size="4" color="#008080">
<strong>More stuff in cell 2</strong>
</font>
</td>
<td width="34%" background="../images/bgbrick1.jpg">
<strong>
<font face="Brush Script MT" size="5">
Final stuff in cell 3
</font>
</strong>
</td>
</tr>
</table>
The last thing we'll do to with plain tables is add a caption.
SAMPLE TABLE
| Column
1 |
Column
2 |
Column
3 |
| Stuff in
cell 1 |
More
stuff in cell 2 |
Final
stuff in cell 3 |
Which I did by adding one line to our definition like:
<table border="6" width="75%" cellspacing="5" cellpadding="5">
<caption>SAMPLE TABLE</caption>
<tr>
<th width="33%" bgcolor="#000000">
<strong><font color="#FFFFFF">Column 1</font></strong>
</th>
<th width="33%" bgcolor="#000000">
<strong><font color="#FFFFFF">Column 2</font></strong>
</th>
<th width="34%" bgcolor="#000000">
<strong><font color="#FFFFFF">Column 3</font></strong>
</th>
</tr>
<tr>
<td width="33%" bgcolor="#FF0000">
<strong><font face="Arial">Stuff in cell 1</font></strong>
</td>
<td width="33%" bgcolor="#FFFF00">
<font face="Georgia" size="4" color="#008080">
<strong>More stuff in cell 2</strong>
</font>
</td>
<td width="34%" background="../images/bgbrick1.jpg">
<strong>
<font face="Brush Script MT" size="5">
Final stuff in cell 3
</font>
</strong>
</td>
</tr>
</table>
Quite a bit of stuff you can do with a "plain" table isn't
it? Now let's start doing some of the fancy stuff.
Fancy Table Stuff
In all the previous examples we were just using a simple row-column table
with a lot of attributes being set at the cell level. That's good and
bad. If I had wanted my font to be the same for all my cells there's no
way to do it in the table definition. I'd have to go into each cell and
set the attributes.
Another characteristic - if I did not specify any background image or
color, the cell is basically transparent.
Let's do some more cell sizing. I'll keep using the same ugly table to
enable us to track the minor changes between the new table and the previous
one. (Helps a geezer like me keep from being confused!) Let's try some
row-spanning like this:
SAMPLE TABLE
| Column
1 |
Column
2 |
Column
3 |
| A Spanning Cell |
Row
1 Cell 2 |
Row
1 Cell 3 |
| More
stuff in cell 2 |
Final
stuff in cell 3 |
Which comes from doing this code:
<table border="6" width="75%" cellspacing="5" cellpadding="5">
<caption>SAMPLE TABLE</caption>
<tr>
<th width="33%" bgcolor="#000000">
<strong><font color="#FFFFFF">Column 1</font></strong>
</th>
<th width="33%" bgcolor="#000000">
<strong><font color="#FFFFFF">Column 2</font></strong>
</th>
<th width="34%" bgcolor="#000000">
<strong><font color="#FFFFFF">Column 3</font></strong>
</th>
</tr>
<tr>
<td width="33%" bgcolor="#FF0000" rowspan="2">
A Spanning Cell
</td>
<td width="33%" bgcolor="#FFFF00">
<font face="Georgia" size="4" color="#008080">
<strong>Row 1 Cell 2</strong>
</font>
</td>
<td width="34%" background="../images/bgbrick1.jpg">
<font face="Brush Script MT" size="4">
<strong>Row 1 Cell 3</strong>
</font>
</td>
</tr>
<tr>
<td width="33%" bgcolor="#FFFF00">
<font face="Georgia" size="4" color="#008080">
<strong>More stuff in cell 2</strong>
</font>
</td>
<td width="34%" background="../images/bgbrick1.jpg">
<strong>
<font face="Brush Script MT" size="5">
Final stuff in cell 3
</font>
</strong>
</td>
</tr>
</table>
Or we can do some column spanning like so:
SAMPLE TABLE
| Column
1 |
Column
2 |
Column
3 |
| Spanned
all three columns |
| Stuff in
cell 1 |
More
stuff in cell 2 |
Final
stuff in cell 3 |
which is done by:
<table border="6" width="75%" cellspacing="5" cellpadding="5">
<caption>SAMPLE TABLE</caption>
<tr>
<th width="33%" bgcolor="#000000">
<strong><font color="#FFFFFF">Column 1</font></strong>
</th>
<th width="33%" bgcolor="#000000">
<strong><font color="#FFFFFF">Column 2</font></strong>
</th>
<th width="34%" bgcolor="#000000">
<strong><font color="#FFFFFF">Column 3</font></strong>
</th>
</tr>
<tr>
<td width="100%" bgcolor="#FF0000" colspan="3">
<strong>
<font face="Arial">Spanned all three columns</font>
</strong>
</td>
</tr>
<tr>
<td width="33%" bgcolor="#FF0000">
<strong><font face="Arial">Stuff in cell 1</font></strong>
</td>
<td width="33%" bgcolor="#FFFF00">
<font face="Georgia" size="4" color="#008080">
<strong>More stuff in cell 2</strong>
</font>
</td>
<td width="34%" background="../images/bgbrick1.jpg">
<strong>
<font face="Brush Script MT" size="5">
Final stuff in cell 3
</font>
</strong>
</td>
</tr>
</table>
Now the last example I'm going to show you is to spark your imagination,
or maybe wake you up. You can nest tables inside tables to create some
pretty complex structures on your page. I'm starting to use this method
to produce some formatting on my pages. I use it instead of frames because
it's more universal and easier for users to navigate. I'll keep some of
my frame stuff because I like the way it works for me but tables are very
acceptable as formatting devices. Eventually we'll be using stylesheets
like we're supposed to but the browser writers can't decide on how to
implement the standard.
SAMPLE TABLE
| Column
1 |
Column
2 |
Column
3 |
| Table 2 Cell 1 |
| Table 2 Cell 2 |
|
A |
E |
| B |
D |
| More
stuff in cell 2 |
Final
stuff in cell 3 |
Can we "table" this subject? Let's move on and see what
frames do for us.
|
