📄 tables.html
字号:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html lang="en"><head><meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1"><title>Tables</title><link rel="stylesheet" href="style/default.css" type="text/css"><link rel="prev" href="text.html"><link rel="next" href="ui.html"><link rel="contents" href="cover.html#minitoc"><link rel="CSS-properties" href="propidx.html" title="properties"><link rel="index" href="indexlist.html" title="index"></head><body><div class="navbar" align="center"><p><a href="text.html">previous</a> <a href="ui.html">next</a> <a href="cover.html#minitoc">contents</a> <a href="propidx.html">properties</a> <a href="indexlist.html">index</a> </div><hr class="navbar"><h1 align="center">17 <a name="visual-tables">Tables</a></h1><div class="subtoc"><p><strong>Contents</strong> <ul class="toc"> <li class="tocline2"><a href="tables.html#q1" class="tocxref">17.1 Introduction to tables</a> <li class="tocline2"><a href="tables.html#q2" class="tocxref">17.2 The CSS table model</a> <ul class="toc"> <li class="tocline3"><a href="tables.html#anonymous-boxes" class="tocxref">17.2.1 Anonymous table objects</a> </ul> <li class="tocline2"><a href="tables.html#q4" class="tocxref">17.3 Column selectors</a> <li class="tocline2"><a href="tables.html#q5" class="tocxref">17.4 Tables in the visual formatting model</a> <ul class="toc"> <li class="tocline3"><a href="tables.html#q6" class="tocxref">17.4.1 Caption position and alignment</a> </ul> <li class="tocline2"><a href="tables.html#q7" class="tocxref">17.5 Visual layout of table contents</a> <ul class="toc"> <li class="tocline3"><a href="tables.html#table-layers" class="tocxref">17.5.1 Table layers and transparency</a> <li class="tocline3"><a href="tables.html#width-layout" class="tocxref">17.5.2 Table width algorithms: the <span class="propinst-table-layout">'table-layout'</span> property</a> <ul class="toc"> <li class="tocline4"><a href="tables.html#fixed-table-layout" class="tocxref"> Fixed table layout</a> <li class="tocline4"><a href="tables.html#auto-table-layout" class="tocxref"> Automatic table layout</a> </ul> <li class="tocline3"><a href="tables.html#height-layout" class="tocxref">17.5.3 Table height algorithms</a> <li class="tocline3"><a href="tables.html#column-alignment" class="tocxref">17.5.4 Horizontal alignment in a column</a> <li class="tocline3"><a href="tables.html#dynamic-effects" class="tocxref">17.5.5 Dynamic row and column effects</a> </ul> <li class="tocline2"><a href="tables.html#borders" class="tocxref">17.6 Borders</a> <ul class="toc"> <li class="tocline3"><a href="tables.html#separated-borders" class="tocxref">17.6.1 The separated borders model</a> <ul class="toc"> <li class="tocline4"><a href="tables.html#empty-cells" class="tocxref"> Borders around empty cells: the <span class="propinst-empty-cells">'empty-cells'</span> property</a> </ul> <li class="tocline3"><a href="tables.html#collapsing-borders" class="tocxref">17.6.2 The collapsing border model</a> <ul class="toc"> <li class="tocline4"><a href="tables.html#border-conflict-resolution" class="tocxref"> Border conflict resolution</a> </ul> <li class="tocline3"><a href="tables.html#q20" class="tocxref">17.6.3 Border styles</a> </ul> <li class="tocline2"><a href="tables.html#q21" class="tocxref">17.7 Audio rendering of tables</a> <ul class="toc"> <li class="tocline3"><a href="tables.html#speak-headers" class="tocxref">17.7.1 Speaking headers: the <span class="propinst-speak-header">'speak-header'</span> property</a> </ul> </ul></div><h2><a name="q1">17.1 Introduction to tables</a></h2><p><a name="x0"><span class="index-def" title="tables">Tables</span></a> representrelationships between data. Authors specify these relationships in the<a href="conform.html#doclanguage">document language</a> and specifytheir <em>presentation</em> in CSS, in two ways: visually and aurally.<P>Authors may specify the visual formatting of a table as arectangular grid of cells. Rows and columns of cells may be organizedinto row groups and column groups. Rows, columns, row groups, rowcolumns, and cells may have borders drawn around them (there are twoborder models in CSS2). Authors may align data vertically orhorizontally within a cell and align data in all cells of a row orcolumn.<P>Authors may also specify the aural rendering of a table; howheaders and data will be spoken. In the document language, authors maylabel cells and groups of cells so that when rendered aurally, cellheaders are spoken before cell data. In effect, this "serializes" thetable: users browsing the table aurally hear a sequence of headersfollowed by data.<div class="example"><P style="display:none">Example(s):</P><P>Here is a simple three-row, three-column table described in HTML 4.0:<PRE class="html-example"><TABLE><CAPTION>This is a simple 3x3 table</CAPTION><TR id="row1"> <TH>Header 1 <TD>Cell 1 <TD>Cell 2<TR id="row2"> <TH>Header 2 <TD>Cell 3 <TD>Cell 4<TR id="row3"> <TH>Header 3 <TD>Cell 5 <TD>Cell 6</TABLE></PRE><P>This code creates one table (the TABLE element), threerows (the TR elements), three header cells (the TH elements),and six data cells (the TD elements). Note that the three columnsof this example are specified implicitly: there are as manycolumns in the table as required by header and data cells.<P>The following CSS rule centers the text horizontallyin the header cells and present the data with a bold font weight:</P><PRE>TH { text-align: center; font-weight: bold }</PRE><P>The next rules align the text of the header cells on their baselineand vertically centers the text in each data cell:</p><PRE>TH { vertical-align: baseline }TD { vertical-align: middle }</PRE><P>The next rules specify that the top row will be surrounded by a 3pxsolid blue border and each of the other rows will be surrounded by a1px solid black border:</P><PRE>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 }</PRE><P>Note, however, that the borders around the rows overlap where therows meet. What color (black or blue) and thickness (1px or 3px) willthe border between row1 and row2 be? We discuss this in the section on<a href="#border-conflict-resolution">border conflict resolution.</a><P>The following rule puts the table caption above the table:</P><PRE>CAPTION { caption-side: top }</PRE><P>Finally, the following rule specifies that, when rendered aurally,each row of data is to be spoken as a "Header, Data, Data":</P><PRE>TH { speak-header: once }</PRE><P>For instance, the first row would be spoken "Header1 Cell1 Cell2".On the other hand, with the following rule:</p><PRE>TH { speak-header: always }</PRE><P>it would be spoken "Header1 Cell1 Header1 Cell2". </div><P>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) arewell-defined. In other document languages (such as XML applications),there may not be pre-defined table elements. Therefore, CSS2 allowsauthors to <a name="x1"><span class="index-inst" title="mapping elements to tableparts">"map"</span></a> document language elements to table elements viathe <a href="visuren.html#propdef-display" class="noxref"><span class="propinst-display">'display'</span></a> property. Forexample, the following rule makes the FOO element act like an HTMLTABLE element and the BAR element act like a CAPTION element:</p><PRE class="example">FOO { display : table }BAR { display : table-caption }</PRE><P>We discuss the various table elements in the following section. Inthis specification, the term <a name="x2"><span class="index-def" title="tableelement"><dfn>table element</dfn></span></a> refers to any elementinvolved in the creation of a table. An <a name="x3"><span class="index-def"title="internal table element|table element::internal">"internal"table element</span></a> is one that produces a row, row group, column,column group, or cell.<H2><a name="q2">17.2 The CSS table model</a></h2><P>The CSS table model is based on the HTML 4.0 table model, in whichthe structure of a table closely parallels the visual layout of thetable. In this model, a table consists of an optional caption and anynumber of rows of cells. The table model is said to be "row primary"since authors specify rows, not columns, explicitly in the documentlanguage. Columns are derived once all the rows have been specified --the first cell of each row belongs to the first column, the second tothe second column, etc.). Rows and columns may be grouped structurallyand this grouping reflected in presentation (e.g., a border maybe drawn around a group of rows).<P>Thus, the table model consists of tables, captions, rows, row groups, columns, column groups, and cells. <P>The CSS model does not require that the <ahref="conform.html#doclanguage">document language</a> include elementsthat correspond to each of these components. For document languages(such as XML applications) that do not have pre-defined tableelements, authors must map document language elements to tableelements; this is done with the <a href="visuren.html#propdef-display" class="noxref"><spanclass="propinst-display">'display'</span></a> property. The following<a href="visuren.html#propdef-display" class="noxref"><span class="propinst-display">'display'</span></a> values assign tablesemantics to an arbitrary element:</p><dl><dt><strong><span class="index-def" title="table"><a class="value-def"name="value-def-table">table</a></span></strong> (In HTML: TABLE)<dd>Specifies that an element defines a <ahref="visuren.html#block-level">block-level</a> table: itis a rectangular block that participatesin a <a href="visuren.html#block-formatting">block formattingcontext</a>.<dt><strong><span class="index-def" title="inline-table"><aclass="value-def"name="value-def-inline-table">inline-table</a></span></strong> (InHTML: TABLE)<dd>Specifies that an element defines an <a href="visuren.html#inline-level">inline-level</a> table: itis a rectangular block that participates in an <a href="visuren.html#inline-formatting">inline formattingcontext</a>).<dt><strong><span class="index-def" title="table-row"><aclass="value-def"name="value-def-table-row">table-row</a></span></strong> (In HTML: TR)<dd>Specifies that an element is a row of cells.<dt><strong><span class="index-def" title="table-row-group"><aclass="value-def"name="value-def-table-row-group">table-row-group</a></span></strong>(In HTML: TBODY) <dd>Specifies that an element groups one or morerows.<dt><strong><span class="index-def" title="table-header-group"><aclass="value-def"name="value-def-table-header-group">table-header-group</a></span></strong>(In HTML: THEAD) <dd>Like 'table-row-group', but for visual formatting,the row group is always displayed before all other rows and rowgroupsand after any top captions. Print user agents may repeat footer rows on each page spanned by a table.<dt><strong><span class="index-def" title="table-footer-group"><aclass="value-def"name="value-def-table-footer-group">table-footer-group</a></span></strong>(In HTML: TFOOT)<dd>Like 'table-row-group', but for visual formatting, the row group isalways displayed after all other rows and rowgroups and before anybottom captions. Print user agents may repeat footer rows on each pagespanned by a table.<dt><strong><span class="index-def" title="table-column"><aclass="value-def"name="value-def-table-column">table-column</a></span></strong> (InHTML: COL)<dd>Specifies that an element describes a column of cells. <dt><strong><span class="index-def" title="table-column-group"><aclass="value-def"name="value-def-table-column-group">table-column-group</a></span></strong>(In HTML: COLGROUP)<dd>Specifies that an element groups one or more columns.<dt><strong><span class="index-def" title="table-cell"><aclass="value-def"name="value-def-table-cell">table-cell</a></span></strong> (In HTML:TD, TH)<dd>Specifies that an element represents a table cell.<dt><strong><span class="index-def" title="table-caption"><aclass="value-def"name="value-def-table-caption">table-caption</a></span></strong> (InHTML: CAPTION)<dd>Specifies a caption for the table.</dl><p>Elements with <a href="visuren.html#propdef-display" class="noxref"><span class="propinst-display">'display'</span></a> setto 'table-column' or 'table-column-group' are not rendered (exactly asif they had 'display: none'), but they are useful, because they mayhave attributes which induce a certain style for the columns theyrepresent.</p>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -