Need to make a table (but in the least crappy way)

[theacefes]

I need to create a layout for tabular data. As a designer, it’s been hammered into my skull that tables should not be used for anything other than tabular data. The layout should be flexible and easy to style without the use of inline styles anywhere. Is there an ideal/semantic way to go about doing this?

[theacefes]

*Polite poke* Please let me know if I wasn’t very clear in my question so I can rephrase.

[amoss]

This crappy or happy?
http://jsfiddle.net/h4mjf/3/

[theacefes]

Nifty. Thank you

[amoss]

You’re welcome.

[amoss]

Was waiting for this.

@krysak4ever Improve it then. Thanks.

[theacefes]

Thank you – I’m glad that there are different solutions floating around.

[amoss]

@krysak4ever, nice, thanks.
2.] empty TD and class blank, for what ?
To separate the columns and keep the borders from touching. There may be a better way but no one jumped in to help so I gave it a shot. Cheers.

[Mottie]

Take a look at how Bootstrap sets up their table css… here is the demo and the css

table {

max-width: 100%;

background-color: transparent;

border-collapse: collapse;

border-spacing: 0;

}

.table {

width: 100%;

margin-bottom: 18px;

}

.table th,

.table td {

padding: 8px;

line-height: 18px;

text-align: left;

vertical-align: top;

border-top: 1px solid #dddddd;

}

.table th {

font-weight: bold;

}

.table thead th {

vertical-align: bottom;

}

.table caption + thead tr:first-child th,

.table caption + thead tr:first-child td,

.table colgroup + thead tr:first-child th,

.table colgroup + thead tr:first-child td,

.table thead:first-child tr:first-child th,

.table thead:first-child tr:first-child td {

border-top: 0;

}

.table tbody + tbody {

border-top: 2px solid #dddddd;

}

.table-condensed th,

.table-condensed td {

padding: 4px 5px;

}

.table-bordered {

border: 1px solid #dddddd;

border-collapse: separate;

*border-collapse: collapsed;

border-left: 0;

-webkit-border-radius: 4px;

-moz-border-radius: 4px;

border-radius: 4px;

}

.table-bordered th,

.table-bordered td {

border-left: 1px solid #dddddd;

}

.table-bordered caption + thead tr:first-child th,

.table-bordered caption + tbody tr:first-child th,

.table-bordered caption + tbody tr:first-child td,

.table-bordered colgroup + thead tr:first-child th,

.table-bordered colgroup + tbody tr:first-child th,

.table-bordered colgroup + tbody tr:first-child td,

.table-bordered thead:first-child tr:first-child th,

.table-bordered tbody:first-child tr:first-child th,

.table-bordered tbody:first-child tr:first-child td {

border-top: 0;

}

.table-bordered thead:first-child tr:first-child th:first-child,

.table-bordered tbody:first-child tr:first-child td:first-child {

-webkit-border-top-left-radius: 4px;

border-top-left-radius: 4px;

-moz-border-radius-topleft: 4px;

}

.table-bordered thead:first-child tr:first-child th:last-child,

.table-bordered tbody:first-child tr:first-child td:last-child {

-webkit-border-top-right-radius: 4px;

border-top-right-radius: 4px;

-moz-border-radius-topright: 4px;

}

.table-bordered thead:last-child tr:last-child th:first-child,

.table-bordered tbody:last-child tr:last-child td:first-child {

-webkit-border-radius: 0 0 0 4px;

-moz-border-radius: 0 0 0 4px;

border-radius: 0 0 0 4px;

-webkit-border-bottom-left-radius: 4px;

border-bottom-left-radius: 4px;

-moz-border-radius-bottomleft: 4px;

}

.table-bordered thead:last-child tr:last-child th:last-child,

.table-bordered tbody:last-child tr:last-child td:last-child {

-webkit-border-bottom-right-radius: 4px;

border-bottom-right-radius: 4px;

-moz-border-radius-bottomright: 4px;

}

.table-striped tbody tr:nth-child(odd) td,

.table-striped tbody tr:nth-child(odd) th {

background-color: #f9f9f9;

}

.table tbody tr:hover td,

.table tbody tr:hover th {

background-color: #f5f5f5;

}

[Author]

Posts