HTML Tables

In the early days of the web Tables were a very important part of building layouts.

Later on they were replaced by CSS and its layout capabilities, and today we have powerful tools like CSS Flexbox and CSS Grid to build layouts. Tables are now used just for, guess what, building tables!

HTML Tables are a way to display data in rows and columns. They can be used to create everything from simple data displays to complex layouts.

The table tag

You define a table using the table tag:

<table>....</table>

Inside the table we'll define the data. We reason in terms of rows, which means we add rows into a table (not columns). We'll define columns inside a row.

Rows

A row is added using the tr tag, and that's the only thing we can add into a table element:

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

This is a table table with 3 rows.

The first row row can take the role of the header.

Column headers

The table header contains the name of a column, typically in a bold font.

Think about an Excel / Google Sheets document. The top A-B-C-D... header.

We define the header using the th tag.

<table>
  <tr>
    <th>Column 1</th>
    <th>Column 2</th>
    <th>Column 3</th>
  </tr>
  <tr>...</tr>
  <tr>...</tr>
</table>

This is a table table with 3 rows.

The table content

The content of the table is defined using td tags, inside the other trtr elements:

<table>
  <tr>
    <th>Column 1</th>
    <th>Column 2</th>
    <th>Column 3</th>
  </tr>
  <tr>
    <td>Row 1 Column 1</td>
    <td>Row 1 Column 2</td>
    <td>Row 1 Column 3</td>
  </tr>
  <tr>
    <td>Row 2 Column 1</td>
    <td>Row 2 Column 2</td>
    <td>Row 2 Column 3</td>
  </tr>
</table>

This is how browsers render it, if you don't add any CSS styling:

Example

<!DOCTYPE HTML>
  <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>Title of the Document</title>
    </head>
    <body>
      <h1>HTML Tables</h1>
      <table>
      <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
      </tr>
      <tr>
        <td>Row 1 Column 1</td>
        <td>Row 1 Column 2</td>
        <td>Row 1 Column 3</td>
      </tr>
      <tr>
        <td>Row 2 Column 1</td>
        <td>Row 2 Column 2</td>
        <td>Row 2 Column 3</td>
      </tr>
    </table>
    </body>
</html>

Try it Yourself »

Adding this CSS:

<style>
  th, td{
    padding :10px
    border :1px solid #333
  }
</style>

makes the table look more like a proper table:

Basic Table Structure

The first row row can take the role of the header.

table:The container element for the entire table.
tr: Stands for "table row" and contains the cells in a row.
td: Stands for "table data" and contains the actual data in a cell.

Table Border

By default, HTML tables have no border. You can add a border to your table by using the border attribute on the <table> tag:

Example

<!DOCTYPE HTML>
  <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>Title of the Document</title>
    </head>
    <body>
      <h1>HTML Tables</h1>
      <table border="1">
      <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
      </tr>
      <tr>
        <td>Row 1 Column 1</td>
        <td>Row 1 Column 2</td>
        <td>Row 1 Column 3</td>
      </tr>
      <tr>
        <td>Row 2 Column 1</td>
        <td>Row 2 Column 2</td>
        <td>Row 2 Column 3</td>
      </tr>
    </table>
    </body>
</html>

Try it Yourself »

Table Size

You can set the size of your table by using the width and heightattributes on the <table> tag:

Example

<!DOCTYPE HTML>
  <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>Title of the Document</title>
    </head>
    <body>
      <h1>HTML Tables</h1>
      <table width="50%" height="200px">
      <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
      </tr>
      <tr>
        <td>Row 1 Column 1</td>
        <td>Row 1 Column 2</td>
        <td>Row 1 Column 3</td>
      </tr>
      <tr>
        <td>Row 2 Column 1</td>
        <td>Row 2 Column 2</td>
        <td>Row 2 Column 3</td>
      </tr>
    </table>
    </body>
</html>

Try it Yourself »

Padding & Spacing

You can add padding and spacing to your table by using the cellpadding and cellspacingattributes on the <table> tag:

Example

<!DOCTYPE HTML>
  <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>Title of the Document</title>
    </head>
    <body>
      <h1>HTML Tables</h1>
      <table border="1"  cellpadding="10"  cellspacing="5">
      <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
      </tr>
      <tr>
        <td>Row 1 Column 1</td>
        <td>Row 1 Column 2</td>
        <td>Row 1 Column 3</td>
      </tr>
      <tr>
        <td>Row 2 Column 1</td>
        <td>Row 2 Column 2</td>
        <td>Row 2 Column 3</td>
      </tr>
    </table>
    </body>
