HTML Cheat Sheet

Tag Description Attributes Example
<table> Defines the structure of a table and contains all other table elements. None, use CSS to style. 
<table>
    <tr>
        <td>Cell content</td>
    </tr>
</table>
<tr> Defines a table row. Global attributes only (for example: id, class, style) 
<tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
</tr>
<th> Defines a table header cell.
  • scope: Specifies header's association
  • colspan: Number of columns to span
  • rowspan: Number of rows to span
  • headers: Associates with other headers
 
<th scope="col" colspan="2">Header Cell</th>
<td> Defines a standard data cell in a table.
  • colspan: Specifies the number of columns a cell should span
  • rowspan: Specifies the number of rows a cell should span
  • Global attributes (e.g., class, id, style)
 
<td colspan="2">Cell content</td>
<caption> Specifies a caption for a table, useful for providing more information about the table's contents.
  • Global attributes only
  • Use CSS to style (e.g., caption-side, text-align)
 
<table>
    <caption>Monthly Savings</caption>
    <!-- table content -->
</table>
<thead> Groups header content in a table.
  • Global attributes only.
  • Use CSS to style.
 
<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
        </tr>
    </thead>
    <!-- table body content -->
</table>
<tbody> Groups body content of a table.
  • Global attributes only.
  • Use CSS to style.
 
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
    </tr>
</thead>
<tbody>
        <tr>
            <td>John</td>
            <td>30</td>
        </tr>
        <tr>
            <td>Jane</td>
            <td>25</td>
        </tr>
    </tbody>
</table>
<tfoot> Groups footer content for a table.
  • Global attributes only.
  • Use CSS for style.
 
<table>
    <thead>
        <tr>
            <th>Item</th>
            <th>Price</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Apple</td>
            <td>$1</td>
        </tr>
        <tr>
            <td>Banana</td>
            <td>$0.50</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Total</td>
            <td>$1.50</td>
        </tr>
    </tfoot>
</table>
<colgroup> Specifies a group of columns for formatting.
  • span: Specifies the number of columns the group should span
  • Global attributes (e.g., class, id, style)
  • Use CSS for styling instead of deprecated HTML attributes
 
<table>
    <colgroup>
        <col style="background-color: #f1f1f1">
        <col span="2" style="background-color: #e0e0e0">
    </colgroup>
    <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
    </tr>
</table>
<col> Specifies column properties.
  • span: Specifies number of columns to span
  • Global attributes (e.g., class, id, style)
  • Use CSS for styling (width, alignment, etc.)
 
<table>
    <colgroup>
        <col style="background-color: #f1f1f1">
        <col span="2" style="width: 100px">
    </colgroup>
    <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
    </tr>
</table>