HTML tables allow web developers to arrange data into rows and columns.

To create a simple table, we need <table>, <tr>, <td>. (or simply table>tr>td*2)

<table>
  <tr>
    <td>Marketing</td>
    <td>$200</td>
  </tr>
  <tr>
    <td>Accounting</td>
    <td>$100</td>
  </tr>
</table>

You can add headers on each columns by replacing <th> with <tr>

<table>
  <tr>
    <th>Category</th>
    <th>Amount</th>
  </tr>
</table>

Adding footer by using <tfoot>:

<tfoot>
  <tr>
    <th>Total</th>
    <th>$300</th>
  </tr>
</tfoot>

Style your table so it looks prettier:

<style>
  /* Apply styling on all three tags */
  table,
  td,
  th {
    /* Thin solid gray border */
    border: 1px solid gray;
    /* collapse the line in between each cell */
    border-collapse: collapse;
    /* make element far away from the border */
    padding: 5px;
  }
  tfoot {
    text-align: left;
  }
</style>

Note: In order to make searching engine quickly locate your tag, you must use <thead>, <tbody> and <tfoot> and organize your code:

<table>
  <!-- thead section -->
  <thead>
    <tr>
      <!-- merge 2 rows -->
      <th colspan="2">Expenses</th>
    </tr>
    <tr>
      <th>Category</th>
      <th>Amount</th>
    </tr>
  </thead>
  <!-- tbody section -->
  <tbody>
    <tr>
      <td>Marketing</td>
      <td>$200</td>
    </tr>
    <tr>
      <td>Accounting</td>
      <td>$100</td>
    </tr>
  </tbody>
  <!-- tfoot section -->
  <tfoot>
    <tr>
      <th>Total</th>
      <th>$300</th>
    </tr>
  </tfoot>
</table>

Output: