Presentation of Data

• Presenting
• Comparing
• Sorting
• Calculating
• Cross Referencing

NOT for presentation

<table>
  <caption></caption>
  <colgroup>
    <col/>
  </colgroup>
  <thead>
    <tr>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th></th>
    </tr>
  </tfoot>
</table>

<table>
  <caption>Table Caption</caption>
  <colgroup>
    <col/>
  </colgroup>
  <thead></thead>
  <tbody></tbody>
  <tfoot></tfoot>
</table>

• Specifies the title of table
• Always the first child of a <table>
• Can be positioned on top or bottom with caption-side
In FF, can be top, bottom, left or right of table
• Can be styled
• CSS: Inherits from table

Put on the <table>, not the <caption>.

supported

caption-side: top; 
caption-side: bottom;

Experimental

caption-side: left; 
caption-side: right; 
caption-side: top-outside; 
caption-side: bottom-outside;

In the specification

caption-side: inline-start;
caption-side: inline-end;

deprecated:

<table align="left | top | right | bottom">

border-collapse: separate | collapse | inherit

When the borders are collapsed border-spacing is relevant.

border-spacing: <length> <length>?;

The look you want is probably:

table, td, th {border: none;}
table {border-spacing: 5px 10px;}

• one length: vertical and horizontal padding are the same.
• two lengths: first is horizontal, second is vertical
• Note: not TRouBLe
• Irrelevant if border-collapse: collapse
• Empty space is part of the table, not the column, tbody, row or cell.

empty-cell: show | hide

Similar to:

td:empty, th:empty {
  visibility: none;
  }

• ignored if border-collapse: separate
• applies to elements with diplay of table-cell
• property of table or the cells themselves

table-layout: auto | fixed

• fixed renders faster

vertical-align: baseline | sub | super | text-top | 
                text-bottom | middle | top | bottom | 
                <percentage> | <length>

baseline

Aligns the baseline of the cell with the baseline of all other cells in the row that are baseline-aligned.

top

Aligns the top padding edge of the cell with the top of the row.

middle

Centers the padding box of the cell within the row.

bottom

Aligns the bottom padding edge of the cell with the bottom of the row.

• applied to thead, tfoot, tbody, tr, td, th, but not table.
• negative values are ok
• additional values (sub, super, text-top, text-bottom, <length>, and <percentage>) equal baseline

display: table | table-cell

display: table;
display: table-row-group;
display: table-header-group;
display: table-footer-group;
display: table-row;
display: table-cell;
display: table-column-group;
display: table-column;
display: table-caption;

.parent {
  display: table;
}
.child {
  display: table-cell;
  vertical-align: baseline;
}

<table>
  <caption>
    2017–18 Primera División: Player of the week
  </caption>
  <colgroup>
    <col class="week"/>
    <col class="player"/>
    <col class="club"/>
    <col class="stat"/>
  </colgroup>
<thead>....

display:
caption-side:
border-collapse:
border-spacing:
empty-cell:
table-layout:
vertical-align:

table
colgroup
colspan
thead
tbody
tfoot
tr
th
td

Try it out!

Next ➹