The moon has the consistency of Camembert

Spanning Rows and Columns

Note, that the table above is different than the table in the preceding exercise that it is based on. Two cells now appear to be merged into single cells, one spans across two columns and another spans across tow rows. For example:

• Row 1: There is one cell and it spans three columns.
• Row 2: There are two cells. The left cell (the one with the image in it) spans two columns and the right cell spans a total of three rows going downward.
• Rows 3 & 4: Each row has two cells that do not span any columns or rows. The third column in those rows is actually the second cell of row 2, the one that spans three rows; the rows it spans are rows 2, 3, and 4.

To span a cell across columns or rows, the coder uses the COLSPAN or ROWSPAN attributes of the TD tag. Look at the code for the table above and find the colspan and rowspan attributes. There are two colspans and one rowspan.

You will note that the total number of cells in a row is now determined by the amount of colspans in its cells and whether or not a row above it has a rowspan extending down into that row (rowspans always go down, colspans go to the right).

In the table above, each row has the equivalent of three cells. That is the way tables with spans need to be built. When columns (or rows) are spanned, one cell takes the place of one or more other cells. You need to remove the cell code for the superfluous additional cell(s). Otherwise, the table will not look normal.

As mentioned, the table above is based on the table from the preceding exercise. In that exercise, there were three cells in every row. In the table above, in the top row, the first (and only) cell uses the COLSPAN=3 attribute. It spans across all 3 columns. The other two cells weren't needed anymore, so I removed them. Again, if unneeded cells are not removed, the table will not appear properly.

In the second row, there is a two column span for the cell with the photograph in it. Using COLSPAN=2, that one cell has been stretched so that it now occupies the area formally defined two cells. Unlike the cell in the first row, this COLSPAN does not go all the way across the table; this is a column span of just two columns. After removing the unneeded cell, there are two cells left in that row.

The second cell of the second row has a ROWSPAN=3 in.This causes that cell to stretch down into the two bottom rows. One cell from each of the lower rows had to be removed to accommodate it, leaving just two cells in each of the bottom two rows. Check the code.

A curious thing about the table is that although it appears to have three columns in some rows, in the html code none of the rows has three cells!

Assignment

1. Save this file as G06_yourlastname.html
2. Span the cell that has the caption in it so that it spans across two columns.
3. Remove the one remaining cell in that row. You should end up with just one cell in that row, the cell with the caption. The "third" column of that row is occupied by the rowspan of the second cell in row 2.
4. Save your file. Check it in your browser. Be sure that your table appears normal.
5. Online students: send me your file.

© 2011 Dan Vaughan and its licensors. All rights reserved.