How to style Div elements as Tables

It is possible to display any HTML element as a table using the CSS display property. Now a days with modern web browsers providing support for advanced CSS properties, it has become feasible to use block elements to display data in a tabular format. This is done by clever use of the values in the CSS display property.

CSS display property – tabular values

The display property allows you to specify a range of table-related values in order to make elements display as though they were table elements. The available display values are as follows.

  • table – Make the element display like a table.
  • table-row –  Make the element display like a table row element <tr>.
  • table-cell – Make the element display like a table cell element <td>.
  • table-row-group – Makes the element behave like a table body row group (tbody) element.
  • table-header-group – Makes the element behave like a table header row group (thead) element.
  • table-footer-group – Makes the element behave like a table footer row group (tfoot) element.
  • table-caption – Makes the element behave like a table caption element.
  • table-column – Makes the element behave like a table column (col) element.
  • table-column-group – Makes the element behave like a table column group (colgroup) element.

[ Reference : Everything you know about CSS is wrong. ]

Usage to display HTML block elements as tables

Here we will use a few of the above mentioned CSS display property values to style div tags to display the end result in a tabular format.

First the HTML code

<div class="div-table">
<div class="div-table-caption">This is a caption</div>
<div class="div-table-row">
<div class="div-table-col">1st Column</div>
<div class="div-table-col">2nd Column</div>
</div>
</div>

In the above code snippet, the div-table, div-table-caption, div-table-row, div-table-col all are CSS classes.

CSS styling for the above HTML code

.div-table{display:table; border:1px solid #003399;}

.div-table-caption{display:table-caption; background:#009999;}

.div-table-row{display:table-row;}

.div-table-col{display:table-cell; padding: 5px; border: 1px solid #003399;}

The end result is as shown in the following image.

Div tags displayed in table format

As you can see, the div tags take the form of a table. And display wise, it is a great way to style html elements.

The full HTML file

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head><title>table using divs</title>
<style type="text/css">
    .div-table{display:table; border:1px solid #003399;}
    .div-table-caption{display:table-caption; background:#009999;}
    .div-table-row{display:table-row;}
    .div-table-col{display:table-cell; padding: 5px; border: 1px solid #003399;}
</style>
</head>
<body>
<div class="div-table">
    <div class="div-table-caption">This is a caption</div>
    <div class="div-table-row">
    <div class="div-table-col">1st Column</div>
    <div class="div-table-col">2nd Column</div>
</div>
</div>
</body>
</html>

What is the catch ?
To use these CSS property values, you need to have a web browser which supports them. Unfortunately, that translates to a limited number of web browsers such as IE 8, Firefox 3, Opera 9 and so on. When viewed within older web browsers, the div elements are displayed as blocks one after the other without the table display properties.