tables in HTML

The HTML <table> element represents tabular data. Tabular data is information presented in a two-dimensional table consisting of rows and columns.

<tr> tag

The HTML <tr> element defines a row of cells in a table.

<td> tag

The HTML <td> element defines a cell of a table that contains data.

html:

<table>
  <tr>
    <td>first cell</td>
    <td>second cell</td>
  </tr>
  <tr>
    <td>third cell</td>
    <td>fourth cell</td>
  </tr>
</table>

The <td> tag supports two attributes - colspan and rowspan. The colspan attribute allows to indicate for how many columns the cell extends and rowspan attribute indicates for how many rows the cell extends.

<table>
  <tr>
    <td></td>
    <td>Monday</td>
    <td>Tuesday</td>
    <td>Wednesday</td>
  </tr>
  <tr>
    <td>16:00</td>
    <td rowspan="2">Bike</td>
    <td colspan="2">Swimming pool</td>
  </tr>
  <tr>
    <td>18:00</td>
    <td>running</td>
    <td>dance</td>
  </tr>
</table>

<th> tag

The HTML <th> element defines a cell as header of a group of table cells. Browsers render <th> with some additional styling.

html:

<table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <th>January</th>
    <td>200$</td>
  </tr>
  <tr>
    <th>February</th>
    <td>150$</td>
  </tr>
</table>

result:

<thead> tag

The HTML <thead> defines a set of rows defining the head of the columns of the table..

html:

<table>
  <thead>
    <tr>
      <td>product</td>
      <td>revenue</td>
    </tr>
  </thead>​​​​​​​
  <tbody>
    <tr>
      <td>course</td>
      <td>book</td>
    </tr>
    <tr>
      <td>2,000</td>
      <td>1,500</td>
    </tr>
  </tbody>
</table>

result

<tfoot> tag

The HTML <tfoot> element defines a set of rows summarizing the columns of the table.

html:

<table>
  <tbody>
    <tr>
      <td>Body content 1</td>
      <td>Body content 2</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Footer content 1</td>
      <td>Footer content 2</td>
    </tr>
  </tfoot>
</table>

result:                                        

nesting tables

We can nest one table inside another.

html:

<table>
  <tr>
    <td>1</td>
    <td>
      <table>
        <tr>
          <td>2</td>
          <td>3</td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td>4</td>
​​​​​​​    <td>5</td>
  </tr>
</table>

result: