Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Danh Hoang
Danh Hoang
10,968 Points
Posted by Danh Hoang
Danh Hoang
10,968 Points

Designing a better table

Do you have any helpful tips or links on designing a better table via HTML or CSS?

Tables are not so pretty and I'm looking for good references.

1 Answer

James Barnett
James Barnett
39,199 Points

I've found that there's not a lot of great info on styling tables on the web for some reason.

Some of it is just thinking about how you can apply basic CSS to tables.

  • center text in the middle of the cell with text-align and vertical-align
  • Style the <th> to give the table a header
  • Use rounded-corners for the table

You can then get fancy by adding some CSS3 features, use:nth-child(even) to strip the rows use linear-gradient to add the finishing touches.

Here's a great tutorial on how to do all of that:

Organizing Data with Tables