[ Pobierz całość w formacie PDF ]
.
. 262
17.6.2 The collapsing border model
.
.
.
.
.
.
.
. 263
Border conflict resolution
.
.
.
.
.
.
.
.
. 264
17.6.3 Border styles .
.
.
.
.
.
.
.
.
.
.
. 266
17.7 Audio rendering of tables
.
.
.
.
.
.
.
.
.
. 267
17.7.1 Speaking headers: the ’speak-header’ property
.
.
. 267
17.1 Introduction to tables
Tables represent relationships between data. Authors specify these relationships
in the document language [p. 30] and specify their presentation in CSS, in two
ways: visually and aurally.
Authors may specify the visual formatting of a table as a rectangular grid of
cells. Rows and columns of cells may be organized into row groups and column
groups. Rows, columns, row groups, row columns, and cells may have borders
drawn around them (there are two border models in CSS2). Authors may align
data vertically or horizontally within a cell and align data in all cells of a row or
column.
Authors may also specify the aural rendering of a table; how headers and data
will be spoken. In the document language, authors may label cells and groups of
cells so that when rendered aurally, cell headers are spoken before cell data. In
effect, this "serializes" the table: users browsing the table aurally hear a
sequence of headers followed by data.
245
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Example(s):
Here is a simple three-row, three-column table described in HTML 4.0:
TABLE
CAPTIONThis is a simple 3x3 table/CAPTION
TR id="row1"
THHeader 1 TDCell 1
TDCell 2
TR id="row2"
THHeader 2 TDCell 3
TDCell 4
TR id="row3"
THHeader 3 TDCell 5
TDCell 6
/TABLE
This code creates one table (the TABLE element), three rows (the TR
elements), three header cells (the TH elements), and six data cells (the TD
elements). Note that the three columns of this example are specified implicitly:
there are as many columns in the table as required by header and data cells.
The following CSS rule centers the text horizontally in the header cells and
present the data with a bold font weight:
TH { text-align: center; font-weight: bold }
The next rules align the text of the header cells on their baseline and vertically
centers the text in each data cell:
TH { vertical-align: baseline }
TD { vertical-align: middle }
The next rules specify that the top row will be surrounded by a 3px solid blue
border and each of the other rows will be surrounded by a 1px solid black border:
TABLE { border-collapse: collapse }
TR#row1 { border-top: 3px solid blue }
TR#row2 { border-top: 1px solid black }
TR#row3 { border-top: 1px solid black }
Note, however, that the borders around the rows overlap where the rows meet.
What color (black or blue) and thickness (1px or 3px) will the border between
row1 and row2 be? We discuss this in the section on border conflict resolution.
[p. 264]
The following rule puts the table caption above the table:
CAPTION { caption-side: top }
Finally, the following rule specifies that, when rendered aurally, each row of
data is to be spoken as a "Header, Data, Data":
TH { speak-header: once }
For instance, the first row would be spoken "Header1 Cell1 Cell2". On the
other hand, with the following rule:
TH { speak-header: always }
it would be spoken "Header1 Cell1 Header1 Cell2".
The preceding example shows how CSS works with HTML 4.0 elements; in
HTML 4.0, the semantics of the various table elements (TABLE, CAPTION,
THEAD, TBODY, TFOOT, COL, COLGROUP, TH, and TD) are well-defined. In
246
other document languages (such as XML applications), there may not be
pre-defined table elements. Therefore, CSS2 allows authors to "map" document
language elements to table elements via the ’display’ property. For example, the
following rule makes the FOO element act like an HTML TABLE element and the
BAR element act like a CAPTION element:
FOO { display : table }
BAR { display : table-caption }
We discuss the various table elements in the following section. In this specifi-
cation, the term table element refers to any element involved in the creation of a
table. An "internal" table element is one that produces a row, row group, column,
column group, or cell.
17.2 The CSS table model
The CSS table model is based on the HTML 4.0 table model, in which the struc-
ture of a table closely parallels the visual layout of the table. In this model, a table
consists of an optional caption and any number of rows of cells. The table model
is said to be "row primary" since authors specify rows, not columns, explicitly in
the document language. Columns are derived once all the rows have been speci-
fied -- the first cell of each row belongs to the first column, the second to the
second column, etc.). Rows and columns may be grouped structurally and this
grouping reflected in presentation (e.g., a border may be drawn around a group
of rows).
Thus, the table model consists of tables, captions, rows, row groups, columns,
column groups, and cells.
The CSS model does not require that the document language [p. 30] include
elements that correspond to each of these components. For document
languages (such as XML applications) that do not have pre-defined table
elements, authors must map document language elements to table elements;
this is done with the ’display’ property. The following ’display’ values assign table
semantics to an arbitrary element:
table (In HTML: TABLE)
Specifies that an element defines a block-level [p. 97] table: it is a rectangu-
lar block that participates in a block formatting context [p. 105] .
inline-table (In HTML: TABLE)
Specifies that an element defines an inline-level [p. 98] table: it is a rectan-
gular block that participates in an inline formatting context [p. 105] ).
table-row (In HTML: TR)
Specifies that an element is a row of cells.
table-row-group (In HTML: TBODY)
Specifies that an element groups one or more rows.
table-header-group (In HTML: THEAD)
Like ’table-row-group’, but for visual formatting, the row group is always
displayed before all other rows and rowgroups and after any top captions.
Print user agents may repeat footer rows on each page spanned by a table.
table-footer-group (In HTML: TFOOT)
Like ’table-row-group’, but for visual formatting, the row group is always
displayed after all other rows and rowgroups and before any bottom
247
captions. Print user agents may repeat footer rows on each page spanned
by a table.
table-column (In HTML: COL)
Specifies that an element describes a column of cells.
table-column-group (In HTML: COLGROUP)
Specifies that an element groups one or more columns.
table-cell (In HTML: TD, TH)
Specifies that an element represents a table cell.
table-caption (In HTML: CAPTION)
Specifies a caption for the table.
Elements with ’display’ set to ’table-column’ or ’table-column-group’ are not
rendered (exactly as if they had ’display: none’), but they are useful, because
[ Pobierz całość w formacie PDF ]