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


Note: To get the full tutorial, you will need to upgrade to “Web Design from Scratch PREMIUM” membership. You’ll also get a bunch of other great content including…

  • The ultimate guide to ALL the content that MUST be on any website’s home page!
  • The #1 most important thing you need to do to grow a successful web agency!
  • My rapid keyword research SEO technique
  • Plus an on-site optimization trick that increases organic search traffic every time!
About the author

Ben Hunt

Ben has over 20 years' experience in web design and marketing, and is one of the most influential figures on the subject of effective web design. He has written a bunch of books and spoken at multiple conferences internationally. In 2015, Ben created Open-Source Marketing, which promises to turn the practice of marketing upside down.. Find out more at http://opensourcemarketingproject.org

1 comment

Leave a comment: