HTML Table <table>

The HTML table tag allows you to create neat and tidy tables and takes care of all of the formatting.

The HTML table has not really changed since it was first introduced, however we’ve seen users build responsive tables using CSS to accommodate all screen sizes, as well as adding sorting and filter capabilities using Java.

If you’re familair with using Excel, HTML tables follow a similar structure of rows and columns with cells and the possibility to have a table header.

If you’re looking to present information in an organized and structured manner, HTML tables easily allow you to create a grid of rows and columns and place different information into each table cell.

You can place text, images, videos, and even leave cells blank.

HTML Table Tags

First off lets start with all of the tags that are related to HTML tables.

If you’re looking for info on how to use CSS to style tables, check out our CSS Tables guide.

HTML table <table>

This tag defines the table and the below elements go inside of it.

HTML thead <thead>

Defines the header of the table which will appear at the top of the table and is used with tbody and tfoot. The table body tbody section will scroll with the thead and tfoot staying constant is the table is long.
A table head is not required.

You can use CSS to style this part of the table individually.

HTML tbody <tbody>

Defines the body of the table.
Not a required field.
You can use CSS to style this part of the table individually.

HTML tfoot <tfoot>

Defines the footer of the table.
Not a required field.
You can use CSS to style this part of the table individually.

HTML tr <tr>

Defines a table row which contains table cells <td>.

HTML td <td>

Defines a table cell – This is where you place the data of the table.

HTML th <th>

Table cell header that works the same way as a normal table cell <td>
Replaces the first row of <td> cells when used.

HTML col <col>

Defines the attributes for a group of columns such as width and alignment.

HTML colgroup <colgroup>

Defines a group of columns.

HTML caption <caption>

Adds a caption to the table just above and outside of it.

 

HTML Table Example

Let’s start off with a simple example.

Firstly, we define the start of the table using the HTML table tag <table>.

We specify the row by using the <tr> tag. This tag alone won’t do anything as we need to insert several table cells into the row.

To add cells, we use the <td> tag.

Our information should be placed between the open and close td tags.



<p>Top 5 Countries by GDP According To The IMF</p>

<table>

<tr>
<td>Country</td>
<td>GDP ($USD Billions)</td>
</tr>

<tr>
<td>USA</td>
<td>$21,439</td>
</tr>

<tr>
<td>China</td>
<td>$14,140</td>
</tr>

<tr>
<td>Japan</td>
<td>$5,154</td>
</tr>

<tr>
<td>Germany</td>
<td>$3,862</td>
</tr>

<tr>
<td>India</td>
<td>$2,935</td>
</tr>

</table>




Output:

Top 5 Countries by GDP According To The IMF

Country GDP ($USD Billions)
USA $21,439
China $14,140
Japan $5,154
Germany $3,862
India $2,935

It is quite noticeable that all HTML tags are opened and closed in the right order.

You must make sure that all the tags within tags have been closed.

Now let’s go ahead and add a table heading <th> to the same table.

By using the table heading tag, we will be able to highlight the top row in our table simply by swapping the td tags for th tags, as seen in bold below.



<p>Top 5 Countries by GDP According To The IMF</p>

<table>

<tr>
<th>Country</th>
<th>GDP ($USD Billions)</th>
</tr>

<tr>
<td>USA</td>
<td>$21,439</td>
</tr>

<tr>
<td>China</td>
<td>$14,140</td>
</tr>

<tr>
<td>Japan</td>
<td>$5,154</td>
</tr>

<tr>
<td>Germany</td>
<td>$3,862</td>
</tr>

<tr>
<td>India</td>
<td>$2,935</td>
</tr>

</table>




Output:

Top 5 Countries by GDP According To The IMF

Country GDP ($USD Billions)
USA $21,439
China $14,140
Japan $5,154
Germany $3,862
India $2,935

 

So in our example above, we have used a separate paragraph to title our table Top 5 Countries by GDP According To The IMF.

If you have many elements on a page, it may be tricky to use a separate element to title the table, so instead you can use the caption tag within the table.

Very simply, taking our example above, see the bold text below:



<table>

<caption>Top 5 Countries by GDP According To The IMF</caption>

<tr>
<th>Country</th>
<th>GDP ($USD Billions)</th>
</tr>

<tr>
<td>USA</td>
<td>$21,439</td>
</tr>

<tr>
<td>China</td>
<td>$14,140</td>
</tr>

<tr>
<td>Japan</td>
<td>$5,154</td>
</tr>

<tr>
<td>Germany</td>
<td>$3,862</td>
</tr>

<tr>
<td>India</td>
<td>$2,935</td>
</tr>

</table>

Output:

Top 5 Countries by GDP According To The IMF
Country GDP ($USD Billions)
USA $21,439
China $14,140
Japan $5,154
Germany $3,862
India $2,935

 

So instead of a separate paragraph above the table, we now have a caption that is included within the table, and hence you can see the difference in spacing, the caption is much closer to the table.

Any CSS styling applied to the table will also apply to the caption and while elements on the page are moved around, the caption will stay with the table.

 

Table Styling

By default, HTML will give you a very basic look for your table.

However, there are few options in HTML to style tables, such as adding borders and changing colors, however we strongly suggest to keep all styling in your CSS.

Our CSS guide for tables outlines how to style your tables.

Use the HTML side to get all of your content / data set up.

 

Advanced HTML Tables

HTML tables are compatible with most applications where information fits neatly into a set number of rows and columns.

In some cases, we want to do more with the layout of tables, but the tables and rows aas described above are very basic and simple.

Advanced features, such as merging cells, can be used to alter the structure of the table.

HTML tables have the ability to merge cells in 2 ways:

1. Column span (colspan)
2. Row span (rowspan)

Let’s look at each of these atrributes.

Colspan

Use colspan within td to merge columns.

Here’s an example:



<table>

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

<tr>
<td>Germany</td>
<td colspan="3">3 column span</td>
<td colspan="2">2 column span</td>
</tr>

</table>


Output:

Cell 1 Cell 2 Cell 3 Cell 4 Cell 5
3 column span 2 column span

As you can see, we have 5 columns in our table, and the second row has 3 columns merged into 1 and also the next 2 columns merged into 1!

 

2. Rowspan

Rowspan works exactly like colspan however it merges rows instead of columns.

Here’s an example:



<table>

<tr>
<td rowspan="2">Spanned rows</td>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>

</tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>

</table>


Output:

Spanned rows Cell 1 Cell 2
Cell 3 Cell 4

It is important to notice one thing here.

You will find an unusual thing in the second row of the coding (the one that contains cells 3 and 4).

You will observe that we didn’t add <td> for the first cell in the row as it was merged with the one above.

The reason for not adding that <td> is because its properties are controlled wholly by the <td> that contains the rowspan attribute.

You can combine the use of colspan and rowspan in 1 table, however things will get pretty complicated.