...use these to jump around or read it all
[The COLSPAN Command]
[The ROWSPAN Command]
This tutorial will only deal with three new commands. Some
advanced tutorial, huh? Actually, these three commands are great
when you want more control over the spacing of your table cells.
I strongly suggest that you first read over, and work with, my
tutorial
So You
Want A Table, Huh?. Otherwise, this stuff will be way over
your head. Then you'll call me a name. Then you'll bring my
mother into it, and nobody wants that.
The COLSPAN Command
Here's a simple table that uses the COLSPAN command:
This Goes Across the Top!
|
Cell
|
Cell
|
Cell
|
See how the top row spans across
three columns? That's what the command does. It really isn't
that tough to do, the problem comes in figuring out where the
<TR> commands go. You see, if you place a TR in the wrong
place, you can mess up the complete configuration of the
table.
Here's the program that created the table above:
<TABLE BORDER=3 CELLSPACING=3 CELLPADDING=3>
<TR>
<TD ALIGN="center" COLSPAN="3">This Goes Across the Top!</TD>
</TR>
<TR>
<TD ALIGN="center">Cell</TD>
<TD ALIGN="center">Cell</TD>
<TD ALIGN="center">Cell</TD>
</TR>
</TABLE>
Notice the first <TD> line.
See how it contains the ALIGN command plus that COLSPAN
thing I talked about? Here's the deal:
- A Table is a series of columns (the up and down sections)
and rows (the left to right sections).
- I wanted the first TD cell to span across three columns so I
added the command COLSPAN
and told the span to go across three columns. Note there are
three cells (columns) that are being spanned by that command.
- If I had written COLSPAN="2", the span would have been only
two columns.
- Note where the first <TR> command fell. It is right
after the row that spanned three columns.
If I had spanned only two, then I would have had to place
another TD cell before the first TR command.
- It is best to draw out your table before writing your HTML
code. That will help you to see where the table rows must break
to keep within the square that is the table.
The ROWSPAN Command
My guess is that you can just about
guess what is going to happen here. Basically the same thing as
above, but the command spans rows rather than columns. Here's an
example:
Here's what made it:
<TABLE BORDER=3 width=340 CELLSPACING=3 CELLPADDING=3>
<TR>
<TD ROWSPAN="2" ALIGN=center WIDTH="200">How about this?</TD>
<TD ALIGN=center WIDTH="200">Cell</TD>
</TR>
<TR>
<TD ALIGN=center WIDTH="200">Cell</TD>
</TR>
</TABLE>
See what happened? I simply told
the column to span over two rows.
I think that's a bit confusing too. You tell columns to span
rows and you tell rows to span columns. It confuses me every so
often.
Again, the best thing to do is to
draw out the table before you attempt to create it with HTML
commands. Getting the spans is never the difficult thing. The
problem is always where do you place the <TR> command to
keep this information all inside the four corners.
What's That WIDTH="--" Deal?
Yeah, I did just pop that up out of nowhere, didn't I? That command denotes the width of the cell. When you use numbers, like I did above, it is defining the width in pixels. If you use percentages, like WIDTH="20%" it is denoting width of the cell in relationship to the screen. Please notice the percentage sign is required.
This helps a lot in defining the space your tables will take up on the page. Using percentages helps in keeping the cells somewhat equal between browsers and differing screen settings.
Can I use COLSPAN and ROWSPAN commands together?
Yes. As a matter of fact, the
HTML Goodies Master Page is a
giant table using both ROWSPAN and COLSPAN commands to create the
look. Bop over, take a look and feel free to
look at the View - Source to see the commands.
Good luck with these two new
commands. Take my word for it...these will give you more
headaches than you want. You may be sorry you saw this tutorial.
So go look at another...
[The COLSPAN Command]
[The ROWSPAN Command]
IE 7
Firefox 2.0
