HTML and CSS Reference
In-Depth Information
.
Output
FIGURE 10.30
The class sched-
ule with formatted
column groups.
Grouping and Aligning Rows
Now that you know how to group and format columns, let's turn to the rows. You can
group the rows of a table into three sections: table heading, table footer, and table body.
You can modify CSS properties to emphasize the table heading and table footer and give
the body of the table a different appearance.
The table header, footer, and body sections are defined by the
<thead>
,
<tfoot>
, and
<tbody>
elements, respectively. Each of these elements must contain the same number of
columns.
The
<thead>...</thead>
element defines the heading of the table, which should contain
information about the columns in the body of the table. Typically, this is the same type of
information that you've been placing within header cells so far in the lesson. The starting
<thead>
tag is always required when you want to include a head section in your table, as
is the closing
</thead>
tag under XHTML 1.0.
The head of the table appears right after the
<table>
element or after
<colgroup>
ele-
ments, as the following example shows, and must include at least one row group defined
by the
<tr>
element. I'm including
style
attributes in the row grouping tags to illustrate
how they are used. The table is formatted as follows:
Input
▼
<table border=“1” width=“100%” summary=“Science and Mathematic Class Schedules”>
<caption><b>
Science and Mathematic Class Schedules
</b></caption>
<colgroup width=“20%” align=“center” valign=“top”>
<colgroup span=“2” width=“40%” valign=“top”>
<thead style=“color: red”>
<tr>
