HTML First Steps - Lesson 5 - Tables

Extra Block Types (EBT) - New Layout Builder experience❗

Extra Block Types (EBT) - styled, customizable block types: Slideshows, Tabs, Cards, Accordions and many others. Built-in settings for background, DOM Box, javascript plugins. Experience the future of layout building today.

Demo EBT modules Download EBT modules

16/04/2025, by Ivan

One of the important ways to store information is with tables. Tables are used in Excel, Access, and other databases. Tables are a clear way to present data, and they make it easy to create charts and diagrams. In this lesson, we’ll look at how to create tables in HTML using the tags <table>, <tr>, <td>, <th>, <thead>, <tbody>, and <tfoot>.

The <table> Tag

<table> is the main table tag that contains all other table elements.

<table>
</table>

The <tr> Tag

<tr> defines a row in the table. To create three rows, you need three <tr></tr> pairs:

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

The <td> Tag

<td> defines a table cell. Each cell should be inside a row. Let’s create a table with four cells per row:

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

Let’s now fill the table with data:

<table>
  <tr>
    <td>Number</td><td>Last Name</td><td>First Name</td><td>Middle Name</td>
  </tr>
  <tr>
    <td>1</td><td>Ivanov</td><td>Ivan</td><td>Ivanovich</td>
  </tr>
  <tr>
    <td>2</td><td>Petrov</td><td>Petr</td><td>Petrovich</td>
  </tr>
</table>

The <thead>, <tbody>, and <tfoot> Tags

<thead> defines the header section, <tbody> contains the body (main content), and <tfoot> defines the footer.

<table>
  <thead>
    <tr>
      <th>Number</th><th>Last Name</th><th>First Name</th><th>Middle Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td><td>Ivanov</td><td>Ivan</td><td>Ivanovich</td>
    </tr>
    <tr>
      <td>2</td><td>Petrov</td><td>Petr</td><td>Petrovich</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="4">Table created in 2012</td>
    </tr>
  </tfoot>
</table>

The colspan Attribute

colspan merges cells horizontally. For example, in the footer, instead of four separate cells, we use one cell that spans all four columns:

<td colspan="4">Table created in 2012</td>

The value of colspan determines how many cells are merged.