Tables in HTML 🧱

Tables on a webpage can be used to display data in an organized format.

In HTML, the fundamental unit of a table is a cell.

And cells are grouped into rows.

A table can have head body and foot .

⚡ In this blog, live preview of every code is given. Make sure to download the codes used in this blog and try to tweak them by your own. You can also use W3Schools Tryit Playground.

The code for a typical table in HTML `<table> </table>`

<table>
    <thead>
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Marks</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John</td>
            <td>Doe</td>
            <td>34</td>
        </tr>
        <tr>
            <td>Jane</td>
            <td>Doe</td>
            <td>24</td>

        </tr>
        <tr>
            <td>John</td>
            <td>Smith</td>
            <td>20</td>
        </tr>
        <tr>
            <td>Jane</td>
            <td>Smith</td>
            <td>25</td>
        </tr>

    </tbody>
    <tfoot>
        <tr>
            <td colspan="2">Total</td>
            <td>113</td>
        </tr>
    </tfoot>
</table>

The output:

The breakdown of the above code 🔯

All the code to create a table is wrapped inside <table> </table> tag.

This parent table tag can have three children <thead> </thead>, <tbody> </tbody> and <tfoot> </tfoot>.

Basically, these children tags of the table are rows or groups of rows.

And a row is created using <tr> </tr> tag.

And a row consists of cells.

A cell can be created using

<th> </th> tag, if bold text ( something like a heading is required ).
<td> </td> tag, if normal text is required.

Useful attributes

border , adds a border around the table and all of its cells. Further styling can be done using CSS.
```
  <table border="1">
      ...
  </table>
```
cellspacing gives spacing between cells and cellpadding adds spacing inside each cell.
```
  <table border="1" cellspacing="10" cellpadding="10">
      ...
  </table>
```
Check out the live effect of the above code

The output:

Colspan and Rowspan

They are the attributes given to cells <td> </td> and <th> </th> .

Colspan expands a particular cell by a given unit horizontally. It shifts the next cell in front of it. ( So, in this code I have not added any cell next to it ).

  <h2 id="withColspan2">A table with a colspan of 2 in of its cell</h2>
  <table border="1" cellpadding="20">
      <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
      </tr>
      <tr>
          <td>4</td>
          <td colspan="2">5 &emsp;&emsp;6 </td>
          <!-- <td>6</td> -->
      </tr>
      <tr>
          <td>7</td>
          <td>8</td>
          <td>9</td>
      </tr>
  </table>
  <hr>

  <h2 id="withColspan3">A table with a colspan of 3 in of its cell</h2>
  <table border="1" cellpadding="20">
      <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
      </tr>
      <tr>
          <td colspan="3">4 &emsp;&emsp; 5 &emsp;&emsp; 6</td>
          <!-- <td>5</td> -->
          <!-- <td>6</td> -->
      </tr>
      <tr>
          <td>7</td>
          <td>8</td>
          <td>9</td>
      </tr>
  </table>

Check out the live effect of the above code

⚡&emsp; is used to give spacing.

rowspan expands a particular cell by a given unit vertically. It shifts the next cell below it. ( So, in this code I have not added any cell below it ).

  <h2 id="withRowspan2">A table with a rowspan of 2 in of its cell</h2>
  <table border="1" cellpadding="20">
      <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
      </tr>
      <tr>
          <td>4</td>
          <td rowspan="2">5 <br><br><br> 8</td>
          <td>6</td>
      </tr>
      <tr>
          <td>7</td>
          <!-- <td>8</td> -->
          <td>9</td>
      </tr>
  </table>
  <hr>

  <h2 id="withRowspan3">A table with a rowspan of 3 in of its cell</h2>
  <table border="1" cellpadding="20">
      <tr>
          <td>1</td>
          <td rowspan="3">2 <br><br><br> 5 <br><br><br> 8</td>
          <td>3</td>
      </tr>
      <tr>
          <td>4</td>
          <!-- <td>5</td> -->
          <td>6</td>
      </tr>
      <tr>
          <td>7</td>
          <!-- <td>8</td> -->
          <td>9</td>
      </tr>
  </table>