Follow Techotopia on Twitter

On-line Guides
All Guides
eBook Store
iOS / Android
Linux for Beginners
Office Productivity
Linux Installation
Linux Security
Linux Utilities
Linux Virtualization
Linux Kernel
System/Network Admin
Programming
Scripting Languages
Development Tools
Web Development
GUI Toolkits/Desktop
Databases
Mail Systems
openSolaris
Eclipse Documentation
Techotopia.com
Virtuatopia.com
Answertopia.com

How To Guides
Virtualization
General System Admin
Linux Security
Linux Filesystems
Web Servers
Graphics & Desktop
PC Hardware
Windows
Problem Solutions
Privacy Policy

  




 

 

COLSPAN and ROWSPAN

Table cells can span across more than one column or row. The attributes COLSPAN ("how many across") and ROWSPAN ("how many down") indicate how many columns or rows a cell should take up.

For example, we might want to create header cells for each department in our table of names and phone numbers. In this table, the header cells in the first and fifth rows span across two columns to indicate the department for each group of names.

<TABLE BORDER=2 CELLPADDING=4>
<TR> <TH COLSPAN=2>Production</TH> </TR>
<TR> <TD>Raha Mutisya</TD>      <TD>1493</TD> </TR>
<TR> <TD>Shalom Buraka</TD>     <TD>3829</TD> </TR>
<TR> <TD>Brandy Davis</TD>      <TD>0283</TD> </TR>
<TR> <TH COLSPAN=2>Sales</TH> </TR>
<TR> <TD>Claire Horne</TD>      <TD>4827</TD> </TR>
<TR> <TD>Bruce Eckel</TD>       <TD>7246</TD> </TR>
<TR> <TD>Danny Zeman</TD>       <TD>5689</TD> </TR>
</TABLE>

which gives us:

Production
Raha Mutisya 1493
Shalom Buraka 3829
Brandy Davis 0283
Sales
Claire Horne 4827
Bruce Eckel 7246
Danny Zeman 5689

It often happens with multiple-column cells that a little color helps to set off the headers, giving the table a more visually organized look. Let's add some color to the headers using BGCOLOR.

<TABLE BORDER=2 CELLPADDING=4>
<TR> <TH COLSPAN=2 BGCOLOR="#99CCFF">Production</TH> </TR>
<TR> <TD>Raha Mutisya</TD>      <TD>1493</TD> </TR>
<TR> <TD>Shalom Buraka</TD>     <TD>3829</TD> </TR>
<TR> <TD>Brandy Davis</TD>      <TD>0283</TD> </TR>
<TR> <TH COLSPAN=2 BGCOLOR="#99CCFF">Sales</TH> </TR>
<TR> <TD>Claire Horne</TD>      <TD>4827</TD> </TR>
<TR> <TD>Bruce Eckel</TD>       <TD>7246</TD> </TR>
<TR> <TD>Danny Zeman</TD>       <TD>5689</TD> </TR>
</TABLE>

which gives this table:

Production
Raha Mutisya 1493
Shalom Buraka 3829
Brandy Davis 0283
Sales
Claire Horne 4827
Bruce Eckel 7246
Danny Zeman 5689

ROWSPAN sets how many rows a cell spans. ROWSPAN can get a little confusing because it requires you to think through how the cell affects the rows after the row it starts in. It's particularly useful in this situation to add borders to the table during the design process, even if the table won't ultimately use borders.

This table code creates two header cells which span three rows each:

<TABLE BORDER=2 CELLPADDING=4>
<TR>
    <TH ROWSPAN=3 BGCOLOR="#99CCFF">Production</TH>
    <TD>Raha Mutisya</TD> <TD>1493</TD>
    </TR>
<TR>
    <TD>Shalom Buraka</TD> <TD>3829</TD> 
    </TR>
<TR>
    <TD>Brandy Davis</TD> <TD>0283</TD>
    </TR>
<TR>
    <TH ROWSPAN=3 BGCOLOR="#99CCFF">Sales</TH>
    <TD>Claire Horne</TD> <TD>4827</TD>
    </TR>
<TR>
    <TD>Bruce Eckel</TD> <TD>7246</TD>
    </TR>
<TR>
    <TD>Danny Zeman</TD> <TD>5689</TD>
    </TR>
</TABLE>

which creates

Production Raha Mutisya 1493
Shalom Buraka 3829
Brandy Davis 0283
Sales Claire Horne 4827
Bruce Eckel 7246
Danny Zeman 5689

Note that in the two rows after each header, the first cell in the row ends up in the second column because the first column is taken up by the multi-column cell.

 
 
  Copyright 1997-2002 Idocs inc. Published under the terms of the Open Content License Design by Interspire