Recreate table design in CSS

Posted on 2011-04-20
Last Modified: 2012-05-11
I have an image attached and I am trying to recreate the styles for that to be used on a html TABLE.

Any ideas? The biggest thing is the border on the rows.



    LVL 7

    Expert Comment

    This is an actual coding job that should be paid for.  What you're asking for is Spec work, work you'll use in a production environment that you want someone to do for free.  I don't believe this is the right forum for that type of request.

    That said, if you'd like to get started on the coding your own, then come back for specific help on something you can't figure out, I suggest starting by using something like this css table building tool to get the foundation for the code.

    Then head over to somewhere like Smashing Magazine for some examples and code:

    Get as far as you can, and then come back to figure out the things that you aren't able to get right.

    Note: You'll run into issues with the rounded corners on IE browsers (they won't work unless you use images to create the corners).  If you use -moz styling, you'll need a style for the top left, top right, bottom left, and bottom right cells to give them the rounded corners (there's currently no way to apply rounded corners to the actual TABLE tag that I'm aware of, it has to be applied to the TD tag.  The gradient may also be an issue.

    You may have more success creating this table using only CSS, then you can give a gradient background and rounded corners to the outer div and give the inner divs the correct styling to get the dual border.

    For a developer (or even for on here) you'll also want to indicate if this is a table that would be generated automatically by a programming language like PHP or hand coded in HTML/CSS.  Will it only ever by 2 columns and 3 rows?  Or could it be 4 columns and 50 rows?  What fonts do you want the table to fall back on?  Not everyone will have Myriad installed.

    Hopefully that will get you started.
    LVL 1

    Author Comment

    I guess I should have been more clear, most of that I can easily do ;)

    The thing is the inset border without using images, possible or just slice a 1px image?
    LVL 7

    Accepted Solution

    In that case, to give the cells the look of an inset border you would apply #dbdada on the bottom of the TDs and #FFF on the top of the TDs (for inner TDs, your top and bottom row will have unique styling to accommodate the rounded corners), then for the vertical borders, on column 1 you'll give it a #dbdada border on the right and column 2 will have an #FFF border on the left.  

    See the code attached.
    <style type="text/css">
    td {  background-color: #FAFAFA; }
    .inner_l, .inner_r { border-top: 1px solid #FFFFFF; border-bottom: 1px solid #dbdada; border-right: 1px solid #dbdada; }
    .inner_l { border-left: 1px solid #dbdada; }
    .inner_r { border-left: 1px solid #FFF; }
    <table width="590" border="0" cellspacing="0" cellpadding="0">
        <td class="inner_l">&nbsp;</td>
        <td class="inner_r">&nbsp;</td>
        <td class="inner_l">&nbsp;</td>
        <td class="inner_r">&nbsp;</td>

    Open in new window


    Featured Post

    Looking for New Ways to Advertise?

    Engage with tech pros in our community with native advertising, as a Vendor Expert, and more.

    Join & Write a Comment

    Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
    This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
    In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
    In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …

    755 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    18 Experts available now in Live!

    Get 1:1 Help Now