Organizing Data with Tables - Part 3

Table Striping

In the effort to help make tables more legible, one common pattern is to "stripe" the table rows so that they alternate background colors. This makes the rows more identifiable and provides a great visual cue for scanning information. One way to do this is to place a class on every other row and set a background color to that class. Another way is to use thenth-child pseudo-class selector and set the select to odd or even rows.

th {
  background: #404853;
  background: linear-gradient(#687587, #404853);
  color: #fff;
}
tbody tr:nth-child(even) td {
  background: #e8eae9;
  background: linear-gradient(#f7faf9, #e8eae9);
}
tfoot tr.total td {
  background: #e8eae9;
  background: linear-gradient(#f7faf9, #e8eae9);
}

Table Striping Demo

ITEMS		QTY	PRICE
Envisioning InformationBy Edward R. Tufte – Hardcover	In Stock	1	$33.32
OutliersBy Malcolm Gladwell – Hardcover	In Stock	2	$33.58($16.79 × 2)
Don’t Make Me ThinkBy Steve Krug – Paperback	Out of Stock	1	$22.80
Steve JobsBy Walter Isaacson – Hardcover	In Stock	1	$17.49
Subtotal			$107.19
Tax			$10.71
Total			$117.90

Full Featured Table Completely Styled

HTML

<table>
  <thead>
    <tr>
      <th class="item" colspan="2">Items</th>
      <th class="qty">Qty</th>
      <th class="price">Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="item">Envisioning Information <span>By Edward R. Tufte – Hardcover</span></td>
      <td class="stock in">In Stock</td>
      <td class="qty">1</td>
      <td class="price">$33.32</td>
    </tr>
    <tr>
      <td class="item">Outliers <span>By Malcolm Gladwell – Hardcover</span></td>
      <td class="stock in">In Stock</td>
      <td class="qty">2</td>
      <td class="price">$33.58 <span>($16.79 × 2)</span></td>
    </tr>
    <tr>
      <td class="item">Don’t Make Me Think <span>By Steve Krug – Paperback</span></td>
      <td class="stock out">Out of Stock</td>
      <td class="qty">1</td>
      <td class="price">$22.80</td>
    </tr>
    <tr>
      <td class="item">Steve Jobs <span>By Walter Isaacson – Hardcover</span></td>
      <td class="stock in">In Stock</td>
      <td class="qty">1</td>
      <td class="price">$17.49</td>
    </tr>
  </tbody>
  <tfoot>
    <tr class="sub">
      <td class="title" colspan="3">Subtotal</td>
      <td class="price">$107.19</td>
    </tr>
    <tr class="tax">
      <td class="title" colspan="3">Tax</td>
      <td class="price">$10.71</td>
    </tr>
    <tr class="total">
      <td class="title" colspan="3">Total</td>
      <td class="price">$117.90</td>
    </tr>
  </tfoot>
</table>

CSS

table {
  border-collapse: separate;
  border-spacing: 0;
}
th, td {
  vertical-align: top;
}

th {
  background: #404853;
  background: linear-gradient(#687587, #404853);
  border-left: 1px solid rgba(0, 0, 0, 0.2);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 11px;
  padding: 9px 8px 7px 8px;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.6);
  text-transform: uppercase;
}
th.qty, th.price {
  padding: 9px 20px 7px 20px;
  text-align: center;
}
th.item {
  border-left: 0;
}
th.price {
  border-right: 0;
}
td {
  padding: 8px;
}
tbody td {
  border-bottom: 1px solid #c6c9cc;
  border-left: 1px solid #e4e7eb;
  border-right: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
tbody tr:nth-child(even) td {
  background: #e8eae9;
  background: linear-gradient(#f7faf9, #e8eae9);
  border-left: 1px solid #d5d8db;
}
tbody td.item, tbody tr:nth-child(even) td.item {
  border-left: 1px solid #c6c9cc;
}
tbody td.item {
  color: #404853;
  font-weight: bold;
}
tbody td.stock, tbody td.qty, tbody td.price {
  vertical-align: middle;
}
tbody td.stock, tbody td.qty {
  text-align: center;
}
tbody td.price {
  border-right: 1px solid #c6c9cc;
  text-align: right;
}
tfoot td {
  border-bottom: 1px solid #c6c9cc;
  border-left: 1px solid #e4e7eb;
  border-right: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  text-align: right;
}
tfoot td.title {
  border-left: 1px solid #c6c9cc;
}
tfoot td.price {
  border-right: 1px solid #c6c9cc;
}
tfoot tr.sub td {
  border-bottom: 0;
  padding: 8px 8px 0 8px;
}
tfoot tr.tax td {
  padding: 0 8px 8px 8px;
}
tfoot tr.sub td, tfoot tr.tax td {
  color: #8c8c8c;
  font-size: 12px;
}
tfoot tr.total td {
  background: #e8eae9;
  background: linear-gradient(#f7faf9, #e8eae9);
  color: #404853;
  font-size: 14px;
  font-weight: bold;
}
tfoot tr.total td.price {
  border-left: 1px solid #d5d8db;
}
.in {
  color: #00b515;
}
.out {
  color: #b50000;
}
span {
  color: #8c8c8c;
  display: block;
  font-size: 12px;
  font-weight: normal;
}

Demo

ITEMS		QTY	PRICE
Envisioning InformationBy Edward R. Tufte – Hardcover	In Stock	1	$33.32
OutliersBy Malcolm Gladwell – Hardcover	In Stock	2	$33.58($16.79 × 2)
Don’t Make Me ThinkBy Steve Krug – Paperback	Out of Stock	1	$22.80
Steve JobsBy Walter Isaacson – Hardcover	In Stock	1	$17.49
Subtotal			$107.19
Tax			$10.71
Total			$117.90