Tables

Documentation

http://developers.whatwg.org/tabular-data.html

Check into the scope attribute sometime…

Creating the Structure

A table can have a header, body, footer, and caption.

Structure rules:

  1. Tags must appear in this order: <table>, <caption>, <colgroup>, <col>, <thead>, <tfoot>, <tbody>.
    <tr> and <td> will appear inside the head, footer, and body sections.
  2. If you use <thead>, then you must use <tbody>. In fact, <tbody> is always required unless there is only one body and you are not using <thead>.
  3. <thead>, <tfoot>, and <tbody> end tags are not required and can be safely omitted.
  4. The ending tag for <colgroup> is optional. The ending tag for <col> is forbidden.
Sales Results – 2012
District 1st Quarter 2nd Quarter 3rd Quarter 4th Quarter
Total $2,987,987.00 $987,987.00 $987,987.00 $987,987.00
Northern $123,998.00 $4,123,998.00 $123,998.00 $98.00
Eastern $998.00 $998.00 $998.00 $998.00
Southern $13,998.00 $123,998.00 $98.00 $4,123,998.00
Western $1,998.00 $98.00 $4,123,998.00 $123,998.00

Styling Tables

There are a few weird things when attempting to make your table look beautiful.

  1. The margin property only applies to <table>. Internal elements (<tr>, <td>, <th>, <col>, etc.) can not have margin.
  2. <colgroup> and <col> allow only four properties for styling: width, border, background, and visibility.

The above table was styled with:

table {
  border-collapse:collapse;
  background: linear-gradient(top, rgba(201,200,169,1) 0%,rgba(151,217,237,1) 100%); /* W3C */
}
/* style columns */
col { /* The table was defined with only the first column getting the col element. */
  width:8em;
  background-color:lemonchiffon;
}
tr td:first-child { /* text in first column */
  font-weight:bold;
}
td + td { /* all columns except the first */
  text-align:right;
}
/* style rows */
table td, th { /*all body and header cells */
  padding:5px 1em;
  border:thin solid #030;
}
th { /* header - aka. the first row */
  background-color:#C9C8A9;
  color:#1C4D1A;
}
tfoot td {/* footer - aka. the last row */
  background-color:#09C;
  color:#FFF;
}

Styling Columns

If you are only styling width, border, background or visibility, then you can target the CSS against <col> or <colgroup>. Any other CSS property must be applied to cells (<td>) using a selector such as tr > td + td { … } or tr td:first-child { … } Refer to the CSS Selectors page for more information on this advanced selector.