shadowline
Caption << Colspan, Rowspan >> Bgcolor, Background, Bordercolor
Creating a cell that "spans" across a number of columns or rows is possible using the COLSPAN and the ROWSPAN properties in a TD (or TH) tag.

These two properties can be a bit confusing, so I'll start off with a simple 2 row 2 column table.

<table>
     <tr>
          <td>
          row 1 cell 1
          </td>
          <td>
          row 1 cell 2
          </td>
     </tr>
     <tr>
          <td>
          row 2 cell 1
          </td>
          <td>
          row 2 cell 2
          </td>
     </tr>
</table>
row 1 cell 1. row 1 cell 2
row 2 cell 1 row 2 cell 2

COLSPAN creates a cell that "spans" across a number of cells in a row. This makes the cell longer across, not down, since it is crossing COLumns, not ROWs.

<table>
     <tr>
          <td>
          row 1 cell 1
          </td>
          <td>
          row 1 cell 2
          </td>
     </tr>
     <tr>
          <td colspan="2">
          row 2 cell 1
          </td>
     </tr>
</table>
row 1 cell 1. row 1 cell 2
row 2 cell 1

You are probably thinking "Hey what happened to the other TD tag set in the second row? I thought you said each row must have the same number of cells in them!". Well, yes that is true, but this is a special circumstance. Since the first cell of the second row is going to take up the room of 2 cells using COLSPAN="2", it also takes the place of the cell in the coding. So that one cell is actually taking up the space of 2 cells.

ROWSPAN is very similar to COLSPAN, but it works in the opposite direction. While COLSPAN goes across columns, ROWSPAN goes across rows. Taking the simple 2 row 2 column table from above, here is an example with ROWSPAN in place.

<table>
     <tr>
          <td rowspan="2">
          row 1 cell 1
          </td>
          <td>
          row 1 cell 2
          </td>
     </tr>
     <tr>
          <td>
          row 2 cell 2
          </td>
     </tr>
</table>
row 1 cell 1 row 1 cell 2
row 2 cell 2

Now you would think being a ROWSPAN, it would take away one of the ROW tag sets. BZZZZ WRONG. Both ROWSPAN and COLSPAN are properties of the TD tag, thus it is the TD tag sets that are going to be involved.

Have a look at that coding above. The first cell of the second row is gone. This is because the first cell of the first row is using that space via the ROWSPAN.

No matter how many SPANS there are, the coding should always work out. It is always easier to draw out (yes, with ordinary pencil and paper) the TABLE you want to create, then do the codes from there. That way you have a solid visual of what you are trying to do.
Caption << Colspan, Rowspan >> Bgcolor, Background, Bordercolor
shadow

Advertise in the banner along the top, Click here!

Valid XHTML 1.0 Transitional Valid CSS! Text Link Ads
shadow
shadow