• Home  / 
  • Blog
  •  /  New HTML Table Tutorial

New HTML Table Tutorial

If you’re looking for an HTML table how-to guide, look no further than my ultimate HTML table tutorial.

I’ll take you through all the tags you need, explain exactly how you should use them (and when you shouldn’t use them), and then take it to the next level!

Did you know that you can make a table look as sexy as this, using ONLY regular HTML and CSS?!

Sexy HTML Table

Sexy HTML Table

Well, it’s true. This stunning HTML pricing comparison table uses no images. Everything is done with very basic markup, and some cool CSS styling.

The table starts out life looking as basic as this. That’s just the HTML on its own, before we start any styling work.

html-table-plain

But then, as I walk you through the CSS, we start to see the design emerge…

html-table-styling-1

Then I show you how to add the rounded corners, drop shadows, soft color gradients, and typography…

html-table-styling-2

After that, we style the HTML buttons and add subtle grooves between the rows and columns…

html-table-styling-3

Before adding the finishing touches: making the “highlighted” table column stand out (using some very clever HTML & CSS trickery, which you’ll love), and adding the shine on the top header cell.

html-table-styling-4

The result is some very simple HTML markup and some very cool CSS, which you can then steal and use on your own projects.

You can even change the highlighted column simply by editing a few numbers in the CSS itself: no HTML change required! That’s incredibly powerful.

Here’s a quick video I posted on YouTube that shows the table in action in the browser.

View the HTML Table tutorial

About the author

starfire

1 comment

Leave a comment: