HTML and CSS Reference
In-Depth Information
Applying Table Styles to Other Page Elements
As you can see, tables are useful for displaying information in an organized structure of
rows and columns. Tables are so useful, in fact, that there's no reason to limit the table
structure to Web tables. Using the CSS
display
property, you can apply a table layout to
other HTML elements, such as paragraphs, block quotes, or lists. Figure 5-49 describes
the various CSS table display styles and their HTML equivalents.
Figure 5-49
Table display styles
Display Style
Equivalent HTML Element
display: table;
table (treated as a block-level element)
display: table-inline;
table (treated as an inline element)
display: table-row;
tr
display: table-row-group;
tbody
display: table-header-group;
thead
display: table-footer-group;
tfoot
display: table-column;
col
display: table-column-group;
colgroup
display: table-cell;
td or th
display: table-caption;
caption
For example, the following defi nition list contains defi nitions of two networking terms:
<dl>
<dt>bandwidth</dt>
<dd>A measure of data transfer speed over a network</dd>
<dt>HTTP</dt>
<dd>The protocol used to communicate with Web servers</dd>
</dl>
Rather than accepting the default browser layout for this list, it might be useful to
display the text in a table. However, you don't want to lose the meaning of the markup
tags. After all, HTML is designed to mark content, but not indicate how browsers should
render that content. To display this defi nition list as a table, you could enclose each set of
terms and defi nitions within a
div
element as follows:
<dl>
<div>
<dt>bandwidth</dt>
<dd>A measure of data transfer speed over a network</dd>
</div>
<div>
<dt>HTTP</dt>
<dd>The protocol used to communicate with Web servers</dd>
</div>
</dl>
You then could apply the following style sheet to the list, treating the entire defi nition
list as a table—the
div
elements as table rows, and the defi nition terms and descriptions
as table cells within those rows:
dl {display: table; border-collapse: collapse; width: 300px;}
dl div {display: table-row;}
dt, dd {display: table-cell; border: 1px solid black;
vertical-align: top; padding: 5px;}
