How to Use the CSS display:table-cell Property

The CSS display:table-cell property allows you to make content display in a browser as if it were a table cell. 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 or grid. Here is how to use it.

Difficulty: Moderate

Instructions

Things You'll Need:

• A web page and stylesheet with the example layout

1. 
    
   The HTML

   To demonstrate, here's a simple, centered 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. 
    
   The Stylesheet

   Assign the following CSS to the page. Notice that the two inner divs are given the property display:table-cell. There is no need to enclose these display:table-cell presentation divs in a display:table or display:table-row div. This is because the table and the table row are implied. That means the browser will act as if a table and a table row were actually given.
   
   
   
   Colors and borders are given for clarity. They are not needed to achieve the layout results.

3. 
    
   The Page in Firefox

   The results display in a grid-like manner with the container holding 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-cell properties are not supported by Internet Explorer versions below Version 8.