Foundation HTML5 with CSS3

Building Tables

Required Attributes

There are no required attributes for the caption element.

Optional Attributes

There are no additional optional attributes for the caption element other than the global attributes.

Styling Tables with CSS

Tables, when processed by CSS, conform to a complicated set of algorithms referred to in the CSS

specification as the CSS table model. The CSS table model defines special display characteristics for each

of the elements within a table.

If you’d like to read through the CSS table model yourself, you can find it in the W3C’s

CSS specification at w3.org/TR/CSS21/tables.html.

You’re most familiar at this point with two possible values of the CSS display property: block and

inline. Unfortunately, tables in HTML don’t fit neatly into either of these categories. Thus, a handful of

display property values exist that apply specifically to tables. The list of these property values includes:

 table

 inline-table

 table-header-group

 table-row-group

 table-footer-group

 table-row

 table-cell

 table-column

 table-column-group

 table-caption

As you can see from the list above, the property values map pretty closely in naming to the elements

we’ve introduced in this chapter. In the examples in this section, we’ll be building up a data table featuring

a list of products for our favorite super hero supply store, Power Outfitters.

Styling Rows and Cells

We’ll begin with the basic table shown in Listing 7-21.