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

The CSS display:table-row property allows you to make content display in a browser as if it were a table row. You can place content in a div to display as if it were a table cell using the CSS display:table-cell property. 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 it's done.

Difficulty: Moderate

Instructions

Things You'll Need:

• An HTML and CSS page using the examples shown

Plan your layout

1. 
   The HTML

   To demonstrate, here's a simple CSS 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. Nested in the content area you see a div holding two nested divs. These divs are assigned to the class "row" and "cell" respectively, so that they can be styled with CSS.

2. 
   The Stylesheet

   Assign the following CSS to the page. Notice that the sidebar1 and mainContent 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. For the nested row with two cells that will appear in the main content area, use the CSS shown for the class "row" and the class "cell" in the CSS shown. 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 a container holding two large cells or boxes that display like columns. Within the mainContent area you see the row of two cells or boxes that could contain text or images as needed. This grid effect was achieved with CSS display properties.

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

• You can omit the div assigned to the class "row" and the rule for .row in the CSS and achieve the same results. This is because the browser assumes that the table-row is implied when the table-cell is used.
• CSS display:table-row and display:table-cell properties are not supported by Internet Explorer versions below Version 8.