HTML and CSS Reference
h e term complex implies tables that are dii cult to understand. Actually, complex tables are
solutions to tricky problems. If you're using tables to organize data coming out of a database,
chances are good that you can use a pretty standard table with a measured set of rows and
columns all the same size.
When you begin to use a table to display data for just about anything, including data coming
from a database, you may encounter situations in which something happens to change the
neat set of rows and columns, and you have to make adjustments to i t more into a single row
or column than originally planned.
In order to understand complex tables, you need to understand the idea of a cell. A table is
nothing more than a collection of cells ordered into rows and columns. h e intersection of a
column and row is the cell. In HTML5, you create cells using the <td> and <th> tags. Figure
6-2, earlier in this chapter, shows basic cells organized into rows and columns.
USING THE ROWSPAN AND COLSPAN ATTRIBUTES
To change a cell's default characteristic of an intersection between a single row and column,
you need to use a td element's attributes, rowspan and/or colspan . Each attribute is
assigned a positive integer value that expands a cell to cover multiple rows or columns. Figure
6-6 shows a standard table made up of equal-size cells and a comparative table with expanded
rows and columns.
Figure 6-6: A table with equal-size cells and a table with rowspan and colspan .
Figure 6-6 shows that the i rst cell in Row 2 in the bottom table took up the space of three
cells in Row 2 in the top table. In Col 5 of the bottom table, both Row 1 and Row 2 were