So You Want Some Advanced Table Commands, Huh?

By Joe Burns

...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:

 
How
about
this?
 
Cell
 
 
Cell
 

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]

Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •  
  •  
  •