Table colspan and rowspan

Section 1 - Introduction
Section 2 - Basics
Section 3 - Next Level
      Lists
      Basic Tables
         Table basics
         Rows and data
         Borders
         Width
         Cellpadding & spacing
         Alignment
         Rowspan & colspan
         You Try It
      Advanced Text
      Marquee
      Meta
      Sounds
      Comments
Section 4 - Advanced
Section 5 - Publishing
Section 6 - Extras
Appendices

Colspan and Rowspan
TAGS USED: <td colspan=""> and <td rowspan="">

Area #1	Area #2
Area #3
Area #4

Notice how the cells on this table have different sizes. Area #2 is two rows wide and area #4 is two columns wide. This makes for a highly variable table. In this lesson you will learn how to make sections of your table wider or longer to fit your needs.

Rowspan:
The command to make a long cell (like Area #2) that crosses several rows is done through the "rowspan" command. This is contained within the <td> tag.

You'll notice a number after the rowspan. That number tells the computer how many rows long to make the cell. The tag up above will make a single cell that spans 3 rows. It looks like this:

Code
<table border=1 bordercolor="006600"> <tr> <td>Cell A </td> <td rowspan=3>Cell B </td> <td>Cell C </td> </tr> <tr> <td> Cell D </td> <td>Cell E </td> </tr> <tr> <td>Cell F </td> <td>Cell G </td> </tr> </table>

What you see

Cell A	Cell B	Cell C
Cell D		Cell E
Cell F		Cell G

Cell B is three rows long. This is very useful when you need a longer space in your table. But what do you do if you need a wider space? You would use the "colspan" command.

Colspan:
Making wider areas on the table is done by spanning columns. This is done the same way as the rowspan command. It is contained within the <td> tag. Here's a table using the colspan command:

Code
<table border=1> <tr> <td>Cell A </td> <td>Cell B </td> <td>Cell C </td> </tr> <tr> <td colspan=3> Cell D </td> </tr> <tr> <td>Cell E </td> <td>Cell F </td> <td>Cell G </td> </tr> </table>

What you see

Cell A	Cell B	Cell C
Cell D
Cell E	Cell F	Cell G

You can use these tags together, even in the same tag. Also, alignment and other commands are usable. Try this out:

Code

What you see

*		*		*		*		*		*
	*		*		*		*		*
*		*		*		*		*		*
	*		*		*		*		*
*		*		*		*		*		*