Today I will show you how to create
cool table design using CSS3; you can use these tables for data handling
and data presentation. Using the same old table code and a little of
CSS3 to spice things up, we will achieve a nice looking design without
noticing that we are using plain old tables.
Copy the markup below, and paste it in your favorite code editor (Dreamweaver for me) and save as index.html.
Let's start the markup
<table border="0">
<tr>
<th>Payment Number</th>
<th>Client</th>
<th>Date</th>
<th>Total</th>
</tr>
<tr>
<td>0524/0156643435891</td>
<td>ACME Company</td>
<td>10/18/2011</td>
<td>$320.00</td>
</tr>
<tr>
<td>0524/45645853011</td>
<td>ACME Company</td>
<td>10/18/2011</td>
<td>$320.00</td>
</tr>
<tr>
<td>0524/0343432453423211</td>
<td>ACME Company</td>
<td>10/18/2011</td>
<td>$320.00</td>
</tr>
</table>
As you can see I just put dummy data on the table, the main focus of
this tutorial is the design. Below is the output of our table on a
browser without a design.
Now we have all the elements a table needs, a header, body and
footer. For this tutorial we will use the table as data storage. As you
can see we don't have any designs at all, we will do that in a second.
For the sake of the tutorial we will use an inline CSS (not
recommended for production sites), inside the <head> tag put this
<style> and copy the CSS code below and paste inside style, make
sure you close the style tag</style>.
CSS3 Design
table{
width:100%;
border:5px solid #386977;
border-collapse: collapse;
border-spacing: 0;
}
tr, td{
font-size:14px;
color:#222222;
text-shadow:0 1px 1px #fff;
padding:5px;
text-align:center;
border-bottom:1px solid #D3DDE2;
border-right:1px dashed #D3DDE2;
background: #feffff; /* Old browsers */
background: - moz - linear-gradient(top, #feffff 0%, #e6f1f7 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#feffff), color-stop(100%,#e6f1f7)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #feffff 0%,#e6f1f7 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #feffff 0%,#e6f1f7 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #feffff 0%,#e6f1f7 100%); /* IE10+ */
background: linear-gradient(top, #feffff 0%,#e6f1f7 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feffff', endColorstr='#e6f1f7',GradientType=0 ); /* IE6-9 */
}
th{
color:#097799;
text-shadow:0 1px 1px #fff;
font:bold 16px Arial, Helvetica, sans-serif;
padding:10px 15px;
background:#090;
border-bottom:1px solid #0591BC;
background: #87e0fd; /* Old browsers */
background: -moz-linear-gradient(top, #87e0fd 0%, #53cbf1 40%, #05abe0 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#87e0fd), color-stop(40%,#53cbf1), color-stop(100%,#05abe0)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%); /* IE10+ */
background: linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87e0fd', endColorstr='#05abe0',GradientType=0 ); /* IE6-9 */
}
Here is the output of our table, using gradient and padding the table
looks nice and clean. Now our table is ready for data handling and
presentation.
Honestly, there is nothing to explain here, because it's plain CSS and for the gradient I've used Colorzilla Gradient Generator
and paste it in th and tr, td. If you're a developer this is so useful
when handling and presenting data; after all clients love a cool GUI
nowadays.
If you have designed a table using CSS3 for data handling, feel free
to post your link below I would love to see your end result.
