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


bar



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 columnand The Two Pillars to support our structure.

Width=14 Height=303		left column




bar



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 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>
  1. <tr><td align=center colspan=5>This cell spans all 5</td></tr>
  2. <tr><td>Cell 1</td><td colspan=3>This cell spans cells 2, 3 and 4</td><td>Cell 5</td></tr>
  3. <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




bar



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>
  1. <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>
  2. <tr><td>Row 2 cell 1</td>
    <td>Row 2 cell 2</td></tr>
  3. <tr><td>Row 3 cell 1</td>
    <td>Row 3 cell 2</td></tr>
  4. <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




bar



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>
roof


Then they added the Left Pillar

roof
column


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

roof
column window left window centerwindow right  


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.

roof
column window left window centerwindow right right column


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

roof
column window left window centerwindow right right column
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
There
is
no
way
we
can		3 stoogesHold
this
up
with
our
heads
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.


  1. <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>
  2. <tr><td colspan=3><img src="span/facade-moe.gif" width=341 height=23></td></tr>
  3. <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>
  4. <tr><td colspan=3><img src="span/facade-larry.gif" width=341 height=23></td></tr>
  5. <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>
  6. <tr><td colspan=3><img src="span/facade-curly.gif" width=341 height=23></td></tr>



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



bar



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, and the Up Key will take you to the Top of the page.


  0.Home

  1.Tools

  2.hex #'s

  3.Tags

  4.Color's

  back  Back


calculator

 5.Basic

 6.Tripod

 7.C & P

 8.Testbed

 9.Images

 Up  top

Prof Strollling
The Professor