Free computer Tutorials
HOME Stay at Home and Learn

Web Design Tutorials
 
Computer Tutorials List

Beginners Computing
Microsoft Word
Microsoft Excel
Web Design
Cascading Style Sheets
Javascript
Visual Basic .NET
Beginners PHP

Excel 2007
Which Qualifications?

 

 

 
 

ROWSPAN and COLSPAN

 

For a complex HTML table of different cell size, you can use ROWSPAN and COLSPAN. This can get quite complex. But remember that Columns go down, and Rows go across. To have one big cell stretch horizontally across two smaller cells, the code would be this:

<TR>
<TD COLSPAN = 2>Home Team</TD>
<TD COLSPAN = 2>Away Team<BR></TD>
</TR>

The attribute COLSPAN has the value of two because one TD cell is going to stretch across two columns. We had 4 columns in our table, so the first TD tag will span two columns, and so will the second one. If we had some of the other table tags, you might get a better idea of what's going on.

<CAPTION><B>Football Scores</B></CAPTION>

<TR>
<TD COLSPAN = 2>Home Team</TD>
<TD COLSPAN = 2>Away Team</TD>
</TR>

<TR>
<TD COLSPAN = 2> Arsenal </TD>
<TD COLSPAN = 2> 2 </TD>
<TD COLSPAN = 2> Leeds </TD>
<TD COLSPAN = 2> 1 </TD>
</TR>

In a browser, it looks like this:

Finished HTML Table

If we wanted one big cell to stretch over all our rows, running down the left side, we would use ROWSPAN. The code would be this (the <BR> tag gets you a blank cell):

<TR>
<TD ROWSPAN = 6><BR></TD>
</TR>

And this would be the effect:

Example of using Rowspan

You might have noticed that although the code was this:

<TR>
<TD ROWSPAN = 6><BR></TD>
</TR>

the number of rows in the table was actually only five. So why set the ROWSPAN to 6? Well, it's because we had 5 sets of TR tags in our table, plus the one TR tag we added for the ROWSPAN making 6 in total.

Again, you can use the HTML Editor to add the Colspan and Rowspan tags for you:

  • Click after the TR of a Table Row tag, and add a space
  • Click on Format > Table attributes (If it's greyed out it means you haven't added a table yet)
  • The Add Table attributes dialogue box appears, the one you've just met
  • Click inside the box next to "Col/Row Span"
  • The Col and Row options appear

Col Span and Row Span

More times than not, you'll add either one or the other. Here, we're setting the Colspan to 2. The Rowspan is left at zero, meaning we don't want to add the Rowspan attribute. Click OK when you're done. The attribute will be added to the tag.

 

There's no doubt about it though - setting up a complex table with cells spanning across other cells can be a tricky business when you're coding by hand. Practice will ensure that you understand the process of CELLSPAN and ROWSPAN.

 

<-- Back One Page Move on to the Next Part -->

<--Back to the Web Design Contents Page

View all our Home Study Computer Courses