Tables

• The border-collapse and caption-side properties are specific to the layout of tables

property	example	description
border-collapse	border-collapse: collapse;	specifies that table borders should collapse or not
caption-side	caption-side: bottom;	specifies the placement of the table caption

border-collapse

• Just like any other element, you can also supply a table (and its th or td cells) with a border (see the section on Borders)
• The border-collapse property specifies whether these table borders should collapse into a single border or not
  • Possible values: collapse, separate (= default, with white space between the borders)

table {
    border-collapse: collapse;
}

EMMET instruction	result
bdcl + TAB	border-collapse: ;
bdcl:c + TAB	border-collapse: collapse;

caption-side

• The caption-side property specifies the placement of the caption of a table
  • Possible values: bottom, top (= default)

caption {
    caption-side: bottom;
}

EMMET instruction	result
cps + TAB	caption-side: ;
cps:b + TAB	caption-side: bottom;

Advanced selectors for table layouts

• To layout a table, you could define some style rules for specific identifiers/classes and attach these identifiers/classes to
  • td/th elements (for individual styling at cell level)
  • tr elements (for horizontal, row-based styling)
  • col elements (for vertical, column-based styling)
• By using the :first-child, :nth-child() and :last-child pseudo-class selectors, we can easily attain similar horizontal/vertical styling without having to define additional identifiers/classes. As it turns out, we don't even need the col elements anymore.

  selector	selects ...
  tr:nth-child(2)	the second child (tr) of its parent (table) Note that the index of the first child equals 1!
  tr:nth-child(odd)	all odd childs (tr) of its parent (table)
  tr:first-child	the first child (tr) of its parent (table)
  td:nth-child(even)	all even childs (td) of its parent (tr) ~ all even columns of the table
  td:last-child	the last child (td) of its parent (tr) ~ the last column of the table

All-in-one example