Creating Tables of Data

June 22, 2017

In this lesson, you’ll learn:

How to build tables
How to merge cells
How to style tables

Creating Tables

Tables are easy to create in HTML if you know what you’re doing. To create a table, you’ll need the <table> element, the <tr> or table-row element, <td> or table-cell elements and <th> or table-header elements.

Tables are formed by placing <tr> table-rows directly inside of a <table>, and then filling them up from left to right with <th> table-headers or <td> table-cells. Take a look at the example below.

<table>
  <tr>
    <th>Years</th>
    <td>1991</td>
    <td>1992</td>
    <td>1993</td>
  </tr>
<table>

Code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <table>
    <tr>
      <th>Years</th>
      <td>1991</td>
      <td>1992</td>
      <td>1993</td>
    </tr>
  </table>
</body>
</html>

Result

Note: If you run the code above, but your tables don’t have the double margin lines as you see above — don’t worry. It just means that your browser’s default table styles are different. In fact, most newer browsers have cleaner table styling as compared to older browsers.

This is a table with one row, that has one header (the title for the row), and three regular cells. You can keep building the table with any combination of cells, but make sure that you use the same number of cells, or else the cells won’t line up correctly.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <table>
    <tr>
      <th>Years</th>
      <td>1991</td>
      <td>1992</td>
      <td>1993</td>
    </tr>
    <tr>
      <th>Records</th>
      <td>10</td>
      <td>15</td>
      <td>8</td>
    </tr>
    <tr>
      <th>Color</th>
      <td>Blue</td>
      <td>Red</td>
      <td>Green</td>
      <td>Yellow</td>
    </tr>
  </table>
</body>
</html>

Output:

What happens when you put the wrong number of cells in one row.

Adding Extra Information to Tables

You can use special HTML elements to make a header, footer or a caption for your table.

The <caption> element gives you a table caption.

<caption>My table</caption>

If you want to create a header and footer, you need to use the <thead>, <tbody>, and <tfoot> elements. Then place your <tr> elements inside each section. You can see an example below.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <caption>My table</caption>
  <table>
    <thead>
      <tr>
        <th></th>
        <th>Years</th>
        <th>Records</th>
        <th>Colors</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td></td>
        <td>1991</td>
        <td>10</td>
        <td>Blue</td>
      </tr>
      <tr>
        <td></td>
        <td>1992</td>
        <td>15</td>
        <td>Red</td>
      </tr>
      <tr>
        <td></td>
        <td>1993</td>
        <td>8</td>
        <td>Green</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <th>Total</th>
        <td>--</td>
        <td>33</td>
        <td>--</td>
    </tfoot>
  </table>
</body>
</html>

A similar table to the one above, but arranged vertically and with a footer section.

Merging Cells

You can merge cells to create longer ones by using the attributes colspan and rowspan.

To merge cells horizontally, add a colspan attribute with the number of columns you’d like the cell to span. Remember that this cell will take up the space of more than one cell, so adjust the number of cells in the row accordingly.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <caption>My table</caption>
  <table>
    <tr>
      <td>A regular cell</td>
      <td>A regular cell</td>
      <td>A regular cell</td>
      <td>A regular cell</td>
    </tr>
    <tr>
      <td colspan="3">A long cell</td>
      <td>A regular cell</td>
    </tr>
  </table>
</body>
</html>

You can do the same thing vertically with the rowspan attribute. Remember that the cell will take up space in the following rows, so adjust the number of cells in each row accordingly.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <caption>My table</caption>
  <table>
    <tr>
      <td rowspan="2">A tall cell</td>
      <td>A regular cell</td>
      <td>A regular cell</td>
      <td>A regular cell</td>
    </tr>
    <tr>
      <td>Only need</td>
      <td>3 cells</td>
      <td>To fill the row</td>
    </tr>
  </table>
</body>
</html>

Styling Tables

Tables have a number of unique properties that can be styled in CSS.

First of all, you can make sure that the table will stretch to fill the entire width of the page by adding 100% width:

table {
  width: 100%;
}

Use border-collapse to remove the whitespace in between the borders of the table.

table {
  border-collapse: collapse;
}

Code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    table {
      width: 100%;
      border-collapse: collapse;
    }
  </style>
</head>
<body>
  <caption>My table</caption>
  <table>
    <tr>
      <td rowspan="2">A tall cell</td>
      <td>A regular cell</td>
      <td>A regular cell</td>
      <td>A regular cell</td>
    </tr>
    <tr>
      <td>Only need</td>
      <td>3 cells</td>
      <td>To fill the row</td>
    </tr>
  </table>
</body>
</html>

Result:

For the opposite effect, use border-spacing to increase the amount of whitespace between the borders of the table.

table {
  border-spacing: 10px;
}

Use table-layout to ensure that all of the cells will stay the same width:

table {
   table-layout: fixed;
}

You can also control the width of each column by giving cells a width attribute:

<table>
  <tr>
    <td width="20%">A regular cell</td>
    <td width="30%">A regular cell</td>
    <td width="50%">A regular cell</td>
  </tr>
</table>

Try some of the things you just learned below:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    table {
      width: 100%;
      border-collapse: collapse;
    }
  </style>
</head>
<body>
  <table>
    <tr>
      <td width="20%">A regular cell</td>
      <td width="30%">A regular cell</td>
      <td width="50%">A regular cell</td>
    </tr>
  </table>
</body>
</html>

You can add margins, padding, borders and backgrounds to <table>, <th> and <td> elements just like any other element. However, <tr> styling doesn’t always work. Just stick to styling the table and cells and you will be able to make stunning table designs in your web pages.

You can also use vertical-align to align text to the top, bottom, and middle of the cell.

Summary

Congrats on finishing this tutorial on creating tables in HTML & CSS. To recap, you learned:

How to build tables
How to merge cells
How to style tables

See you in the next tutorial!