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
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
<div id="wrapper">
<div id="sidebar1">
<h2>Left Sidebar</h2>
<div id="main">
<h1>Main Content</h1>
<p>The balanced scorecard. . .</p>
<div id="sidebar2">
<h2>Right Sidebar</h2>
Search WWH ::

Custom Search