Hostingheaderbarlogoj
Join InMotion Hosting for $3.49/mo & get a year on Tuts+ FREE (worth $180). Start today.
Advertisement

Community Project: Style a Simple Data Table

by
Gift

Want a free year on Tuts+ (worth $180)? Start an InMotion Hosting plan for $3.49/mo.

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!

Advertisement