Estelle Weyl | @estellevw | Github | Press to advance, 2 for comments, 4 to read/write notes.

HTML Tables & CSS

Table Purpose

Presentation of Data

  • Presenting
  • Comparing
  • Sorting
  • Calculating
  • Cross Referencing

NOT for presentation

Structure of a Table

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

Structure of a Table

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

Captions

Caption

  • 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

caption-side property

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">

caption-side property

<caption> styling

Borders & Spacing

border-collapse

border-collapse: separate | collapse | inherit

When the borders are collapsed border-spacing is relevant.

border-spacing

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.

table spacing

Other Table Properties

Empty Cells

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

empty-cells

table-layout

table-layout: auto | fixed
  • fixed renders faster

Vertical Align

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

vertical-align

display property

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;
}

columns

<col> Syntax

<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>....

styling columns

Try it out!

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!

Grid

Next ➹

Links