The COLSPAN Command

See how the top row spans across three columns? That's what the command does. COLSPAN is really an attribute of the TD tag/command.

Here's the program that created the table above:

<TABLE BORDER=3 CELLSPACING=3 CELLPADDING=3>
  <TR>
    <TD ALIGN="center" COLSPAN="3">This cell goes across three columns</TD>
  </TR>
 
  <TR>
    <TD ALIGN="center">one</TD>
    <TD ALIGN="center">two</TD>
    <TD ALIGN="center">three</TD>
  </TR>

</TABLE>

Notice the first <TD> line. See how it contains the ALIGN command plus COLSPAN. 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 attribute 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.

NOTE: Notice how the code is indented two spaces for the <TR> and four spaces for the <TD>. This makes the code easier to read especially later when we get into nested tables.

The ROWSPAN Command

Here's a simple table that uses the ROWSPAN command:

See how the first column spans across two rows? That's what the command does. ROWSPAN is really an attribute of the TD tag/command.

Here's the code for the table above:

<TABLE ALIGN="center" BORDER=3 WIDTH="400" CELLSPACING=3 CELLPADDING=3>
  <TR>
    <TD ALIGN="center" WIDTH="200" ROWSPAN="2"> This cell borders two rows </TD>
    <TD ALIGN="center" >one</TD>
    <TD ALIGN="center" >two</TD>
  </TR>
  <TR>
    <TD ALIGN="center" >three</TD>
    <TD ALIGN="center" >four</TD>
  </TR>
</TABLE>

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.

The WIDTH="--" Attribute

The width command denotes the width of the cell or width of the table. 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 table. When you use the width attribute with the <TABLE> command, it sets the size of the table in relationship to the page. Please notice the percentage sign is required. Using percentages will allow the table to be an approximate size instead of a fixed size and can grow and shrink as the page itself is resized.

Can I use COLSPAN and ROWSPAN commands together?

Yes. This is where it starts to become tricky:

Here is the code for the above table:

<TABLE WIDTH="500" BORDER="3" ALIGN="center" CELLPADDING="3" CELLSPACING="3">
  <TR>
    <TD COLSPAN="4" ALIGN="center">This cell spans four columns</TD>
  </TR>
  <TR>
    <TD WIDTH="100" ALIGN="center">one </TD>
    <TD WIDTH="200" ALIGN="center" ROWSPAN="2">This cell borders two rows</TD>
    <TD HEIGHT="28"> three</TD>
    <TD WIDTH="100" ALIGN="center">four</TD>
  </TR>
  <TR>
    <TD WIDTH="100" ALIGN="center">two</TD>
    <TD WIDTH="100" ALIGN="center">five</TD>
    <TD WIDTH="100" ALIGN="center">six</TD>
  </TR>
</TABLE>

Again, the best thing to do is to draw out the table before you attempt to create it with HTML commands.

Home	Previous	Next