The Professor teaches Rowspan and Colspan

vspacer
Colspan and Rowspan Table Lesson

ThesearecellsinaRow
are    row

span

is

five
cells    
in    
a    
Column    
Column Span (colspan) is Six

vspacer
The Professor was vacationing in Spain when he saw this fine Hacienda that was due for demolition.

main building

Wow he thought :"This would be a great way to build a three storey Condo and to demonstrate Rowspan and Colspan if I could get some of this shipped home."

Finally, after some intense negotiation, The Professor was able to arrange for shipment of the key components that are going to used in this demonstration.

The Roof

Width=367 Height=28

roof

The

left window

W=141 H=78

Three

center window

W=59 H=78

 Windows

right window

W=141 H=78

The Facade

Width=341 Height=23

facade

to separate the three floors that we are going to construct,
right column and The Two Pillars to support our structure.

Width=14 Height=303

left column

The concepts expressed here are for the advanced table student. The only limit is your own creativity once they have been mastered.
Two important attributes of a <TD> cell are colspan and rowspan.

colspan

Colspan informs the browser how many cells (columns) the <TD> cell is to span. This attribute is placed in the cell that you want to span with. As an example

<table cellpadding=5 cellspacing=3 border=2>
<tr><td align=center colspan=5> This cell spans all 5</td></tr>
<tr><td>Cell 1</td><td colspan=3>This cell spans cells 2, 3 and 4</td>
<td>Cell 5</td></tr>
<tr><td>Cell 1</td><td align=center>Cell 2</td><td align=center>Cell 3</td>
<td align=center>Cell 4</td><td>Cell 5</td></tr></table>
This cell spans all 5
Cell 1This cell spans cells 2, 3 and 4Cell 5
Cell 1Cell 2Cell 3 Cell 4Cell 5


rowspan




Rowspan informs the browser how many rows the <TD> cell is to span. This attribute is placed in the cell that you want to span with. As an example.


<table cellpadding=5 cellspacing=3 border=3>
<tr><td>Row 1 cell 1</td>
<td>Row 1 cell 2</td>
<td rowspan=4 align=center>Cell 3<p>
in<p>Row 1<p>Spans<p>4<p>Rows</td></tr>
<tr><td>Row 2 cell 1</td>
<td>Row 2 cell 2</td></tr>
<tr><td>Row 3 cell 1</td>
<td>Row 3 cell 2</td></tr>
<tr><td>Row 4 cell 1</td>
<td>Row 4 cell 2</td> </tr></table>
Row 1 cell 1Row 1 cell 2Cell 3
in
Row 1
Spans
4
Rows
Row 2 cell 1Row 2 cell 2
Row 3 cell 1Row 3 cell 2
Row 4 cell 1Row 4 cell 2



One of the things that The Professor was able to negotiate for in Spain was for the use of an experienced Condo Construction Crew. They assured The Professor, after studying the plans, that they would be able to complete the project and on budget. They were so convincing that The Professor decided to let them use there heads and gave them the go ahead.

Well they got the roof up ok.

<table cellpadding=0 cellspacing=0 border=0>
<tr><td colspan=5><img src="span/roof.gif" width=367 height=28></td>
roof


Then they added the Left Pillar

<tr><td colspan=5><img src="span/roof.gif" width=367 height=28 alt="roof"></td></tr>
<tr><td rowspan=6><img src="span/column-L.gif" width=14 height=303></td>
roof


Everything was going smoothly as they worked feverishly to assemble the windows. Now all they had to do was attach them to the pillar.

<tr><td colspan=5><img src="span/roof.gif" width=367 height=28 alt="roof"></td></tr>
<tr><td rowspan=6><img src="span/column-L.gif" width=14 height=303></td>
<td><img src="span/window-L.gif" width=141 height=78></td>
<td><img src="span/window-c.gif" width=59 height=78></td>
<td><img src="span/window-R.gif" width=141 height=78></td>
roof
column spacer column
window left window centerwindow right
spacer


