Sunday 1 September 2013

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.
  1. th {
  2. background: #404853;
  3. background: linear-gradient(#687587, #404853);
  4. color: #fff;
  5. }
  6. tbody tr:nth-child(even) td {
  7. background: #e8eae9;
  8. background: linear-gradient(#f7faf9, #e8eae9);
  9. }
  10. tfoot tr.total td {
  11. background: #e8eae9;
  12. background: linear-gradient(#f7faf9, #e8eae9);
  13. }

Table Striping Demo

ITEMSQTYPRICE
Envisioning InformationBy Edward R. Tufte – HardcoverIn Stock1$33.32
OutliersBy Malcolm Gladwell – HardcoverIn Stock2$33.58($16.79 × 2)
Don’t Make Me ThinkBy Steve Krug – PaperbackOut of Stock1$22.80
Steve JobsBy Walter Isaacson – HardcoverIn Stock1$17.49
Subtotal$107.19
Tax$10.71
Total$117.90

Full Featured Table Completely Styled

HTML
  1. <table>
  2. <thead>
  3. <tr>
  4. <th class="item" colspan="2">Items</th>
  5. <th class="qty">Qty</th>
  6. <th class="price">Price</th>
  7. </tr>
  8. </thead>
  9. <tbody>
  10. <tr>
  11. <td class="item">Envisioning Information <span>By Edward R. Tufte – Hardcover</span></td>
  12. <td class="stock in">In Stock</td>
  13. <td class="qty">1</td>
  14. <td class="price">$33.32</td>
  15. </tr>
  16. <tr>
  17. <td class="item">Outliers <span>By Malcolm Gladwell – Hardcover</span></td>
  18. <td class="stock in">In Stock</td>
  19. <td class="qty">2</td>
  20. <td class="price">$33.58 <span>($16.79 × 2)</span></td>
  21. </tr>
  22. <tr>
  23. <td class="item">Don’t Make Me Think <span>By Steve Krug – Paperback</span></td>
  24. <td class="stock out">Out of Stock</td>
  25. <td class="qty">1</td>
  26. <td class="price">$22.80</td>
  27. </tr>
  28. <tr>
  29. <td class="item">Steve Jobs <span>By Walter Isaacson – Hardcover</span></td>
  30. <td class="stock in">In Stock</td>
  31. <td class="qty">1</td>
  32. <td class="price">$17.49</td>
  33. </tr>
  34. </tbody>
  35. <tfoot>
  36. <tr class="sub">
  37. <td class="title" colspan="3">Subtotal</td>
  38. <td class="price">$107.19</td>
  39. </tr>
  40. <tr class="tax">
  41. <td class="title" colspan="3">Tax</td>
  42. <td class="price">$10.71</td>
  43. </tr>
  44. <tr class="total">
  45. <td class="title" colspan="3">Total</td>
  46. <td class="price">$117.90</td>
  47. </tr>
  48. </tfoot>
  49. </table>
CSS
  1. table {
  2. border-collapse: separate;
  3. border-spacing: 0;
  4. }
  5. th, td {
  6. vertical-align: top;
  7. }
  8. th {
  9. background: #404853;
  10. background: linear-gradient(#687587, #404853);
  11. border-left: 1px solid rgba(0, 0, 0, 0.2);
  12. border-right: 1px solid rgba(255, 255, 255, 0.1);
  13. color: #fff;
  14. font-size: 11px;
  15. padding: 9px 8px 7px 8px;
  16. text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.6);
  17. text-transform: uppercase;
  18. }
  19. th.qty, th.price {
  20. padding: 9px 20px 7px 20px;
  21. text-align: center;
  22. }
  23. th.item {
  24. border-left: 0;
  25. }
  26. th.price {
  27. border-right: 0;
  28. }
  29. td {
  30. padding: 8px;
  31. }
  32. tbody td {
  33. border-bottom: 1px solid #c6c9cc;
  34. border-left: 1px solid #e4e7eb;
  35. border-right: 1px solid rgba(255, 255, 255, 0.6);
  36. box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  37. }
  38. tbody tr:nth-child(even) td {
  39. background: #e8eae9;
  40. background: linear-gradient(#f7faf9, #e8eae9);
  41. border-left: 1px solid #d5d8db;
  42. }
  43. tbody td.item, tbody tr:nth-child(even) td.item {
  44. border-left: 1px solid #c6c9cc;
  45. }
  46. tbody td.item {
  47. color: #404853;
  48. font-weight: bold;
  49. }
  50. tbody td.stock, tbody td.qty, tbody td.price {
  51. vertical-align: middle;
  52. }
  53. tbody td.stock, tbody td.qty {
  54. text-align: center;
  55. }
  56. tbody td.price {
  57. border-right: 1px solid #c6c9cc;
  58. text-align: right;
  59. }
  60. tfoot td {
  61. border-bottom: 1px solid #c6c9cc;
  62. border-left: 1px solid #e4e7eb;
  63. border-right: 1px solid rgba(255, 255, 255, 0.6);
  64. box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  65. text-align: right;
  66. }
  67. tfoot td.title {
  68. border-left: 1px solid #c6c9cc;
  69. }
  70. tfoot td.price {
  71. border-right: 1px solid #c6c9cc;
  72. }
  73. tfoot tr.sub td {
  74. border-bottom: 0;
  75. padding: 8px 8px 0 8px;
  76. }
  77. tfoot tr.tax td {
  78. padding: 0 8px 8px 8px;
  79. }
  80. tfoot tr.sub td, tfoot tr.tax td {
  81. color: #8c8c8c;
  82. font-size: 12px;
  83. }
  84. tfoot tr.total td {
  85. background: #e8eae9;
  86. background: linear-gradient(#f7faf9, #e8eae9);
  87. color: #404853;
  88. font-size: 14px;
  89. font-weight: bold;
  90. }
  91. tfoot tr.total td.price {
  92. border-left: 1px solid #d5d8db;
  93. }
  94. .in {
  95. color: #00b515;
  96. }
  97. .out {
  98. color: #b50000;
  99. }
  100. span {
  101. color: #8c8c8c;
  102. display: block;
  103. font-size: 12px;
  104. font-weight: normal;
  105. }

Demo

ITEMSQTYPRICE
Envisioning InformationBy Edward R. Tufte – HardcoverIn Stock1$33.32
OutliersBy Malcolm Gladwell – HardcoverIn Stock2$33.58($16.79 × 2)
Don’t Make Me ThinkBy Steve Krug – PaperbackOut of Stock1$22.80
Steve JobsBy Walter Isaacson – HardcoverIn Stock1$17.49
Subtotal$107.19
Tax$10.71
Total$117.90