Why display: table shouldn’t be frowned upon

I’ve seen a lot of commentary on the for, and against of using the CSS property display: table, a lot of it negative. It takes us back to the dark ages, using tables for layout. These people tend to forget that CSS is purely presentational and setting something as display: table is not the same as using the table tag. A screen reader going over a layout styled using the CSS table model will not get confused and muddled up. It will in fact breeze through a layout done correctly no matter which technique used floats or CSS tables. The display properties values: table, table-cell, table-row etc are named due to the fact its presentational result is that best described of how a table would work and the similarities end there.

Let’s take a look at a few examples of layouts done with display: table and show you some advantages. You will in fact see a lot of reduced mark-up in favour of using the CSS tables’ method. It should be noted that the following techniques do not work in IE6 or IE7 (despite this being in the CSS 2.1 spec) but it is finally supported in IE8. Therefore it’s not recommended to use in real world environments, but that doesn’t mean we still can’t have fun.

The run down

In this example I will do a simple header, content, footer layout but with one twist this layout stretches both vertically and horizontally creating a true fluid layout without the use of hacks or CSS voodooism.

Update: Removed overflow:hidden from html,body as it wasn’t needed and caused issues when there was content overflowing. Added extra container inside content and applied display: table-cell so padding could be applied. View overflow example

The xhtml

Content

The CSS

/* Makes the layout expand to 100% height. Without this CSS below won't work */
html,body { height: 100%; }

#maincontainer
{
	display: table;
	height: 100%;
	width: 100%;
}
	/*  Basic table layout */
	#maincontainer #header,
	#maincontainer #content,
	#maincontainer #footer
	{
		display: table-row;
	}
	#maincontainer #header
	{
		height: 150px;
		background-color: green;
	}
	#maincontainer #content
	{
		height: 100%;
		background-color: #000000;
		color: #ffffff;
	}
		#maincontainer #content .container
		{
			display: table-cell;
			padding: 10px;
		}
	#maincontainer #footer
	{
		height: 80px;
		background-color: purple;
	}

The run down

Now we’ll take a look at a technique that isn’t easily accomplished in the good browsers, I’m of cause speaking of vertical centring. With the use of table display property we can accomplish this with very little mark-up and CSS.

The xhtml

Horizontally and vertically centred!

The CSS

/* Makes the layout expand to 100% height without this CSS below won't work */
html,body { height: 100%; }

#maincontainer
{
	display: table;
	height: 100%;
	width: 100%;
}
	/* Vertical centre */
	.table-cel
	{
		display: table-cell;
		vertical-align: middle;
		text-align: center;
		background-color: #000000;
	}
		.table-cel .box01
		{
			margin: 0 auto;
			text-align: left;
			width: 500px;
			height: 500px;
			background-color: orange;
		}
			.table-cel .box01 p
			{
				text-align: center;
				line-height: 500px;
			}

These 2 examples only scratch the surface of the power that the table display property gives you. With Microsoft finally adding support in IE8 these techniques will only become more viable.