Advertisement
Workshops

Community Project: Style a Simple Data Table

by

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!

You can use whatever techniques you want, as long as they happen through the magic of CSS

This is Easy

I'm going to give you a simple piece of markup (a table) which you're free to style in any way you please. Here's the markup (download it wrapped up as an html file if you want):

<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>

Everyone associates tables with those terrifying websites of old, but they serve a genuinely useful purpose: presenting tabular data. What do you think you could do with this table, using the power of CSS? Here are two really basic examples, just so you get an idea of what we're doing here.


Anything Goes

You can't touch the HTML, without exception. But there's loads you could do to style this table via CSS!

  • Play with the colors
  • Alter the fonts (use @font-face if you want)
  • Make it responsive
  • Add some dynamic content with pseudo elements
  • Focus on usability
  • Blow us away with rollovers and transitions
  • Even use textures and images if you want (just make sure you zip the whole lot up when you send it over)

The only thing you need to bear in mind is that the demo page already has its styles reset with normalize.css.


Sign Me Up!

This couldn't be simpler:

I'll publish the best ones when I've collected a few. This can be on-going too - there's no deadline.

I look forward to seeing what you all come up with! Good luck!

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…
  • Code
    JavaScript & AJAX
    Working With IndexedDB - Part 3Indexeddb retina preview
    Welcome to the final part of my IndexedDB series. When I began this series my intent was to explain a technology that is not always the most... friendly one to work with. In fact, when I first tried working with IndexedDB, last year, my initial reaction was somewhat negative ("Somewhat negative" much like the Universe is "somewhat old."). It's been a long journey, but I finally feel somewhat comfortable working with IndexedDB and I respect what it allows. It is still a technology that can't be used everywhere (it sadly missed being added to iOS7), but I truly believe it is a technology folks can learn and make use of today. In this final article, we're going to demonstrate some additional concepts that build upon the "full" demo we built in the last article. To be clear, you must be caught up on the series or this entry will be difficult to follow, so you may also want to check out part one.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…
  • 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: Data Table Results!Preview results
    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..Read More…