Technology Freaks: Organizing Data with Tables

Border Collapse Property

Tables consist of a parent table element as well as subsequent td elements. Applying a border to both of these elements will begin to stack up borders all around. Take for example, putting a 2 pixel border around an entire table and then an additional 2 pixel border around each table cell. In return this would create a 4 pixel border around every cell within the table.

The border-collapse property determines a tables border model. There are three values for the border-collapse property, including collapse, separate, and inherit. By default the value is separate meaning that all of the different borders will stack up to one another accordingly, like mentioned above. The collapse property, on the other hand, will condense the borders down to one, choosing the table cell as the primary border.


table {
  border: 2px solid blue;
  border-collapse: separate;
}
th, td {
  border: 2px solid red;
}

Border Collapse Property Demo

Luke Brad

88 76

separate
Luke Brad

88 76

collapse

Border Spacing Property

Understanding that the border-collapse property with the separate values allows borders to be stacked up against one another the border-spacing property can determine how much space, if any, appears between the borders. Going back to our example, a table with a 2 pixel border and a 2 pixel border around each cell creates a 4 pixel border all around. Adding in a border-spacing value of 2 pixels would then separate the two borders by 2 pixels, creating a 6 pixel total border width.


table {
  border: 2px solid blue;
  border-collapse: separate;
  border-spacing: 2px;
}
th, td {
  border: 2px solid red;
}

Border Spacing Property Demo

Luke	Brad
88	76

Adding in Borders

Putting a border around a table is fairly simple, however putting borders around rows or cells can be more difficult. Below are a few examples of how to add these borders. For an additional reference and examples on how to add borders around a table check out the tables within Bootstrap, from Twitter.

Row Borders

Putting a border between each row is as simple as adding a bottom border to each table cell. To remove the bottom border of the cells within the last row of the table the pseudo-class last-child selector is used.


table {
  border-collapse: collapse;
  border-spacing: 0;
}
th, td {
  border-bottom: 1px solid #c6c9cc;
}
tr:last-child td {
  border: 0;
}

Row Borders Demo

Track	Artist	Length
We Are Young	Fun.	4:10
Pumped Up Kicks	Foster the People	3:59
Midnight City	M83	4:03

Cell Borders

On the other hand, putting a border around every individual cell is fairly easy. Simply put a border around each table header or table data cell and set the overall table to have a border-spacing value of collapse.


table {
  border-collapse: collapse;
  border-spacing: 0;
}
th, td {
  border: 1px solid #c6c9cc;
}

Cell Borders Demo

Track	Artist	Length
We Are Young	Fun.	4:10
Pumped Up Kicks	Foster the People	3:59
Midnight City	M83	4:03

Aligning Text

In addition to table borders, aligning text within cells, both horizontally and vertically, plays an integral part of table formatting. Commonly names, descriptions, and so forth are flush left while numbers and figures are flush right. Other information, depending on its context, should be centered. Moving text horizontally can be accomplished using thetext-align property within CSS, as covered in the typography lesson.

To align text vertically the vertical-align property is used. The vertical-align property only works withinline and table-cell display elements. That said, the vertical-align property will not work for block level or any other level elements.

The vertical-align property accepts a handful of different values, of which change depending on if the element is displayed as an inline and table-cell element. Within tables the most popular values include top, middle, andbottom. These values then vertically position text within the cell in relation to their value.

HTML


<table>
  <thead>
    <tr>
      <th 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 colspan="3">Subtotal</td>
      <td>$107.19</td>
    </tr>
    <tr class="tax">
      <td colspan="3">Tax</td>
      <td>$10.71</td>
    </tr>
    <tr class="total">
      <td colspan="3">Total</td>
      <td>$117.90</td>
    </tr>
  </tfoot>
</table>

CSS


table {
  border-collapse: collapse;
  border-spacing: 0;
}
th, td {
  border: 1px solid #c6c9cc;
  vertical-align: top;
}
th {
  font-size: 11px;
  text-transform: uppercase;
}
th.qty, th.price {
  text-align: center;
}
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 {
  text-align: right;
}
tfoot td {
  text-align: right;
}
tfoot tr.sub td, tfoot tr.tax td {
  color: #8c8c8c;
  font-size: 12px;
}
tfoot tr.total td {
  color: #404853;
  font-size: 14px;
  font-weight: bold;
}
.in {
  color: #00b515;
}
.out {
  color: #b50000;
}
span {
  color: #8c8c8c;
  display: block;
  font-size: 12px;
  font-weight: normal;
}

Aligning Text 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

Technology Freaks

Sunday, 1 September 2013

Organizing Data with Tables - Part 2