Fancy Tables with some CSS3

First off, honest -- this isn't a blog about web design entirely. And I haven't forgotten about the photography aspect either. But, hey, it's early -- haven't had my first cup of coffee yet, and I'm in a giving mood, so I thought I'd share this with you.

If you're like me, tables in web pages tend to get the least amount of love, which is rather nuts, if I think about it logically. So I finally decided to give those tables some love by applying some cool CSS3 effects. If this can help you out, great! (If not, oh well. Wait until my next post.)

So, to whet your appetite, here's what the tables look like in all their CSS3 glory:



Isn't that pretty?

So, to begin with, you'll need some CSS code:

.pkFancyTable
  {
    
    -webkit-box-shadow: black 0px 0px 12px inset, #888 0px 0px 12px;
    -moz-box-shadow: black 0px 0px 12px inset, #888 0px 0px 12px;
    -o-box-shadow: black 0px 0px 12px inset, #888 0px 0px 12px;
    box-shadow: black 0px 0px 12px inset, #888 0px 0px 12px;
    background-color: #444;
    border: 4px solid white;
    border-radius: 15px;
    -moz-border-radius: 15px;
    padding: 10px;
    width: 75%;
    margin: 0 auto;
  }
  
  .pkFancyTable tr.oddrow
  {
    background-color: #555;
  }
  
  .pkFancyTable table
  {
    border-collapse: collapse;
    color: #CCC;
    width: 100%;
  }
  
  .pkFancyTable table th, .pkFancyTable table td
  {
    border: 1px dotted #888;
  }
  
  .pkFancyTable table thead
  {
    background-color: #000;
    border-bottom: 1px solid #888;
  }
  
  .pkFancyTable table tfoot
  {
    background-color: #600;
    color: #FFF;
    border-top: 1px solid white;
  }
  
  .pkFancyTable table td div
  {
    font-size:80%;
    color: #AAA;
    margin-left:15px;
    line-height: 0.95em;
  }

Next, you need to build an HTML table wrapped in a DIV container like so:

<div class="pkFancyTable"><table cellpadding="5" cellspacing="0">
<thead>
<tr><th>Heading 1</th><th>Heading 2</th><th>Heading 3</th></tr>
</thead>
<tbody>
<tr><td>Value 1 <div>
I'm a smaller, indented line of text.</div>
</td><td>Value 2</td><td>Value3</td></tr>
<tr class="oddrow"><td>Value 1</td><td>Value 2</td><td>Value3</td></tr>
<tr><td>Value 1</td><td>Value 2</td><td>Value3</td></tr>
</tbody>
<tfoot>
<tr><th>Total 1</th><th>Total 2</th><th>Total 3</th></tr>
</tfoot>
</table>
</div>

The outer DIV classed "pkFancyTable" gives the table the nice round borders and the dark background color. Then, the THEAD element will get the black background color for the heading row. The TFOOT element will get a red background color and white text, which could be used for a row of totals. In between, the TBODY has all your normal rows, and if one of those rows has the class "oddrow", it'll get shaded a slightly different color.

Also, if you put a DIV inside of a TD, it will be indented slightly and rendered with smaller text, which makes it great for giving further information about the cell without resorting to asterisks and such.

Now, for the red-headed stepchild of browsers: Internet Explorer. Yes, well, the fancy CSS3 effects are totally lost on this poor browser, but the tables still look decent. They get the nice dark background and alternating row effects, so unless someone knew there was supposed to be a nice border, they'd be none the wiser.

Now, go and have some fun with your tables! And I promise that I'll try never to leave a table naked again. ;-)

Until next time, keep writing with light.