How to Use CSS Display Properties for Grid Layouts

The CSS display property allows you to set up rules for display that make your content display as a grid or as if it were a table, when in fact the material is not a table. Using CSS to create a grid layout gives you control over the layout without putting any table tags into the HTML. The display properties that relate to a table-like appearance, including each possible property and value, will be described in this article.

Difficulty: Moderate

Instructions

Things You'll Need:

• An HTML page
• A stylesheet

1. display:table makes the element act like a table element. If you nest rows or columns of grids within this element, you should use one or more of the properties described next.

2. display:table-row makes the element act like a table row element. It is possible to use display:table-row effectively without having it nested in an element set to display:table. This is because the browser assumes the existence of an "anonymous" table element and behaves as if it were there. (See Tips below for more about "anonymous" elements.) Remember, you aren't creating an actual table of tabular data; you are merely creating a grid-like display.

3. display:table-cell makes the element act like a table cell element. It is possible to use display:table-cell effectively without having the element nested in an element set to display:table-row or display:table.

4. display:table-row-group makes the element act like a table row group element. Use it for an element that groups one or more rows. It's the CSS way of expressing what tbody does in HTML.

5. display:table-header-group makes the element act like a table header row group element. It's the CSS way of expressing what thead does in HTML. With CSS, the table-header-group is always displayed before all other rows and rowgroups and after any top captions.

6. display:table-footer-group makes the element act like a table footer row group element. With CSS, the table-footer-group does what tfoot does in HTML. The table-footer-group is always displayed after all other rows and rowgroups and before any bottom captions. Printers may repeat footer rows on each page spanned by a table.

7. display:table-caption makes the element act like a table caption element.

8. display:table-column makes the element act like a table column element. It's the CSS way of expressing what col does in HTML.

9. display:table-column-group makes the element act like a table column group. Use it to group one or more columns. It's the CSS way of expressing what colgroup does in HTML.

Tips & Warnings

• Any display:table element will automatically generate necessary anonymous table objects around itself.
• Any selector in your stylesheet set to one of these display properties can be styled with the full range of CSS rules including padding, margin, border, background and font-family properties.
• CSS display properties are not supported by Internet Explorer versions below Version 8.

[thesuraj]

on 12/15/2008 thanks for sharing, css is a rather tedious thing

regards,
suraj shrestha