When you're building a project that needs to represent data visually, you will need a good way to display the information so it's easy to read and understand.

Now, depending on the type of data, you can select between different representation methods using HTML elements.

In most cases, tables are more convenient to display large amounts of structured data nicely. That’s why, in this article, we are going to learn how to use tables in HTML and then how to style them.

But, first things first – what is a table in HTML?

What is a Table in HTML?

A table is nothing more than a way of representing data in rows and columns. We can also also define a table as a group of rows each containig a group of cells.

HTML tables allow web developers to arrange data into rows and columns. With tables you can arrange data like text, images, links, other tables, and more into rows and columns of cells.

You can create a table in HTML using elements. A table can be declared using using three main elements, namely:

  • <table> – which is the main container.
  • <tr> – represents the rows.
  • <td> – used to create data cells.

HTML Table Syntax:

<table>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
    <td>Cell 3</td>
  </tr>
  <tr>
    <td>Cell 4</td>
    <td>Cell 5</td>
    <td>Cell 6</td>
  </tr>
</table>
Cell 1 Cell 2 Cell 3
Cell 4 Cell 5 Cell 6

Now that we've learned the basic HTML table structure, it's about time we create a more useful table with advanced features – like other elements we can use within the <table>.

How to Add a Table Heading in HTML

You can add a table heading using the <th> tag. This tag will replace the <td> tag which is used to represent actual data cells.

Normally you would make your top row the table heading as shown below. But you can also use the <th> element in any row. Headings, which are defined in the <th> tag, are centered and bold by default.
Example with <th>

<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
   <td>TechMania</td>
   <td>Maria</td>
   <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial</td>
    <td>Francisco</td>
    <td>Mexico</td>
  </tr>
</table>
Company Contact Country
TechMania Maria Germany
Centro comercial Francisco Mexico

In the above example, we can see the role that the <th> tag plays – it provides information for the rest of the cells in the columns it belongs to.

How to Use the Scope Attribute in HTML

The scope attribute defines a way to associate header cells and data cells in a table.

The scope attribute identifies whether a cell is a header for a column or a header for a row.

This attribute can only be declared in a header cell and takes the values "col", "row", "colgroup" and "rowgroup". The values "col" and "row" indicate that the header cell is providing header information for the rest of the cells in the column or row (respectively) where it's located.

Scope Attribute Syntax

<th scope="value">

Example in code

<table>
  <tr>
    <th scope="row">Day</th>
    <th>Today</th>
    <th>Tomorrow</th>
    <th>Thursday</th>
  </tr>

  <tr>
    <th>Condition</th>
    <td>Sunny</td>
    <td>Mostly sunny</td>
    <td>Partly cloudy</td>
  </tr>

  <tr>
    <th>Temperature</th>
    <td>19°C</td>
    <td>17°C</td>
    <td>12°C</td>
  </tr>
</table>
Day Today Tomorrow Thursday
Condition Sunny Mostly sunny Partly cloudy
Temperature 19°C 17°C 12°C

How to Add a Caption to a Table

This is another attribute that makes the table more readable. The main use of a caption is to provide a description about the data presented in a table.

To insert the caption use the <caption> element right after the table's opening tag.

Caption Syntax

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

Example in Code

<table>
  <caption>Fuel consumption of cars during the drive tests</caption>
  <tr>
    <th scope="col">Car</th>
    <th>January</th>
    <th>February</th>
    <th>March</th>
  </tr>
  <tr>
    <th>G-Wagon</th>
    <td>30 gal</td>
    <td>82 gal</td>
    <td>70 gal</td>
  </tr>
</table>
Fuel consumption of cars during the drive tests
Car January February March
G-Wagon 30 gal 82 gal 70 gal

How to Use Cell Spanning in an HTML Table

You might have seen cells that stretch across two or more columns or rows in a table. This is called cell spanning.

You can create cells that span rows and columns using two attributes, <td> and <tr>. You need two other cell attributes to make this work, colspan for horizontal and rowspan for vertical spanning.

