Spanning columns and rows

Sometimes you'll want to apply a heading across several cells. In other cases, you may need one cell to span more than one row. You can do so using the colspan="n" or rowspan="n" attributes in the <th> or <td> tags, where n is the number of columns or rows you want to span.

<table align="right" width="50%" cellspacing="10" border="1" bgcolor="#FFCC99">

<tr><th colspan="3" bgcolor="#00CCCC">Conservation Center Activity Schedule</th></tr>
<tr><td rowspan="4" bgcolor="cyan"><img src="pine.gif"></td>
<th bgcolor="#00CCCC">Date</th><th bgcolor="#00CCCC">Activities</th></tr>
<tr bgcolor="cyan"><td>June 17</td><td>Discussion of Nature Photography at 8:00 p.m. at the Redwood Conference Center.</td></tr>
<tr bgcolor="cyan"><td>June 23</td><td>Naturelands hike. Bring water and comfortable hiking shoes. Meet at the head of the Ansel trail at 12:00
p.m.</td></tr>
<tr bgcolor="cyan"><td>July 12</td><td>The movie <i>Born Free</i> will screen in the Marsh Auditorium at 7:30 p.m. Children are welcome</td></tr>

</table>

Conservation Center Activity Schedule
	Date	Activities
	June 17	Discussion of Nature Photography at 8:00 p.m. at the Redwood Conference Center.
	June 23	Naturelands hike. Bring water and comfortable hiking shoes. Meet at the head of the Ansel trail at 12:00 p.m.
	July 12	The movie Born Free will screen in the Marsh Auditorium at 7:30 p.m. Children are welcome

Practice spanning

Download the photo shown in the table below.

Edit the table you made previously so that it looks like the one shown using the colspan and rowspan attributes appropriately.

NOTE: Replace the caption tag with a row that spans 3 columns.

Save the file and refresh the browser.

Tour Packages
Destination	Description
Tahiti	You will enjoy five fun-filled nights among the Tahitian islands. The first night will be spent in Tahiti. Nights two and three will be spent on Bora Bora. On night four, you will enjoy a sumptuous feast on Moorea. Your final night will be spent on the water off the island of Tahiti.
Virgin Islands	For this tour, the cruise ship will be your hotel. Stops are made at several of the most beautiful islands. Nights you will enjoy the sound of Carribean festival music as you dine oat our 24 hour buffet.

Nesting tables

By inserting one table into another, called nesting, you can achieve much more control over layout and positioning as well as overcome some of the HTML table limitations.

<table width=50% bgcolor="yellow" border="1" align="right">

<tr><td width="50%">This is the outer table</td>
<td>&nbsp;</td>
</tr>
<tr><td>&nbsp;</td>
<td>
<table width=80% bgcolor="white" border=1" cols="2" align="center">
<tr><td width="50%">This is the inner table</td>
<td>&nbsp;</td>
</tr>
<tr><td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

</td>
</tr>
<tr><td>&nbsp;</td>
<td>&nbsp;</td>
</tr>

</table>

This is the outer table
	This is the inner table

 

Practice nesting tables

A add new tables to your document that look like the ones shown below by nesting them appropriately.

Save the file and refresh the browser.

Tour Packages
Destination	Description
Tahiti	You will enjoy five fun-filled nights among the Tahitian islands. The first night will be spent in Tahiti. Nights two and three will be spent on Bora Bora. On night four, you will enjoy a sumptuous feast on Moorea. Your final night will be spent on the water off the island of Tahiti.	Duration Five nights Cost $899
Virgin Islands	For this tour, the cruise ship will be your hotel. Stops are made at several of the most beautiful islands. Nights you will enjoy the sound of Carribean festival music as you dine at our 24 hour buffet.	Duration Nine nights Cost $1499

Click here to view the solution

It should be clear that tables allow you to present information that naturally lends itself to tabular format. However, tables are also commonly used to define the entire page structure. By placing all of your page content into a table, you have much greater control over the page renders in the browser, particularly at various screen resolutions. It can be as simple as creating a single table with a single row and data cell immediately following the body tag, or complex by spanning rows and columns or nesting multiple tables.

Convert a Page to Table Layout and Experiment

Click here to view a page without tables.

Change your screen resolution higher or lower depending on your current settings.

Examine the source code.

View the file again in NS and IE. What do you observe?

Click here to view the same page using tables.

Examine the source code.

Change your resolution back to its original setting.

View the file again in NS and IE. What do you observe?