JavaScript EditorBest javascript editor debugger     Ajax website 
↑


Main Page

Previous Page
Next Page

Spanning a Cell across Columns

With a table, it's often useful to straddle or span one cell across a few columns. For example, with multicolumn text, you could span a headline across the columns of text.

Figure 16.45. The lower table now has two rows. The first row contains the left navigation cell and the main content cell. The second row contains a single cell with copyright information that spans both columns.


To span a cell across two columns:

1.
When you get to the point in which you need to define the cell that spans more than one column, type <td.

Figure 16.46. The copyright row at the bottom spans both columns.

[View full size image]


2.
Type colspan="n">, where n equals the number of columns the cell should span.

3.
Type the cell's contents.

4.
Type </td>.

5.
Complete the rest of the table. If you create a cell that spans 2 columns, you will need to define one less cell in that row. If you create a cell that spans 3 columns, you will define two less cells for the row. And so on.

Tips

  • Each row in a table must have the same number of cells defined. Cells that span across columns count for as many cells as the value of their colspan attribute.

  • Writing the (X)HTML code for a table from scratch is, uh, challengingespecially when you start spanning columns and rows. It helps to sketch it out on paper first, as described on page 228, to get a handle on which information goes in which row and column. Or you can cheat and use a Web page authoring program like Dreamweaver to get started. You can always open the file and edit the (X)HTML by hand later.

  • There is no CSS alternative for colspan.



Previous Page
Next Page


JavaScript EditorBest javascript editor debugger     Ajax website 
→