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.

Mastretta: ¡Vivan Los Músicos!

Mastretta: ¡Vivan Los Músicos! is a fantastic, quirky, and odd album that I simply can't get enough of, so I had to write about it here. Maybe you'll find out that you like it too, or you might think I'm crazy. Either way, I'm in love.

I first came across Nacho Mastretta's music when watching a distinctly disturbing yet fantastic video on Vimeo entitled "Alma" by Rodrigo Blaas. The film itself is worth watching, so I'll let you go check it out for a minute.

So now that you're back (and slightly disturbed), the catchy music? That's Mastretta. And the album is more of the same quirky but catchy music with the same distinct sound, which I can't really come up with any words to describe. It's beautiful and surreal with Spanish musical influences, some Jazz thrown into the mix, and since I was introduced to the composer through "Alma", a good bit of creepiness. But it's a good creepiness, if you get what I mean.

The music itself ranges from cacophonous revelry to slow, sad instrumental solos, and everything in between. It's odd how things can be both harmonious and disharmonious, but it's the case here, and things can slide so easily between the two that you've barely had a chance to notice it until it's happened. And let me tell you, there's a lot happening in most of these quirky songs, and you'll have to listen for quite some time to pick out each little moment and twist thrown in.

The previous album by Mastretta (self-titled) does feature some vocals, but this one does not -- it's purely instrumental. If you're looking for music that both thrills the cockles of your heart and your brain cells, here is something new and interesting, and yes, slightly creepy.

Until next time, keep on writing with light. (And listening to great music!)