</html>

Try it Yourself »

Colspan & Rowspan

The colspan attribute in HTML is used to specify the number of columns a cell should span. It is used to merge two or more adjacent cells horizontally into a single cell.

Example

<!DOCTYPE HTML>
  <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>Title of the Document</title>
    </head>
    <body>
      <h1>HTML Tables</h1>
      <table border="1"  cellpadding="10"  cellspacing="5">
      <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
      </tr>
      <tr>
        <td colspan="2">Row 1 Columns 1-2</td>
        <td>Row 1 Column 3</td>
        </tr>
        <tr>
        <td colspan="3">Row 2 Columns 1-3</td>
      </tr>
    </table>
    </body>
</html>

Try it Yourself »

The rowspan attribute in HTML is used to specify the number of rows a cell should span. It is used to merge two or more adjacent cells vertically into a single cell.

Example

<!DOCTYPE HTML>
  <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>Title of the Document</title>
    </head>
    <body>
      <h1>HTML Tables</h1>
      <table border="1"  cellpadding="10"  cellspacing="5">
      <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
      </tr>
      <tr>
        <td colspan="2" rowspan="2">Rows 1-2 Columns 1-2</td>
        <td>Row 1 Column 3</td>
        </tr>
        <tr>
        <td>Row 1 Column 3</td>
      </tr>
    </table>
    </body>
</html>

Try it Yourself »

The colspan and rowspan attributes are useful when we need to merge cells in an HTML table, especially for cells that contain a header or a label. By using these attributes, we can create more complex table layouts and make our tables more readable and visually appealing.

Note: A row can decide to span over 2 or more columns, using the colspan attribute. Or it can span over 2 or more rows, using the rowspan attribute:

Table Colgroup

The <colgroup>tag in HTML is used to group a set of columns in an HTML table. It is used to apply styles to a specific set of columns or column groups. The <colgroup> tag is placed immediately after the <table> tag and before the <thead>;, <tbody>, <tfoot>, or <tr> tags.

Example

<!DOCTYPE HTML>
  <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>Title of the Document</title>
    </head>
    <body>
      <h1>HTML Tables</h1>
      <table>
      <colgroup>
        <col style="background-color:#ccc;">
        <col style="background-color:#ddd;">
      </colgroup>
      <thead>
        <tr>
          <th>First Name</th>
          <th>Last Name</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>Muhammad</th>
          <th>Ahmad</th>
        </tr>
        <tr>
          <th>Fatima</th>
          <th>Abdullahi</th>
        </tr>
      </tbody>
    </table>
    </body>
</html>

Try it Yourself »

In this example, the <colgroup> tag is used to group two columns and set their background colors to #ccc and #ddd respectively.

Row headings

Before I explained how you can have column headings, using thethtag inside the firsttrtag of the table. 54 You can add a th tag as the first element inside a tr that's not the first tr of the table, to have row headings:

Example

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Title of the Document</title>
  </head>
  <body>
    <h1>HTML Tables</h1>
    <table border="1"  cellpadding="10"  cellspacing="5">
    <tr>
      <th></th>
      <th>Column 2</th>
      <th>Column 3</th>
    </tr>
    <tr>
      <th>Row 1</th>
      <td>Col 2</td>
      <td>Col 3</td>
    </tr>
    <tr>
      <th>Row 2</th>
      <td>Col 2</td>
      <td>Col 3</td>
    </tr>
  </table>
  </body>
</html>

Try it Yourself »

Table caption

A table should have a caption tag that describes its content. That tag should be put immediately after the opening table tag:

Example

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Title of the Document</title>
  </head>
  <body>
    <h1>HTML Tables</h1>
    <table>
    <caption>
        Dog Age
    </caption>
    <tr>
      <th>Dog</th>
      <th>Age</th>
    </tr>
    <tr>
      <td>Roger</td>
      <td>7</td>
    </tr>
  </table>
  </body>
</html>

Try it Yourself »

HTML tables are a useful way to display data in a structured format on a web page. With the use of various attributes and tags, we can customize the look and feel of our tables to fit our specific needs. Understanding the basics of table borders, sizing, headers, padding and spacing, colspan and rowspan, table styling, and colgroup can help us create professional-looking tables that are easy to read and navigate. Lets look at List in the next chapter.