[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 233
  • Last Modified:

Recreate table design in CSS

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.

Thanks,

Ryan

 taable
0
catonthecouchproductions
Asked:
catonthecouchproductions
  • 2
1 Solution
 
DanielleFavreauCommented:
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: http://www.smashingmagazine.com/2008/08/13/top-10-css-table-designs/

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.
0
 
catonthecouchproductionsAuthor Commented:
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?
0
 
DanielleFavreauCommented:
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; }
</style>

<table width="590" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td class="inner_l">&nbsp;</td>
    <td class="inner_r">&nbsp;</td>
  </tr>
  <tr>
    <td class="inner_l">&nbsp;</td>
    <td class="inner_r">&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

Open in new window

0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now