|
|
Web Tip of the Week
|
| |
Week of: May 20, 1996
This week's Web tip will discuss implementing columns via tables.
Unfortunately, there is no COLUMNS tag in HTML to this date which
would allow you to create columns on your Web pages. The only way
you can implement columns is indirectly through the TABLE tag. What
are tables? Here is an example of a table:
| Math
| Physics
| Computer Science
|
| Chemistry
| Biology
| Geology
|
Now here is the HTML code that produced the table:
<TABLE BORDER=2>
<TR>
<TD> Math
<TD> Physics
<TD> Computer Science
<TR>
<TD> Chemistry
<TD> Biology
<TD> Geology
</TABLE>
All tables must start with the TABLE tag and end with the /TABLE tag.
Everything in between these two tags defines the rows and the data.
So, the TR tag says to start a new row in the table. The TD tag says
that what follows it is the data for one cell of this row. Therefore,
you can see that this table has two rows and each row has three data
cells. You can change this to have as many rows with as many cells
in each row as you need. These tables do not have to be symmetrical
either. You could have a row with five cells, and then another row
with only two. It's up to you.
So how are we going to turn this into columns? Well, there's just
a couple of things we need to do.
- Get rid of the border that surrounds the whole table and each
cell.
- Set the distance between each column.
To get rid of the border we just need to modify the BORDER tag included
in the TABLE tag. In the above example, we have the thickness of the
border set to 2. If we change this to 0 (zero), then there will be
no thickness, hence no border.
To set the distance between each column, we can specify the width
of each cell. To do this we use the WIDTH attribute with the TD tag.
Here is what the HTML code looks like now with these changes:
<TABLE BORDER=0>
<TR>
<TD WIDTH=150> Math
<TD WIDTH=150> Physics
<TD WIDTH=150> Computer Science
<TR>
<TD WIDTH=150> Chemistry
<TD WIDTH=150> Biology
<TD WIDTH=150> Geology
</TABLE>
And here is what the table looks like now:
| Math
| Physics
| Computer Science
|
| Chemistry
| Biology
| Geology
|
An alternative to the WIDTH attribute in specifying the distance between
cells, is to have more cells in each row, but with some of them empty.
The empty cells would be the cells in between the columns. Here is
how I would use HTML to implement this:
<TABLE BORDER=0>
<TR>
<TD> Math
<TD WIDTH=100>
<TD> Physics
<TD WIDTH=100>
<TD > Computer Science
<TR>
<TD> Chemistry
<TD WIDTH=100>
<TD> Biology
<TD WIDTH=100>
<TD> Geology
</TABLE>
And here is the table once again:
| Math
|
| Physics
|
| Computer Science
|
| Chemistry
|
| Biology
|
| Geology
|
So really there are five cells in each row now, but two of them are
empty- the second and fourth cell of each row. Now you have the choice
of which way you want to do it. Good luck!
Tip for the week of May 6th
discusses font sizes.
Tip for the week of April 29th
discusses counters.
Tip for the week of April 22nd
discusses background and text colors.
Tip for the week of April 15th
discusses vertical and horizontal space around images.
Tip for the week of April 1st
discusses the inclusion of images in a Web page. |
| |
|
