Graphics Programs Reference
In-Depth Information
HTML dei nes three elements that serve to group rows within tables: thead , tbody , and
tfoot . Perhaps unsurprisingly, these represent the head, main body, and footer of the table.
Here's a stripped-down table structure using two of these row groupers.
< thead>
< tr>…< / tr>
</ thead>
< tbody>
< tr>…< / tr>
< tr>…< / tr>
< tr>…< / tr>
< tr>…< / tr>
</ tbody>
</ table>
h ese elements impart more structure to your tables, which is nice from a semantic point of
view, but the nicer thing is that you can use them to uniquely style elements within the table
header as opposed to its main body (see Figure 6-1). h us, you might center column headings
(which live in the thead ) while right-aligning row headings (those in the tbody ).
thead th { text-align : center ;}
tbody th { text-align : right ;}
Figure 6-1: Right- and center-aligning different types of header cells.
Similarly, you could alter the color, background, padding, or any other stylable aspect of the
cells within the respective groups just by referring to the appropriate element.
h e surprising thing about these row-grouping elements is that even if you don't write them
out explicitly, most browsers will create one in the DOM (Document Object Model) anyway
(see Figure 6-2). In such browsers, the following rule will always fail:
table > tr { font-weight : bold ;}
h at's because there's always a tbody between the table and the tr . And it is, specii cally, a
tbody that gets created if no grouping element is written in the source. So you could modify
the preceding rule's selector to be table > tbody > tr and it would match rows in a
table without any row groupers.
Search WWH ::

Custom Search