1. HTML tables are used for (shock!) tabular data.
  2. Basic layout: <table>, <tr>, <td>, <th>. [ Basic Table Source ]
    1. Each row is in a <tr>.
    2. Each cell in the row is in a <td> (table data).
    3. Headers are in a <th>.
      1. Not much difference from <td> than default styling.
      2. Not sure we need them anymore.
  3. With some basic styling. [ Styled Table Source ]
    1. And a <caption>.
    2. A little padding on the cells makes it looks less crowded.
    3. Text alignments appropriate to the data type.
    4. Centering.
    5. Font styles and decorations for headers.
      Could just as well have used td with a class.
  4. Borders. [ Styled Table Source ]
    1. The <td> (or <th>) can have a border.
    2. By default, the cells are separated, and each have their own border.
    3. border-collapse: collapse
      1. Applies only to table.
      2. Causes adjacent cells to share borders.
      3. If they styles disagree, they are subject to some peculiar priority rules, in which hidden always wins, none always loses, and other stuff happens in between.
  5. <td> can have a width, and borders may be selective.
    1. The bottom borders in the second row form an underline. [ Binary Conversion Example Source ]
    2. Also, you can avoid typing all that and make a more useful page. [ Any Binary Conversion Source ]
  6. Large table. [ Fall 2017 Schedule Source ]
  7. Borders. [ Spanning Source ]
    1. Cells may extend multiple columns or rows, with colspan or rowspan.
    2. A cell may do both.
    3. When laying out a row, positions may alredy be filled from above; they are skipped.