We’ve just covered the simplicity and elegance of table padding, and now it is time to look at some full-scale tutorials on how to build beautiful and easy to work with CSS3 table layouts.
I’d like to beforehand acknowledge that these tutorials are not written by me, but they’ve been part of my tutorial collection for long enough, to be finally made into a blog post of its own.
You’re more than welcome to add your own favorites in the comment, as it can only help the ever growing community of developers and designers to grow and flourish.
CSS3 Table Styles & Who Uses Them Anyway?
I was looking for the perfect picture to use for this post, and while doing so; I couldn’t help but notice the endless stream of samples of table layouts built on top of CSS and CSS3.
The most common among all, seemed to be pricing tables, which lit the inspiration to think of how few people really understand the process of building beautiful layouts with code, layouts that we interact with every single day.
Gotta give them credit where it’s due, looking forward to the expansion of CSS3 and the whole web industry as a whole.
CSS3 Table Generators Online
I can almost guarantee that there are literally hundreds of these available on the web, and while we could create a post out of those, I don’t feel like putting the same thing in one place over and over again, instead, we can focus on the top three CSS table generators:
- csstablegenerator.com
- css-table-generator.html
- tablestyler.com
all three tools will give you the ability to build beautiful table styles, and the option to save both HTML and CSS files directly. It will come down to your own style preference, but if you’re feeling adventurous – you might as well try putting a little bit of each into one, and building something unique of your own.
You’ll need to dig deeper if you’re looking to have your tables come with rounded corners, and also – while this is not a tutorial, it does save time form having to read one!
Improving Your HTML Tables With CSS Properties
W3Schools might not be the most comprehensive (in terms of looking at something from all points of view) resource when it comes to any of the languages they write tutorials for, but it’s good enough to be a good starting point for anyone, and I still use it from time to time to remind myself about references.
This page will show you how to use basic CSS syntax to style your HTML tables on the fly, there is a demo page available; from which you can edit and play with the code yourself.
A Complete Guide to the Table Element
Chris Coyier is known in the community for being very well educated and versed in the CSS language, and has built enormous amounts of tutorials and guides for those who need it. This full scale tutorial will get you wrapped inside the table element like nothing else.
You’ll learn how to build amazing tables with the use of HTML5 and CSS3 tags, and the end results are just spectacular. A lot of the code is saved on CodePen, so you get to play with it live.
Check out his tutorial by following this link, really amazing resource and is up-to date as well, so don’t worry of new stuff not being there.
Great CSS3 Properties for Beautifying Your Tables
Today I am going to show you how to use some neat CSS3 properties to beautify your tables. With so many new selectors we can address specific table cells and rows in order to create a unique style without adding classes to the markup.
Whether you’re a beginner or an advanced designer who uses CSS3, this tutorial is refreshing and useful to all seasons of programmers. In either case, if you’re unable to come up with your own style for something, just download the demos and make changes from there.
I doubt anyone is going to punish you for playing it safe.
Styling Your Tables With CSS [Video]
Well, I believe that some people like to learn from videos more than they do from tutorials, so here is a tiny and quick video to get you started. I think it goes together well with some of the content above, first watch the video; then jump on to the tutorials.
This CSS tutorial covers the basics of styling a table, including dealing with the border-collapse: property and properly aligning your elements. [1]
Tutorials for Building Your Own CSS3 Table Layouts
I think this is plenty of resources and examples to get you started, these are all top class tutorials and I wouldn’t give you anything else. I’ve had these resources saved up for a long time now, and while pondering what kind of a blog post to publish; these surfaced to the top.
I’ve got a few more of these to write down, so keep an eye out if they’re at all useful to you. Also, looking forward to suggestions for more content like this, I’ve scouted the web for long enough to know where the goodies are hidden.
