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.

0saves

Save

If you enjoyed this post, please consider leaving a comment or subscribing to the RSS feed to have future articles delivered to your feed reader.