By using this site you agree to the use of cookies by Brugbart and our partners.

Learn more

Display table and table-cell Tutorial

Showing some of the stuff you can do with Display:table; and display:table-cell;

Edited: 2012-09-13 15:34

Float and Position has been the main properties used when designing fully CSS based layouts. The new display:table; and display:table-cell; options for the CSS Display property, has however made way for a better alternative to layout pages.

The below example will use display: table; to align the HTML li elements nicely, which avoids the clearing problem with floats.

Note. Setting an elements display to table, also allows us to use table specific properties on it, such as border-spacing, and border-collapse.

<ol>  
 <li>Home</li>
 <li><a href="/about">About</a></li>  
 <li><a href="/search">Search</a></li>
 <li><a href="/privacy">Privacy Policy</a></li>
</ol>

And the CSS:

ol {
 display: table;
 border-spacing: 0.5em;
}
ol li {
 display: table-cell;
}

But thats very far from the only thing we can use display:table; for. We can also use it to create equal height columns, which was very impractical in float and position based layouts. Float based layouts had to use a bunch of additional wrappers, while position based ones had to sacrifice a footer, and basically fake it by including additional divs which would then be positioned and get a lower z-index than the content. Here is how easy it is using display:table;, which again calls for the need to ditch support for older browsers.

The full HTML required to create a 3 column layout, with equal height columns.

<div id="Basement">
  <nav class="cell">
    <ol>
     <li><a href="/Infrastructure/contact">Contact</a></li>
     <li><a href="/Infrastructure/about">About</a></li>
     <li><a href="/Infrastructure/privacy">Privacy Policy</a></li>
    </ol>
  </nav>
  <article class="cell"><p>Creating a Equal height columns using the CSS <em>display:table;</em> and <em>table-cell</em> features is way easier then using floats or position to create the same.</p></article>
  <nav class="cell">
    <ol>
     <li><a href="/Infrastructure/contact">Contact</a></li>
     <li><a href="/Infrastructure/about">About</a></li>
     <li><a href="/Infrastructure/privacy">Privacy Policy</a></li>
    </ol>
  </nav>
</div>

And then the CSS.

#Basement {
 display: table;
 border-spacing: 0.5em;
 height: 500px; /* note works as min-height on display:table elements */
}
#Basement .cell {
 display: table-cell;
 background: silver;
}

Works in Chrome, Internet explore, Firefox, Opera, and Safari.

Display table based equal height column layout

The full code used in this example can be seen below, including its Vision example, so you can easily test this directly in your own browser to see if it works.

<!DOCTYPE html>
<html lang="en-US">

  <head>
    <title>My first Website</title>
    <style type="text/css">
* {margin:0;padding:0;}
body {padding:1em;}
ol {list-style-type:none;}
#Basement {
 display: table;
 border-spacing: 0.5em;
 height: 100px; /* note works as min-height when used with display-table */
}
#Basement .cell {
 display: table-cell;
 background: silver;
}
    </style>
  </head>

  <body>
   <div id="Basement">
    <nav class="cell">
	 <ol>
	  <li><a href="/Infrastructure/contact">Contact</a></li>
	  <li><a href="/Infrastructure/about">About</a></li>
	  <li><a href="/Infrastructure/privacy">Privacy Policy</a></li>
	 </ol>
	</nav>
    <div class="cell">Creating a Equal height columns using the CSS <em>display:table;</em> and <em>table-cell</em> features is way easier then using floats or position to create the same.</div>
    <nav class="cell">
	 <ol>
	  <li><a href="/Infrastructure/contact">Contact</a></li>
	  <li><a href="/Infrastructure/about">About</a></li>
	  <li><a href="/Infrastructure/privacy">Privacy Policy</a></li>
	 </ol>
	</nav>
   </div>
  </body>

</html>

Brugbart Vision!