HTML Tables

Using a table is one of the best ways to present the data.

Create a table

We can use the <table> element to create a table.

• 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 the <th> element.

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

<table>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

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

Spanning 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>