Youc an assign these attributes an interger value of a number grater than zero, representing the number of cells you wish it to span.

Example in code:

<table>
  <tr>
    <th></th>
    <th>Day 1</th>
    <th>Day 2</th>
    <th>Day 3</th>
    <th>Day 4</th>
  </tr>
  <tr>
    <th>Mike (injured)</th>
    <td colspan="3">0 km</td>
    <td>4 km</td>
  </tr>
  <tr>
    <th>Susan</th>
    <td>23 km</td>
    <td>18 km</td>
    <td>19 km</td>
    <td>15 km</td>
  </tr>
</table>
Day 1 Day 2 Day 3 Day 4
Mike (injured) 0 km 4 km
Susan 23 km 18 km 19 km 15 km

Notice that in the example above, we have a cell spanning 3 cells as indicated by colspan. The same thing happens in the case of rowspan but in this case it will be vertical spanning.

Example of code:

<table>
  <tr>
    <th></th>
    <th>Basic</th>
    <th>Full</th>
  </tr>
  <tr>
    <th>Setup</th>
    <td rowspan="2">Free!</td>
    <td>$49.99</td>
  </tr>
  <tr>
    <th>First year</th>
    <td>$19.99</td>
  </tr>
  <tr>
    <th>Second year</th>
    <td>$9.99</td>
    <td>$29.99</td>
  </tr>
</table>
Basic Full
Setup Free! $49.99
First year $19.99
Second year $9.99 $29.99

When using colspan and rowspan, make sure you declare them correctly to avoid overlapping cells.

How to Add a Table Header, Body, & Footer in HTML Tables

Just like websites that have three main sections, so too does a table. We can divide our tables into three main parts: the header, body, and footer.

  • <thead> – used to create a separate header for a table.
  • <tbody> – indicates the main body of the table.
  • <tfoot> – creates a separate footer for the table.

To better understand how this works, let's see an example using data from two groups. The table has a heading with rows, a footer with a summary of the data, and a block of rows containg the body of the table:

<table>
  <thead>
    <tr>
      <th></th>
      <th colspan="2">Anthony</th>
      <th colspan="2">Lione</th>
    </tr>
    <tr>
      <th scope="col">Date</th>
      <th>Income</th>
      <th>Outcome</th>
      <th>Income</th>
      <th>Outcome</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <th>07/15</th>
      <td>$200,00</td>
      <td>$50,00</td>
      <td>$0</td>
      <td>$0</td>
    </tr>
    <tr>
      <th>07/28</th>
      <td>$0,00</td>
      <td>$100,00</td>
      <td>$100,00</td>
      <td>$0,00</td>
    </tr>
  </tbody>
    
  <tfoot>
    <tr>
      <th>Balance</th>
      <td colspan="2">$20,00</td>
      <td colspan="2">$10,00</td>
    </tr>
  </tfoot>
</table>
Anthony Lione
Date Income Outcome Income Outcome
07/15 $200,00 $50,00 $0 $0
07/28 $0,00 $100,00 $100,00 $0,00
Balance $20,00 $10,00

A table can have more than one body. In such a scenario, each body groups the rows that are related together.

How to Style HTML Tables with CSS

Most tables you see use different colors and methods of styling to distinguish their features and important values. After all, who would want to look at data divided by just a single line...?

To add styling to a table, you will need to have a .css file created which you will link to in your main HTML file.

In the code above we’ve created a simple table using some of the structural elements that we have covered in the article.

We have also gone ahead and added some styling to make our table more attractive. The table also has a fixed header so you can scroll through the large amount of data and still see the header of a particular column.

When to Use a Table in HTML

There are many times you might want to use a table in your HTML.

You can use tables when you want to compare and contrast data with shared chacteristics

You can also use one if you want to give an overview of numerical data.

And a table can help readers quickly find specific information laid out in a clear way.

Wrap Up

Tables are agreat way to represent tabular data, and you can create them using basic HTML elements like <table>,<tr>, <td>.

And you can also add some styling to make them look good and present the data clearly.

To finish up, let's create a table using the main topics that we have covered in this article: