homepage Welcome to WebmasterWorld Guest from 50.19.206.49
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Creating an old-school looking table with borders with CSS
notsosmart




msg:4657524
 6:29 pm on Mar 26, 2014 (gmt 0)

I am trying to leave tables behind completely, as I move to fully responsive designs on my sites.

One thing I can't solve, and this is possibly just a quirk of how I am wired after more than a decade of using the table/tr/td hierarchy for everything, is that I can't seem to be able to create an ACTUAL table with CSS. Not for layout, mind you, but rather a table that presents information like a spreadsheet, with borders around each cell, etc.

Obviously, this is easily doable with tables, but I can't get the CSS DIV syntax right. I just end up with a long list, each time, and it's driving me batty!

(Keep in mind that I am capable of re-writing things like Foundation and Skeleton, so I am not a complete doofus, it's just that there is some sort of cognitive dissonance at play here).

Any suggestions? I am ashamed to even ask, but if I could get the code right, and then style it so it can be responsive, I'll send you all cookies. :-D

 

brandozz




msg:4657528
 6:44 pm on Mar 26, 2014 (gmt 0)

Is the table that you are trying to create to store data? If so, I'd just use a table.

to create what you are describing with css and divs I'd probably do something like this, not perfect but you get the idea:

<style>
.container {
max-width: 1000px;
margin: 0 auto;
padding: 5px;
border: 1px solid black;
overflow: hidden;
}

.row {
width: 100%;
overflow: hidden;
}

.col_1, .col_2, .col_3 {
width: 33%;
float: left;
border: 1px solid red;
text-align: center;
}

.col_2, .col_3 {
border-left: none;
}

</style>

<div class="container">
<div class="row">
<div class="col_1">
<p>column 1 </p>
</div>
<div class="col_2">
<p>column 2</p>
</div>
<div class="col_3">
<p>column 3</p>
</div>
</div>
</div>

graeme_p




msg:4657531
 7:01 pm on Mar 26, 2014 (gmt 0)

I would go further than brandozz: it is semantically a table then the right way is to mark it up as a table, and using other tags and CSS to emulate a table is wrong.

It is not tables that are bad: it is the use of table markup for things that are not tables that is bad.

Of course you should style your table with CSS and not by using the various deprecated attributes for controlling table appearance like align and cellpadding.

notsosmart




msg:4657532
 7:07 pm on Mar 26, 2014 (gmt 0)

Thank you both for giving support to my instincts...

You are right, if a table makes the most sense, use a table.

And yea, I will style them so they don't look like 1998. :-)

brandozz




msg:4657535
 7:18 pm on Mar 26, 2014 (gmt 0)

You may want to consider a framework like bootstrap for your projects. It's a responsive framework with some built in styles specifically for tables.

I use bootstrap for all of my projects.

notsosmart




msg:4657541
 7:39 pm on Mar 26, 2014 (gmt 0)

Yea, that's why I'm working with Foundation on most old and new projects... however, for this particular one, I used Skeleton, which is super-clean and has a tiny download "footprint", but it doesn't include anything beyond the responsive grid.

I've tweaked it plenty (doubling the download size in the process, of course), but this is the one thing that (hilariously) I could not wrap my brain around. Anyway, tables it is.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved