Advertisement
Workshops

Community Project: Data Table Results!

by

We're gradually getting more challenging with these community projects - still, many of you grabbed the bull by the horns and threw your best CSS at our simple data table - take a look..


The Challenge

I asked you all to style this simple markup..

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Weight (kg)</th>
            <th>Profession</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Carolina Biggleswade</td>
            <td>23</td>
            <td>65</td>
            <td>Jockey</td>
        </tr>
        <tr>
            <td>Harry Sparrowhead</td>
            <td>34</td>
            <td>89</td>
            <td>Trainer</td>
        </tr>
        <tr>
            <td>Marjorie Doors</td>
            <td>32</td>
            <td>76</td>
            <td>Yard Manager</td>
        </tr>
        <tr>
            <td>Earnest Piggington-Smithe</td>
            <td>18</td>
            <td>98</td>
            <td>Groom</td>
        </tr>
    </tbody>
</table>

..using whatever magic you could muster with CSS alone. Here are the results!


A Couple of Examples

You're welcome to continue submitting ideas for this, but there'll be another challenge coming soon. In the meantime, check out a few of the submissions which most caught my eye:


15 Shades of Grey - by Mack Hofberg

Bold - by Juan Torrijos

Crisp - by Charlie Hield

Chalkboard - by Nathaniel Albrecht

Metro - by 1pxstory

Personal Disclaimer

There's a chance I somehow missed your submission, messed up your name, copied the wrong url to your own site, ruined something I haven't even thought about - if that's the case, just shout at me in the comments and I'll see about setting things right.

Other than that, enjoy everyone's work and leave constructive advice, questions and thoughts in the comments below. Thanks to all who participated - here's to many more Webdesigntuts+ Community Projects!

Related Posts
  • Web Design
    UX
    Impress Your Visitors With a Web 2.0 Hit CounterCounter thumb
    If there's one way to show off how successful your site is, it's by letting your visitors know how many others have been there before them. Let's furnish a web page with a hit counter!Read More…
  • Web Design
    eCommerce
    Taking Shopify Theme Development FurtherShopify thumb
    In this final part of our Shopify series we will look at how a deeper knowledge of Liquid will enable you to make your themes even more flexible. This will help you deliver richer and more imaginative store designs.Read More…
  • Web Design
    Email
    Creating a Simple Responsive HTML EmailEmail new rwd thumb
    In this tutorial I will show you how to create a simple responsive HTML email which will work in every email client, including all the new smartphone mail clients and apps. It uses minimal media queries and a fluid width approach to ensure maximum compatibility.Read More…
  • Code
    JavaScript & AJAX
    Working With IndexedDB - Part 2Indexeddb retina preview
    Welcome to the second part of my IndexedDB article. I strongly recommend reading the first article in this series, as I'll be assuming you are familiar with all the concepts covered so far. In this article, we're going to wrap up the CRUD aspects we didn't finish before (specifically updating and deleting content), and then demonstrate a real world application that we will use to demonstrate other concepts in the final article.Read More…
  • Web Design
    HTML/CSS
    Foundation for Beginners: Joyride, Interchange, Tables and PanelsFoundation thumb retina
    Let's further add to our Foundation arsenal by looking at the Joyride plugin, which helps guide users through your sites. We'll also look at pricing tables, standard tables and interchange; a novel responsive image tool. We'll cover the implementation of these features with a simple template which you can download and play with.Read More…
  • Web Design
    Workshops
    Community Project: Style a Simple Data TablePreview2
    High time we held another community project don't you think? This time, I want to see what you can do with a straight-forward data table.. Send your CSS over and worthy examples will be published on the site next week. Read on to find out more!Read More…