Build a Modern Pricing Table With HTML and CSS
videos

Build a Modern Pricing Table With HTML and CSS

on Sep 6th 2011 with 34 comments
Tutorial Details
  • Topic: Site element design
  • Difficulty: Beginner
  • Screencast duration: 2 hours
Demo View It Online
This entry is part 2 of 2 in the series Modern Pricing Table

Modern Pricing Table

In the previous screencast we designed a modern pricing table in Photoshop. Now it’s time to make our design web-ready and code it using HTML and CSS.

Watch Screencast

Don’t like ads? Download the video in HD, or subscribe to Webdesigntuts+ screencasts via iTunes!

Series Navigation<< Design a Modern Pricing Table in Photoshop

Adi Purdila is AdiPurdila on Themeforest
 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

Whether it’s websites, logos or print materials, my work philosophy is the same: never take any shortcuts and always put my heart and soul into each project because in the end, it’s the small details that count and the more effort I put into a project, the better it represents myself as a person and a designer and at the same time, it represents my client in a manner that’s appropriate to his needs. If you’re interested in the HTML Templates and Landing Pages I’m developing, you can check them out on my portfolio page on ThemeForest.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • Guilherme Ventura

    Nice tutorial, and awesome design!

    i can download the source files, ‘upgrade’ the code to show more enhancements to the pricing tables, and write a tutorial for you?

    • http://www.adipurdila.com AdiPurdila
      Author

      That’s fine with me and if Ian signs off on this as well then we’re good to go for another tutorial ;)

  • dj

    Forgive me… for such an inordinately basic project, this was excessively verbose. And, if I might make an observation, the “voice” (style in which the content was delivered) spent way too much time in the “passive” mode instead of the “active.” The same amount of instruction can be much more effectively received and assimilated (even for a novice audience) when delivered in a less “tentative” tone – easily resolved by spending time refining an outline and possibly more than one run-through before hitting “record.”

    This same material has been delivered on Envato several times before and the way it came across was as if you were discovering the process as you went along – even if that wasn’t the actual case. I hope you take another stab at a screencast again, perhaps on a bit more up-to-date topic, using a more “active tone” and concise presentation. [After all, if we want to review something you've said we can always re-play it.]

    • http://www.adipurdila.com AdiPurdila
      Author

      Thanks for your suggestions dj. Can you give me some examples of “active tone” or explain what that means better? Kinda confused here.

      Agree about presentation, there’s always room for improvement and I always struggle to increase the quality of my videos. I plan on structuring and dividing my next videos into smaller bits anyway, so that might solve this issue, we’ll see.

      You said you wanted up-to-date topics. Any ideas? Would be helpful if you actually came up with solutions when coming here complaining about stuff. I did ask people to make suggestions for my tutorials and I did receive a couple, from Twitter and emails. So, if you want up-to-date topics, what would you like to see?

      Adi

    • http://www.imadeyou.com Jim Oliver

      I could not disagree with dj’s comments more. I discovered Adi’s tutorial series that take you from Photoshop to HTML and I have to say, his style has been something of a revelation for me.

      I find Adi’s style of tutorials totally refreshing, engaging and with the right level of detail. Almost every other tutorial I’ve ever followed has left some gaping holes along the way, presumably because the author assumes the audience already knows certain things.

      Adi takes time to explain certain fundamental aspects of web design and goes at a reasonable pace. I absolutely LOVE the various series where you’ve recorded the Photoshop to HTML process ‘warts and all’, showing the mistakes and tweaks along the way. For anyone learning and feeling overwhelmed, this is a blast of fresh air and makes the tutorials HUMAN.

      I even like your voice and as silly as it sounds, this can be a real problem with some tutorial narrators!

      I shall buy a theme or something from you at some point as a token gesture. I’m not joking when I say that your tutorials have SERIOUSLY moved my understanding of web design forward and are massively appreciated.

      Keep at it…

      Jim.

      • http://www.adipurdila.com AdiPurdila
        Author

        Thank you for the kind words Jim, means a lot to me :)

    • Jack

      Oh man, give the guy a break here. He just contributed something to the community. He took his time to write the tutorial, record it, post it. It’s free!!!! Who cares what kind of “tone” he uses. I’m thankful for the tutorial…

  • http://richardmisencik.com Richard

    Hi Adi, once again great tutorial :)

    I checked the online demo and the problem you had with the border-top on recommended cell is fixed..
    Im interested in what helped to fix the issue? While watching the tut i thought about setting overflow to hidden? Do you think that would work? Thanks :)

  • Pingback: Build a Modern Pricing Table With HTML and CSS | Shadowtek | Hosting and Design Solutions

  • Graham Ludwinski

    Is this design free for comercial and/or personal duplication?

    • http://www.adipurdila.com AdiPurdila
      Author

      As far as I know, personal YES, commercial NO.

      • http://www.snaptin.com Ian Yates

        That’s right Adi – obviously, all skills and knowledge acquired as a result of following the tut are yours for the keeping :) Any files included with the post are for learning purposes, not for commercial use. Hope that’s clear!

        • http://www.snaptin.com Ian Yates

          …that’s with the exception of freebie files such as the recent Vue UI Kit and Orman Clark’s Login Box. Freebies are made available for personal and commercial use.

  • Rafal Borowski

    Hello Adi!

    As always you made my morning coffe taste so much better with you next tut video :)

    As for your two problems with borders the first one is a matter of specifity. I won’t be going into details as you know for sure what I’m talking about. So I’ll go just straight to the point:

    The div.tableCell is a 0,0,1,1 and the .noBorder is a 0,0,1,0 so no matter where you put it in the code it is overwritten by the div.TableCell (without the !important ). So to make the .noBorder work you just have to increase the specifity of it to a higher value by adding an element descritpor for example: div.noBorder. Since div.noBoarder is a 0,0,1,1 an it is below the div.tableCell it now overrides it. Of course you will have an extra space then without border so I would suggest to make the whole line like this: div.noBorder { border-right: 1px solid #3a3c3f; }.

    As for your second issue I’am still thinking about it, but have to finish the project for a client first and I’ll go back to it when I have a while.

    As always great work. Keep it up. And don’t worry about dj comment – I don’t know either what is he talking about :)

    Best regards

    • http://www.adipurdila.com AdiPurdila
      Author

      Hehe, that worked like a charm Rafal. Indeed, targeting that element more precisely took care of the problem, so the solution is:

      div.noBorder, td.noBorder { border-right: none; }

      I added the style for the table cell as well.

      Nice one, thanks for figuring this stuff out :)

      Adi

      • Alok Desai

        hi, I am from India and I am new to tutsplus, I was going through the screencast and yes I figured out that the ‘rule of specificity’ applies here. By the way, giving td.noBorder is not necessary. Just .noBorder works fine for ‘td’ because you have directly given border-right to td unlike the div in which the class of ‘tableCell’ is targeted instead of the ‘div’ only.

        Anyway, thanks for the tutorial. It helped me learn a few tricks, specially in the psd part.

  • Rafal Borowski

    PS. As I think about it the div.noBorder { border-right: 1px solid #3a3c3f; }. isn’t a good idea :/ But adding the div will help for sure ;P

  • Pingback: Elegant D » Build a Modern Pricing Table With HTML and CSS | Webdesigntuts+

  • tuts+lover

    Nice tutorial Adi. Could you also extent this to tutorial on how to integrate it to wordpress, like when we create a hosting theme how could we give options in the theme for the users to choose those tables, add extra rows or columns etc.,

  • Greg Cocchiaro

    For the second issue, the dark line on top of the footer recommended, I know this doesn’t really solve the problem completely, but if you change the:

    table.pricingTableContent tfoot td

    border-top to red, then it takes away the 1px overhang on both sides and replaces it with red, also if you change it to a slightly lighter color than the original, it takes away the over hang as well. So I changed the color to:

    #e2e7e9

    and It looks really good, just changing the last letter “b” in the color code to “9″. I’m not sure what this means yet and why it works, I feel like there’s a clash somewhere with the colors of the borders? I don’t know but this solution makes the overhang go away and doesn’t change the border-top nearly enough to see a difference with the rest of the border around the table.

    • Greg Cocchiaro

      And actually just checked and in Firefox the original color code looks correct, but in Safari, the overhang is still there. Not sure why though…

      • http://www.adipurdila.com AdiPurdila
        Author

        Yeah, FF displays it properly, this is weird. I’ll have another go when I get a bit of spare time. Thanks for your suggestion :)

  • Vasar

    Thank you for this tutorial, I haven’t finished it yet but I will tomorrow, there’s no point in rushing tutorial I have to take it all in. =)

  • http://www.theodin.co.uk theodin

    Great tutorial!. You could take this one step further and put all those images into a single sprite for faster page rendering.

    • http://www.adipurdila.com AdiPurdila
      Author

      Yep, I’ve been told about the sprites by other people as well so I’ll implement that in my next tutorials :)

  • José

    123

  • Christian

    Hey Adi. I’ve reacted on this so many times now I feel I just need to say it.
    Why don’t you set your “hcom” abbreviation in TextExpander to put the cursor in the middle of the horizontal “lines” (dashes). You save like a second every time you expand it. Please do this, at least do it for me :)

    • Christian

      Sorry, not the “hcom”, I mean the “bblank” abbreviation…

      • http://www.adipurdila.com AdiPurdila
        Author

        Oh wow, didn’t know I can do that. I owe you big time Christian, that’s gonna help me preserve my mental sanity over the years to come :D

        If anyone else wants to do this (position the cursor in the middle of the comment), simply add: %| where you want the cursor to be, very cool :)

  • Software historia clinica

    Excelent video i implemented in my new site made in wordpress, http://propuestas.micompu.com.mx/propuesta1/paquetes-2/
    ,regards

  • http://www.pacientesweb.com Programa de historia clinica
  • http://www.imonweb.co.uk Imon

    nice tuts Adi…. you rock! I’m learning and gaining my knowledge every time I watch your tuts. Keep up the good work!

  • Imako

    Great Tutorial. Any CSS source files available?

  • jc

    Thanks for the tutorial. – JC

  • http://csseye.net csseye

    Just downloaded it and play with the code!.. really nice pricing table, looks modern

  • https://www.safyhost.com safyhost

    Thank you for this tutorial

  • Pingback: 10 tables de prix HTML / CSS | Outils pour webmaster

  • Pingback: 14 Template HTML/CSS bảng giá chuyên nghiệp - Minh Nhựt's Blog