Standing back to admire their work, they could see a problem developing. Maybe if they got the Right Pillar up things would sort themselves out.

<tr><td colspan=5><img src="span/roof.gif" width=367 height=28 alt="roof"></td></tr>
<tr>&<td rowspan=6><img src="span/column-L.gif" width=14 height=303></td>
<td><img src="span/window-L.gif" width=141 height=78></td>
<td><img src="span/window-c.gif" width=59 height=78></td>
<td><img src="span/window-R.gif" width=141 height=78></td>
<td rowspan=6><img src="span/column-R.gif" width=14 height=303></td></tr>
roof
column sacer column
window left window centerwindow right
spacer


Well at least things didn't get worse. Looking over the plans they could see that something was missing. "Ahah!!!!"They exclaimed!! "The Facade is missing."

<tr><td colspan=5><img src="span/roof.gif" width=367 height=28 alt="roof"></td></tr>
<tr><td rowspan=6><img src="span/column-L.gif" width=14 height=303></td>
<td><img src="span/window-L.gif" width=141 height=78></td>
<td><img src="span/window-c.gif" width=59 height=78></td>
<td><img src="span/window-R.gif" width=141 height=78></td>
<td rowspan=6><img src="span/column-R.gif" width=14 height=303></td></tr>
<tr><td colspan=3><img src="span/facade.gif" width=341 height=23></td></tr>
roof
column spacer column
window left window centerwindow right
facade



Remembering what The Prof had said, they decided to try again and this time use their heads and to heck with the plans.


roof
left columnleft windowcenter windowright windowright column
facade
C
O
N
D
O		3 stooges P
L
A
N
condo construction crew



The Professor could see that his Crew was starting to get a little exasperated. Being the kind and patient soul he is, The Professor took the crew aside and pointed out to them that the plans called for a Three Storey Condo!!!! with Three window sections and Three facades for a total of Six rows. The roof was to be assigned it's own row and was to span the Condo. This time he promised them their own units if they were successful.


<table cellpadding=0 cellspacing=0 border=0>
<tr><td colspan=5><img src="span/roof.gif" width=367 height=28 alt="roof"></td></tr>
<tr><td rowspan=6><img src="span/column-L.gif" width=14 height=303></td>
<td><img src="span/window-L.gif" width=141 height=78></td>
<td><img src="span/window-c-moe.gif" width=59 height=78></td>
<td><img src="span/window-R.gif" width=141 height=78></td>
<td rowspan=6><img src="span/column-R.gif" width=14 height=303></td></tr>
<tr><td colspan=3><img src="span/facade-moe.gif" width=341 height=23></td></tr>
<tr><td><img src="span/window-L.gif" width=141 height=78></td>
<td><img src="span/window-c-larry.gif" width=59 height=78></td>
<td><img src="span/window-R.gif" width=141 height=78></td></tr>
<tr><td colspan=3><img src="span/facade-larry.gif" width=341 height=23></td></tr>
<tr><td><img src="span/window-L.gif" width=141 height=78></td>
<td><img src="span/window-c-curly.gif" width=59 height=78></td>
<td><img src="span/window-R.gif" width=141 height=78></td></tr>
<tr><td colspan=3><img src="span/facade-curly.gif" width=341 height=23></td></tr></table>
roof
left column left windowmoe center windowright windowright column
moe's unit
left windowlarry center windowright window
larry's unit
left windowcurly center windowright window
curly's unit




Thank you for visting this tutorial. The Professor hopes that you will find this information useful in designing your tables.

Feel free to select any keys on the calculator.
The Down key will take you back to The Basic Table Structure, Table Lesson No 4
The Up Key will take you to the Top of the page.


0. Home

1. Tools

2. Color list

3. Page analyzer

4. Color Cube

Back back
calculator

5. Basic Css

6. Image Mapper

7. C & P

8. Testbed

9. Image sizer

 Up  top

Prof Strollling
The Professor

Valid CSS!