HTML and CSS Reference
In-Depth Information
COMPLEX TABLES
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.
120
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
