The recent browser versions like Firefox 3, Google Chrome, Internet Explorer 8, Opera 9.5 and Safari 3 are now coming with a great and brand new support: CSS3. Some of the new properties are introduced and here I am going to describe the table value for the display property.
To align data in a tabular structure we can use a common table using the HTML tags <table>, <tr>, <td> nonetheless we all know that by using that we are violating the latest web standards, right?But hold on for a second. I’m just going to introduce you a hot new way to code it using nothing else than div tags with the great CSS3 and the data will appear just like a table. Believe, that’s true!
Here is an example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Some Page</title>
<style type="text/css">
.table {
display: table;
width:100%;
}
.row {
display: table-row;
width:100%;
}
.cell {
display: table-cell;
border: 1px solid blue;
padding: 1em;
width: 33%;
}
.element1 {
background:#0099FF;
}
.element2 {
background:#00FF99;
}
.element3 {
background:#FFFF99;
}
</style>
</head>
<body>
<div class="table">
<div class="row">
<div class="cell element1">
<p><strong>Web Development </strong></p>
<p>PHP & MySQL<br />
Ruby on Rails<br />
ActionScript 3.0 / Flash / Flex / Adobe Integrated Runtime<br />
Amazon Web Services<br />
Zend Framework<br />
JavaScript / AJAX<br />
XHTML & CSS Scripting<br />
Content Management System</p>
</div>
<div class="cell element2"><p><strong>Windows Development</strong></p></div>
<div class="cell element3"><p><strong>Mac & iPhone Development</strong></p></div>
</div>
</div>
</body>
</html>
Screen shots:
Firefox 3
Google Chrome
Internet Explorer 8
Opera 9.5
Safari 3
Internet Explorer7
Working Principle:
The display property specifies a range of table-related values to make elements display and behave as they were table elements.
The new available display values for drawing tables are:
table to make the element behave like a table element
table-row to make the element behave like a table row (tr) element
table-cell to make the element behave like a table cell (td) element
table-row-group to make the element behave like a table body row group (tbody) element
table-header-group to make the element behave like a table header row group (thead) element
table-footer-group to make the element behave like a table footer row group (tfoot) element
table-caption to make the element behave like a table caption element
table-column to make the element behave like a table column (col) element
table-column-group to make the element behave like a table column group (colgroup) element
The table element in HTML is a semantic structure: it describes what data is. Therefore, you should only use the table element if the data you are marking up is tabular – for example, a table of financial information.
On the other hand, table value of the display property is simply an indication of how something should look in the browser – it has no semantic meaning. Using a table element for your layout tells the browser, “This data is tabular.”
Also we have to take care of, not to use display: table; property on a bunch of div elements when the data needs to be present in tabular format. Else simply avoid to use this property.
The main advantages on using this new structure are:
- Place the data in tabular manner without violating the latest web standards.
- No need of specify the
cellpadding="0" cellspacing="0". - No need to make the
border="0". - No need to make the
marginandpadding0 of table, tr, td. - Print the page in tabular format without wired.
- No need to specify the
height, as the content added it will automatically adjust the height of the row and columns with specified background.
As we’re not living in Wonderland, we also have some disadvantages, as follow:
- Only latest browsers support this property.
- Mainly IE 7, IE6 are not supporting this property. They show the data in wired manner.
The solution would be to use this property only when we are going to develop a website for latest browsers and just ignoring the older versions. But as the statistics shows, most of the users still using IE6 and IE7.
To implement this in realistic world won’t be feasible to use CSS3’s advanced layout features for at least 4 or 5 years, once users need to upgrade themselves from the stone age of Internet to our beautiful high-tech development world.
