Tables

<table>
  <thead>
    <tr>
      <th>Month</th>
      <th>Spending</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>$184</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$220</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Total</td>
      <td>$404</td>
    </tr>
  </tfoot>
</table>

<caption> - specifies the caption (or title) of a table

• goes inside <table>

<th> - table heading

• might be used as additional heading for a bunch of rows

Attributes

colspan - merge cells horizontally

• e.g. colspan="2" - merge two cells

rowspan - merge cells vertically

• <td> element is not needed for a cell which was absorbed

Styles

display - all table elements get special "display" value

• table - value for <table> element. it activates such properties like "vertical-align"
• table-header-group - for <thead>
• table-row-group - for <tbody>
• table-footer-group - for <tfoot>
• table-row - for <tr>
• table-cell - for <th> & <td>

table-layout

• auto - default
• fixed

border-collapse - sets whether the table borders should be collapsed into a single border

• separate - default
• collapse - collapse borders
• collapse disallows table padding
• there is a problem with sticky <thead>. if "collapse" is used, top and bottom border disappear on scroll

border-spacing - sets distance between cell's borders. applies only in case of "border-collapse: separate"

• 5px 1rem - rows spacing, then columns spacing

vertical-align

• top
• middle
• bottom
• baseline

empty-cells - specifies whether or not to display borders and background on empty cells in a table

caption-side - specifies the placement of a table caption

width - table width has higher priority than cell width

border - applies for any of the table elements