I have seen the display table and then display table-cell css properties in modern websites specially the sites which have one page section based layout. I want to know the recommended and appropriate method to implementing and using these properties since I have never implemented such properties before so I need clarification here as for what purpose and when and where we can use these rare css properties. 
Many thanks.
Hi,
You can use display: table / row /cell properties wherever you have a need to mimic the behaviour of old style html tables. There are no semantic issues with using these CSS properties but of course should the content you are using be ‘tabular’ then you should be using html table tags instead.
Some uses for using these properties are where you have columns stacked horizontally and you need each column to be the same height without needing to set explicit heights. This is very awkward with floats but a simple matter with css table properties.
e.g
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
p{margin:0 0 1em}
.wrap{max-width:960px;margin:auto;}
.table {
display:table;
width:100%;
}
.cell {
display:table-cell;
vertical-align:top;
border:1px solid #000;
background:red;
width:33%;
padding:5px;
}
.cell2 {background:blue}
.cell3 {background:green}
</style>
</head>
<body>
<div class="wrap">
<div class="table">
<div class="cell">Cell 1</div>
<div class="cell cell2">Cell 2</div>
<div class="cell cell3"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a massa tellus. Maecenas viverra mi sed ipsum pulvinar consequat. Sed vehicula purus ut dui pulvinar, a vehicula purus iaculis. Sed accumsan ante non consequat imperdiet. Sed pellentesque facilisis accumsan. Maecenas sed hendrerit dui. Duis suscipit, turpis sit amet sodales rhoncus, ante ante tempus purus, a volutpat leo metus nec mauris. Fusce ut turpis vitae sapien varius sollicitudin.</p></div>
</div>
</div>
</body>
</html>
Unlike html tables you can omit the intermediate display:table-row element and the browsers will construct an anonymous one automatically. Unless of course you have rows of columns and then you would need the explicit display:table-row to separate the columns.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
p {
margin:0 0 1em
}
.wrap {
max-width:960px;
margin:auto;
}
.table {
display:table;
width:100%;
}
.cell {
display:table-cell;
vertical-align:top;
border:1px solid #000;
background:red;
width:33%;
padding:5px;
}
.row{display:table-row}
.cell2 {background:blue}
.cell3 {background:green}
</style>
</head>
<body>
<div class="wrap">
<div class="table">
<div class="row">
<div class="cell">Cell 1</div>
<div class="cell cell2">Cell 2</div>
<div class="cell cell3">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a massa tellus. Maecenas viverra mi sed ipsum pulvinar consequat. Sed vehicula purus ut dui pulvinar, a vehicula purus iaculis. Sed accumsan ante non consequat imperdiet. Sed pellentesque facilisis accumsan. Maecenas sed hendrerit dui. Duis suscipit, turpis sit amet sodales rhoncus, ante ante tempus purus, a volutpat leo metus nec mauris. Fusce ut turpis vitae sapien varius sollicitudin.</p>
</div>
</div>
<div class="row">
<div class="cell"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a massa tellus. Maecenas viverra mi sed ipsum pulvinar consequat. Sed vehicula purus ut dui pulvinar, a vehicula purus iaculis. Sed accumsan ante non consequat imperdiet. Sed pellentesque facilisis accumsan. Maecenas sed hendrerit dui. Duis suscipit, turpis sit amet sodales rhoncus, ante ante tempus purus, a volutpat leo metus nec mauris. Fusce ut turpis vitae sapien varius sollicitudin.</p></div>
<div class="cell cell2">Cell 2</div>
<div class="cell cell3">Cell 3</div>
</div>
</div>
</div>
</body>
</html>
The main drawback of css tables is that you cannot ‘row span’ or ‘column span’ (colspan, rowspan) but in most cases they are attributes needed for handling data rather than layout.
The display table properties are supported in IE8+ and are a useful addition to the toolbox when the time arises. I often use them for the sticky footer approach (see the css faq) or for 100% high layouts as tables treat height as a minimum and allows for effects that you can’t do with other display properties.
Many thanks Paul for the briefing, few days back I was exploring some modern web design trends and then I saw a minimal website based on single page layout there were five sections of five navigational links and in each section I saw these properties. After reading that source code and css I understood that they use these properties because they wanted to vertically center the headings and paragraphs for each section so that it will remain in the middle when it goes for responsive break points from tablets to the smartphones viewports.
Kindly correct me if I am wrong.
Regards,
Umair.
No you are not wrong and vertical centring is also something that display:table-cell makes very easy. If you have a series of horizontal text elements then using display:table-cell you can align all of them vertically with respect to each other in a few lines of code. Ther are other css alternatives for vertical centering but none quite as efficient as the table-cell method.
Another good use for display:table-cell is when you have a navigation that spans the top of the page and you want the items spread across the width quite nicely. Unlike other methods you don’t have to give a width to each item or use ‘magic number’ padding but instead use display:table-cell and all the items spread across the page evenly. This creates a more robust nav that doesn’t break if you add or remove the text content at some later date (and handles zoom much better also).
These are all valid uses for the table properties