HTML Tables

Table is one of the best ways to present the data.

Create a table

To create a table, we can use <table> element.

  • Tables are divided into table rows with the <tr> tag.
  • Table rows are divided into table columns (table data) with the <td> tag.
  • To add table headings, we use <th> element.
<table>
   <tr>
      <td></td>
      <td></td>
      <td></td>
   </tr>
</table>

A border can be added using the border attribute: <table border="3">

Spaning columns and rows

  • Table data can span columns using the colspan attribute.
  • Table data can span rows using the rowspan attribute.
<table>
  <tr>
    <th>Monday</th>
    <th>Tuesday</th>
    <th>Wednesday</th>
  </tr>
  <tr>
    <td colspan="2">Out of Town</td>
    <td>Back in Town</td>
  </tr>
</table>

Table body

Tables can be split into three main sections: a head, a body, and a footer.

  • A table’s head is created with the <thead> element.
  • A table’s body is created with the <tbody> element.
  • A table’s footer is created with the <tfoot> element.
<table>
  <thead>
    <tr>
      <th>Quarter</th>
      <th>Revenue</th>
      <th>Costs</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>Q1</th>
      <td>$12M</td>
      <td>$10M</td>
    </tr>
    <tr>
      <th>Q2</th>
      <td>$16M</td>
      <td>$2M</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>Total</th>
      <td>$32M</td>
      <td>$12M</td>
    </tr>
  </tfoot>
</table>