DONT ADD ANYTHING HERE!

The table element represents data with more than one dimension, in the form of a table.

Notes

  1. tbody
    1. May have multiple tbody elements
    2. But cells with colspan must "not extend past the end of its row group established by a tbody element"
  2. tfoot
    1. In HTML-5, must go after tbody
    2. Otherwise, will not validate
  3. thead
    The thead element represents the block of rows that consist of the column labels (headers) for the parent table element
  4. tr
    The tr element represents a row of cells in a table.
  5. td
    The td element represents a data cell in a table.
  6. th
    1. The th element represents a header cell in a table.
    2. The th element may have a scope content attribute specified
  7. colgroup
    1. May use span attribute or col
    2. The colgroup element must not appear inside the thead element
    3. colgroup element must appear before thead and after the caption element, if there is one
    4. May have multiple colgroup elements
    5. Only border, background, width and visibility may be applied to col and colgroup elements
    6. color, for example, cannot be changed
    7. If the colgroup element contains no col elements, then the element may have a span content attribute specified, whose value must be a valid non-negative integer greater than zero.
  8. col
    1. The col element is a void element and enclosing colgroup must not have a span attribute
    2. But col may take span attribute
    3. col has no end tag and must be a child of colgroup which has no span attribute
    4. The col element may have a span content attribute specified, whose value must be a valid non-negative integer greater than zero.
  9. rowspan colspan
    1. Makes it possible for table data elements to span across columns and row
    2. The td and th elements may have a colspan content attribute specified
    3. The td and th elements may have a rowspan content attribute specified
  10. vertical-align
    May take values of
    1. top
    2. middle
    3. bottom
  11. text-align
    May take values of
    1. left
    2. center
    3. right
  12. table-layout
    1. The table-layout property defines the algorithm used to lay out table cells, rows, and columns
    2. Use table-layout:fixed for faster rendering of tables
  13. border-collapse
    Possible values are
    1. collapse
    2. separate
  14. table border
    1. Acceptable ways of not showing a border
      1. border:none
      2. border:0
    2. But they do subtly different things: border:0 sets the value of border-width to zero.
    3. From within HTML, use border=1 as attribute to table tag (deprecated)
  15. border-spacing
    1. May take one or two (space-separated) length values
    2. When one length value is specified, it defines both the horizontal and vertical spacings between cells.
    3. When two length values are specified, the first value defines the horizontal spacing between cells (i.e., the space between cells in adjacent columns), and the second value defines the vertical spacing between cells (i.e., the space between cells in adjacent rows).
    4. Note that this
      First of two: left and right
      Last of two: top and bottom
      is the opposite of what happens with border (see example below)
    5. Only works if the value of border-collapse is separate
  16. caption
    1. The caption element represents the title of the table that is its parent, if it has a parent and that is a table element
    2. caption, if present, must be be a first-child of the table element
  17. caption-side
    May take values of
    1. top
    2. bottom
  18. center a table
    use margin: 0 auto
  19. empty cells
    Possible values are
    1. hide
    2. show
  20. permitted content (table)
    In this order:
    1. an optional caption element
    2. zero or more colgroup elements
    3. an optional thead element
    4. either one of the following
      1. zero or more tbody elements
      2. one or more tr elements
    5. an optional tfoot element

Example

HTML

<table>
    <caption>caption</caption>
    <tr>
        <th>head</th>
    </tr>
    <tr>
         <td>data</td>
    </tr>
</table>

CSS

table, th, td {
    border: 1px solid green;
  }

Browser

caption
head
data

Example

HTML

<table>
    <caption>caption</caption>
    <thead>
        <tr>
            <th>h</th>
            <th>h</th>
            <th>h</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>d</td>
            <td>d</td>
            <td>d</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>f</td>
            <td>f</td>
            <td>f</td>
        </tr>
    </tfoot>
</table>

CSS

table, th, td {
    border: 1px solid green;
  }

Browser

caption
h h h
d d d
f f f

Example (colspan)

HTML

<table>
    <caption>caption</caption>
    <thead>
        <tr>
            <th colspan="3">h</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td colspan="2">d</td>
           <td>d</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3">f</td>
        </tr>
    </tfoot>
</table>

CSS

table, th, td {
    border: 1px solid green;
  }

Browser

caption
h
d d
f

Example (rowspan)

HTML

<table>
    <caption>caption</caption>
    <thead>
        <tr>
            <th>h</th>
            <th>h</th>
            <th>h</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td rowspan="2">d</td>
            <td>d</td>
            <td>d</td>
        </tr>
        <tr>
             <td>d</td>
            <td>d</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>f</td>
            <td>f</td>
            <td>f</td>
        </tr>
    </tfoot>
</table>

CSS

table, th, td {
    border: 1px solid green;
  }

Browser

caption
h h h
d d d
d d
f f f

Example (caption-side)

HTML

<table></table>
    <caption>caption</caption>
    <thead>
        <tr>
            <th>h</th>
            <th>h</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>d</td>
            <td>d</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>f</td>
            <td>f</td>
        </tr>
    </tfoot>
</table>

CSS

    table, th, td {
      border: 1px solid green;
    
    }
    table {
      caption-side:bottom;
    }

Browser

caption
h h
d d
f f

Example (border-collapse)

HTML

