|
Rowspan
Table cells can be manipulated in a number of ways. One useful thing that
can be done is to allow cells to span other cells either horizontally or
vertically. In this lesson we're going to look at ROWSPAN which allows for
vertical spanning of cells. Study the code for this table to discover how
rowspan allows the cell to the left to span two cells including this cell
and the one below.
|
|
| one |
two |
three |
| four |
| five |
six |
| seven |
|
Working with rowspan (and colspan) can be confusing. Even with the color
coding and the labeling provided in this example of a 4-1-2 table, it may be
difficult to figure out how the code works to produce the table. There are
two keys to pay special attention to. First make sure that you notice the
values supplied to the rowspan attribute and secondly pay attention to the
placement of the TR tags. Notice that there are three TD tags before the
first TR tag and then only one TD before the next TR tag. Next we have two
TD tags before the third TR tag and then one final TD followed by the final
TR. If you look at the top of the cells, you will notice that the tops of
one, two, and three line up. However, the top of four lines up with no other
cell. Therefore, it's the only cell in its table row (TR). The tops of five
and six line up and so they belong in the same table row (TR). Finally seven
is by itself as the only member in its table row (TR).
|
ASSIGNMENT:
Create a 1-2-4 table. Place a large image showing the map of a state in the
USA in the large cell on the left. In the top middle cell list basic info
about the state such as its current population, capital city, current
governor, year that it became a state, and total surface area in square
miles. The bottom middle cell should contain an image of the state flag. In
the four smaller cells on the right side of the table place 1) highest point
in state, 2) state flower, 3) state bird, and 4) state tree.
|