Back to index

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.