Styling Tables - Beginning CSS3

HTML and CSS Reference

In-Depth Information

Figure 14-3. By default, table captions are displayed above the table

■ The <caption> element must come immediately after the opening <table> tag, even if you want to

display the caption below the table.

Caution

Defining Table Columns

HTML tables are constructed as a series of table rows rather than columns. The column structure is simply

implied by the cells stacked on top of one another in each row. However, you can also define columns in the

HTML markup by adding one or more <colgroup> elements immediately after the table caption. If the table

doesn't have a caption, the <colgroup> elements come immediately after the opening <table> tag. A <colgroup>

can optionally contain <col> elements to identify individual columns.

The <colgroup> and <col> elements are not displayed. They're used purely to identify column groups or

individual columns for layout and styling. In HTML 4.01 and XHTML 1.0, you can use the align , valign , and

width attributes in both tags to control the horizontal and vertical alignment and width of all cells within a

column group or column. However, these attributes are no longer valid in HTML5.

■ All browsers—even as far back as iE 4—support <colgroup> and <col> . Although they've been around

for a long time, these elements are rarely used. i've included them here because they occupy a position in the order

browsers construct tables, as described in “How browsers lay Out Tables” later in this chapter.

Note

You specify the number of columns in the group with the span attribute. So, let's say you have a five-column

table, and you use the first column for labels and the remaining columns for data, you could style the column

groups using classes like this:

Alternatively, you can list individual columns using <col> tags inside <colgroup> tags like this:

</colgroup>

Search WWH ::

Custom Search

Home