//, Photoshop/Grunge Tables with Photoshop and XHTML (Part 4)

Grunge Tables with Photoshop and XHTML (Part 4)

We’ve created our table, our table image an we’ve begun to style it. The next step is to enter our content. Let’s remember the whole reason for doing things this way, we ant to make sure most of the table can be indexed by search engines like Google. At the end of this lesson I’ll let you download the code, related images and PSDs to help your understanding.

  1. 1. In part three we began styling our table but we didn’t get around to styling the contents. Let’s do that now.
  2. <style>
    #grunge_table {
    width:600px;
    height:250px;
    border:0px;
    background:url(grunge_table.png) no-repeat;
    color:#a24235;
    font-family:Arial, Helvetica, sans-serif;
    font-size:0.9em;
    }
    </style>
    
  3. 2. Next we need to create and style bullets that will be used to cross-reference services to options or items in our table. We’ll do this by styling the table rows to our liking (td). Take a look at the following snippet from the stylesheet:
  4. td {
    padding:0 0 0 20px;
    }
    
  5. 3. Now we can insert characters into our cells. I chose to use “x” as my bullet.
  6. 4. Wow, not that many steps and we’re already done! Here is another visual to help demonstrate what’s going on.
  7. Now all that was a lot of work for something that could have been completely done in PHotoshop. What’s the big deal? Why do we even want a XHTML table?

    Why XHTML?

    Here’s my reasoning. Anything in our first column is machine readable text which means that search engines can index it. Having those extra keywords will improve your ranking as well. Second, we can get creative with our “bullets” if we wanted to have fly-out effects with javascript or roll-over effects with ajax hidden within the table we can easily do that by adding a few lines of code. Using an image prevents most of this. Lastly, because our bullets are actual XHTML objects, if we want we can mark them up with contextual keywords and hyperlinks.

    This concludes the lesson. Click here to download the files used and see if you can reconstruct what I did. Of course if you’d like to see and example in the wild visit this site.

      PART 1 | 2 | 3 | 4

2010-05-25T21:51:02+00:00 May 27th, 2008|HTML, Photoshop|0 Comments

About the Author:

Leave A Comment