Tag Archive | "Beauty of CSS"

Design,Tutorials,Web 2.0,Web Development

A Tableless Table – Exploring the power of CSS3

October 27, 2008 3 comments

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;
…

Continue Reading