<table>
    <caption>caption</caption>
    <thead>
        <tr>
            <th>h</th>
            <th>h</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>d</td>
            <td>d</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>f</td>
            <td>f</td>
        </tr>
    </tfoot>
</table>

CSS

    table, th, td {
      border: 1px solid green;
    
    }
    table {
      border-collapse:collapse;
    }

Browser

caption
h h
d d
f f

Example (colgroup)

HTML

<table>
    <caption>caption</caption>
    <colgroup span="2"></colgroup>
  <thead>
      <tr>
          <th>h</th>
          <th>h</th>
          <th>h</th>
      </tr>
  </thead>
  <tbody>
      <tr>
          <td>d</td>
          <td>d</td>
          <td>d</td>
      </tr>
      <tr>
           <td>d</td>
           <td>d</td>
          <td>d</td>
      </tr>
  </tbody>
  <tfoot>
      <tr>
          <td>f</td>
          <td>f</td>
          <td>f</td>
      </tr>
  </tfoot>
</table>

CSS

table, th, td {
    border: 1px solid green;
  }
colgroup {
    background-color:orange;
  }

Browser

caption
h h h
d d d
d d d
f f f

Example (colgroup col)

HTML

<table>
    <caption>caption</caption>
    <colgroup>
        <col>
        <col span="2">
    </colgroup>
    <thead>
        <tr>
            <th>h</th>
            <th>h</th>
            <th>h</th>
        </tr>
    </thead>
     <tbody>
        <tr>
            <td>d</td>
            <td>d</td>
            <td>d</td>
        </tr>
        <tr>
            <td>d</td>
            <td>d</td>
            <td>d</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>f</td>
            <td>f</td>
            <td>f</td>
        </tr>
    </tfoot>
</table>

CSS

table, th, td {
    border: 1px solid green;
  }
col:first-of-type{
    background-color:orange;
  }
col:nth-of-type(2){
    background-color:yellow;
  }

Browser

caption
h h h
d d d
d d d
f f f

Example (Empty Cells)

HTML

<table>
    <caption>caption</caption>
    <thead>
        <tr>
            <th>h</th>
            <th>h</th>
            <th>h</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>d</td>
            <td>d</td>
            <td>d</td>
        </tr>
        <tr>
            <td>d</td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>f</td>
            <td>f</td>
            <td>f</td>
        </tr>
</table>

CSS

table, th, td {
    border: 1px solid green;
    empty-cells: hide;
  }

Browser

caption
h h h
d d d
d
f f f

Example (vertical-align)

HTML

<table>
    <caption>caption</caption>
    <thead>
        <tr>
            <th>h</th>
            <th>h</th>
            <th>h</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>d</td>
            <td>d</td>
            <td>d</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>f</td>
            <td>f</td>
            <td>f</td>
        </tr>
    </tfoot>
</table>

CSS

table, th, td {
    border: 1px solid green;
  }
tbody td {
    height: 3em;
  }
tbody td:first-of-type {
    vertical-align:top;
  }
tbody td:nth-of-type(2) {
    vertical-align:middle;
  }
tbody td:nth-of-type(3) {
    vertical-align: bottom;
  }

Browser

caption
h h h
d d d
f f f

Example (text-align)

HTML

<table>
    <caption>caption</caption>
    <thead>
        <tr>
            <th>h</th>
            <th>h</th>
            <th>h</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>d</td>
            <td>d</td>
            <td>d</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>f</td>
            <td>f</td>
            <td>f</td>
        </tr>
    </tfoot>
</table>

CSS

table, th, td {
    border: 1px solid green;
  }
tbody td {
    width: 3em;
  }
tbody td:first-of-type {
    text-align:left
  }
tbody td:nth-of-type(2) {
    text-align:center;
  }
tbody td:nth-of-type(3) {
    text-align:right;
  }

Browser

caption
h h h
d d d
f f f

Example (border-spacing)

HTML

<table>
    <caption>caption</caption>
    <thead>
        <tr>
            <th>h</th>
            <th>h</th>
            <th>h</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>d</td>
            <td>d</td>
            <td>d</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>f</td>
            <td>f</td>
            <td>f</td>
        </tr>
    </tfoot>
</table>

CSS

table, th, td {
    border: 1px solid green;
  }

table {
    border-spacing: 5px 2rem;
  }

Browser

caption
h h h
d d d
f f f

Example (border-spacing and border)

Note that when two CSS values are given, border and border-spacing behave in a diametrically opposed fashion! The first value refers to top-and-bottom with border, but refers to left-and-right with border-spacing

border

h1 h2
d1 d2

CSS

#tableThirteen,
#tableThirteen td,
#tableThirteen th {
    border-style: solid;
    border-width: 0.1em 1em;
    border-color: blue;

}

border-spacing

h1 h2
d1 d2

CSS

#tableFourteen,
#tableFourteen th,
#tableFourteen td {
    border: 1px solid green;
    border-spacing: 1px 10px;
}

References

MDN: Table Element
W3C: The table element
W3C: Caption element
W3C: colgroup
W3C: col
W3C: tbody
W3C: thead
W3C: tfoot
W3C: tr
W3C: td
W3C: th
(SO) HTML Element COL, color & width CSS properties not working
W3Schools: CSS table-layout Property