Foundation HTML5 with CSS3

Building Tables

tfoot th {

text-align: left;

}

#quantity-column {

width: 200px;

}

#price-column {

background: #ddd;

}

Rendering the code from the previous two listings in a browser should look something like Figure 7-13.

Figure 7-13. That ominous-looking thing above the table? That’s the caption element in action.

The caption-side property

The caption-side property accepts one of three possible values: top, bottom, and inherit. As most

browsers default to a value of top, you can safely leave out the caption-side declaration if you prefer to

let your table captions ride high. If, however, you want to reposition your table captions, simply supply the

table-caption property with a value of bottom and the caption moves below the table: