How to Use the CSS display:table and display:table-cell Properties

The CSS display:table property allows you to make content display in browsers if it were a table element. However, there is no HTML markup making the displayed content an actual table of tabular information. Content can be accessible, while giving you the power to display that content as if it were a table. Here is how to use it.

Difficulty: Moderate

Instructions

Things You'll Need:

• A web page with the correct HTML and CSS

1. 
    
   HTML Page

   To demonstrate, here's a simple HTML page. It's a two column layout in a container div. Notice that the HTML is not for a table. It is a container div that holds two nested divs: a sidebar and a content area.

2. 
    
   Stylesheet

   Assign the following CSS to the page. Notice that the container is assigned the CSS rule display:table and the two inner divs are given the property display:table-cell. The color and border choices are shown to help you recognize the different areas of the layout, but are not necessary for the display.

3. 
    
   In Firefox Browser

   The results display in a grid-like manner with a container table and two cells. This effect was achieved with CSS, not with HTML.

4. In the HTML the sidebar came first in the source order. You can reverse that order to place the sidebar on the right by putting the mainContent div first in the HTML source order.

Tips & Warnings

• CSS display:table and display:table-cell properties are not supported by Internet Explorer versions below Version 8.

[WolfTech]

on 12/7/2008 Thanks for sharing!