Forums

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.

krysak4ever

@theacefes I disagree with @amoss code and would not use it
bad HTML, and lot of repetition in CSS

amoss

Was waiting for this.
@krysak4ever Improve it then. Thanks.

krysak4ever

@theacefes

proposed solution
http://codepen.io/krsiakdaniel/pen/chaJD

view it in browser
http://codepen.io/krsiakdaniel/full/chaJD

krysak4ever

@amoss (with due respect)

1.] you do not need to declare class .table
2.] empty TD and class blank, for what ?

3.] CSS obvious first sight repetition
a] things that have common settings can be group (not declared 3 times the same)
b] then you write only stuff that differs
c] ussing classes on TD is good for IE 6,7,8 which ignores E:nth-child

result = less verbose code, which is shorter, easy to use and read

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;
}

treehouse : what would you like to learn today?

Forums

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