HTML and CSS Reference
In-Depth Information
The most useful values for layout purposes are
table
,
table-row
,
table-row-group
, and
table-cell
.
Setting
display
to
table-column
or
table-column-group
is equivalent to setting it to
none
.
Using the values listed in Table
12-1
changes the behavior of HTML elements in the following important
respects:
•
Unlike the standard CSS box model (see Chapter
6), padding and borders are included
in the element's width.
•
An element can have margins only when
display
is set to
table
,
inline-table
,
or
table-caption
.
Elements generate anonymous table objects when necessary.
•
Anonymous Table Objects
CSS is designed to be used not only with HTML, but also with other languages that don't necessarily have the
correct elements for cells, rows, and tables. Consequently, when you set the
display
property of an element
to one of the values in Table
12-1
, the browser generates any missing elements as
anonymous table objects
. For
example, if you set the
display
property of an element to
table-row
, it's not necessary for the
display
property
of its parent to be
table
. If the outer table is missing, the browser automatically generates one. Equally, the
children of an element with its
display
property set to
table-row
don't need to have their
display
property set
to
table-cell
. All direct children of the row are wrapped in anonymous table cell objects.
In one respect, this is very useful because it means you don't need to create unnecessary container elements.
However, it can have unexpected consequences, particularly for a liquid or responsive layout. To help you
understand why CSS table display doesn't always work the way you might expect, the following sections describe
how browsers handle different combinations of table-related values for the
display
property.
The first examples display just three columns without a header and footer, using the HTML in Listing 12-1.
Listing 12-1.
Simple Three-column Layout
<body>
<div id="wrapper">
<div id="sidebar1">
<h2>Left Sidebar</h2>
</div>
<div id="main">
<h1>Main Content</h1>
<p>The balanced scorecard. . .</p>
</div>
<div id="sidebar2">
<h2>Right Sidebar</h2>
</div>
</div>
</body>
