HTML and CSS Reference
In-Depth Information
CSS3 TABLE PROPERTIES FOR HTML5
In a classic statement of double messages, the World Wide Web Consortium (W3C), the
oi cial body that sets the standards for HTML5, states emphatically, “Tables must not be used
as layout aids.” h en in a note following that admonition, the same document states, “h ere
are a variety of alternatives to using HTML tables for layout, primarily using CSS positioning
and the CSS table model.”
What this means is that, in general, table elements should not be used for layouts other than
tabular data. However, if you need tables in layouts, use CSS3 table properties.
h e reason for this admonition is that when CSS became available, all layout was to be done
with CSS. In order not to dissuade designers and developers from using the CSS3 table
properties (only), W3C added the note that it was okay to use CSS3 table properties and
attributes in layout. So, if you're familiar with all the old warnings about not using table
elements in layout, rest assured that CSS3 table properties are i ne for design — up to a point.
In order to see what this CSS3 feature can do for a design, the i rst step is to look at the CSS3
display
property value of
table
and
table-cell
. h e display property can be envi-
sioned as a layout statement. h e values within the display map out how the display is to be
arranged. One of the easiest ways to make a display is to use the table and table-cell values. It
might be helpful to think of the table property as a big container and the table-cells as the
individual cells in the container. As far as more sophisticated designs are concerned, table-
cells are pretty close to a table as a design tool and all the associated problems inherent in it.
So, use it for simple applications where you just need a few columns to achieve a simple task.
110
h e CSS3 format for setting up displays uses predei ned classes, a user class, or an ID. h e
display property is assigned a simple table or table-cell as a value. h e following is an example
(within a style dei nition):
.
story
{
display
:
table
;
}
.
col1
{
display
:
table
-
cell
;
width
:
250px
;
padding
-
right
:
20px
;
color
:
#cc0000;
}
h e
story
class simply dei nes the display property as a table. h e col1 class, which you can
place inside the table, is displayed as a table-cell, and it's helpful to think of it as such. h e
following code (
DisplayTable.html
in this chapter's folder at
www.wiley.com/go/
smashinghtml5
) shows how to set up a design that can be used to display text and graphics
in two columns.
<!
DOCTYPE HTML
>
<
html
>
<
head
>
