CSS allows to attach a table behaviour to any structure that is organized similarly to a table using the
display
property.
Properties | Description |
---|
table | attaches a table behaviour to an element |
table-row | attaches a table row behaviour to an element |
table-cell | attaches a table cell behaviour to an element |
The table structure is based on the generic
<div>
and
<span>
blocks.
snippet
<html>
<head>
<style>
div span{border: 1px solid #000000; padding: 5px; margin:5px;}
div {display:table;}
div div{display:table-row;}
div div span{display:table-cell;}
</style>
</head>
<body>
<div>
<div><span>data1</span><span>data2</span></div>
<div><span>data3</span><span>data4</span></div>
<div><span>data5</span><span>data6</span></div>
</div>
</body>
</html>