Working with Tables and Columns - HTML, CSS, and Dynamic HTML - page 328

Creating a Spanning Cell
• To create a table cell that spans several columns, add the attribute

colspan=” columns ”
to the cell, where columns is the number of columns covered by the cell.
• To create a table cell that spans several rows, add the attribute

rowspan=” rows ”

to the cell, where rows is the number of rows covered by the cell.

To see how column-spanning cells work, you'll replace the cells for the National
News and Local News programs that currently occupy seven cells each with a single cell
spanning seven columns in each row.

To create cells that span several columns:

◗

1. Return to the schedule.htm file in your text editor and add the attribute You must remove table

cells from the table row
when you add a cell that
spans several columns
or else the cell contents
won't align properly
within the columns.

colspan=”7”
to the second table cell in both the second and third rows of the table.

◗

2. Delete the remaining six table cells in both the second and third table rows.
Figure 5-10 shows the revised code for the schedule table.

Figure 5-10 Marking cells to span several columns

remaining six cells
in each row deleted

each cell sp ans
seven columns

◗

3. Save your changes to the file, and then refresh the schedule.htm file in your Web
browser. Figure 5-11 shows the revised appearance of the Web table.