Tables cheat sheet

Tags

  • <table>

    • The element that surrounds all other table elements.

    • No other table element can be outside the <table>

  • <tr>

    • Defines a row of cells in the table.

  • <th scope="…">

    • Defines a heading cell to label a row or column.

    • scope="row" — for row labels.

    • scope="col" — for column labels.

  • <td>

    • Defines a single piece of data in the table—a cell.

    • Can have many other HTML elements inside, including other tables.

    • rowspan="…" — allows merging of cells vertically.

    • colspan="…" — allows merging of cells horizontally.

  • <thead>

    • To group the table rows that define the headers.

    • Must have at least one <tr> inside.

  • <tbody>

    • To group the table rows that account for the main data.

  • <tfoot>

    • To group the table rows that define the footer, like totals.

    • Must have at least one <tr> inside.

  • <caption>

    • To add a visible caption that describes the purpose of the table.

    • Really good for accessibility.

  • <col>

    • Non-visible element that defines a column for styling.

  • <colgroup>

    • Non-visible element that defines a group of columns for accessibility and styling.

Examples

  • Headers & footers

    •   <table>
          <thead>
            <tr>
              <th scope="col">Name</th>
              <th scope="col">Price</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Chocolate</td>
              <td>$4.99</td>
            </tr>
            <tr>
              <td>Candy</td>
              <td>$3.99</td>
            </tr>
          </tbody>
          <tfoot>
            <tr>
              <th scope="total">Total</th>
              <td>$8.89</td>
            </tr>
          </tfoot>
        </table>
      
  • Merging cells

    •   <table>
          <tr>
            <td>&nbsp;</td>
            <th scope="col">Name</th>
            <th scope="col">Discovery</th>
          </tr>
          <tr>
            <th rowspan="2" scope="row">Plant eaters</th>
            <td>Apatosaurus</td>
            <td>1877</td>
          </tr>
          <tr>
            <td>Stegosaurus</td>
            <td>1877</td>
          </tr>
          <tr>
            <th scope="row">Meat eaters</th>
            <td>Tyrannosaurus</td>
            <td>1905</td>
          </tr>
        </table>
      
  • Captioned table

    •   <table>
          <caption>Important dinosaur discoveries from history.</caption>
          <tr>
            <th scope="col">Name</th>
            <th scope="col">Discovery</th>
          </tr>
          <tr>
            <td>Apatosaurus</td>
            <td>1877</td>
          </tr>
          <tr>
            <td>Stegosaurus</td>
            <td>1877</td>
          </tr>
        </table>
      

CSS snippets

  • Style columns

    •   <table>
          <col class="thang">
          <colgroup class="things">
            <col>
            <col>
          </colgroup>
        ⋮
      
        .thang {
          background-color: #e2e2e2;
        }
      
        .things {
          background-color: #ccc;
        }
      
  • Remove border doubling

    • table {
        border-collapse: collapse;
      }
      
  • Zebra stripe rows

    • tr:nth-child(even) {
        background-color: #e2e2e2;
      }