HTML Tables – Colspan, rowspan and cellspacing

In this article we will learn about HTML tables and some of its most important attributes, the colspan, rowspan and cellspacing.

In a table we can make a cell span over multiple columns or rows. Think of this like merging two cells in an Excel sheet. We can achieve this with the colspan or rowspan attributes.

Here is a basic HTML table.

<table border="1">

<thead>
<tr>
<th>First Name</th>
<th>Lastname</th>
<th>Registration date</th>
</tr>
</thead>

<tbody>
<tr>
<td>John</td>
<td>Smith</td>
<td>2022.01.12</td>
</tr>
<tr>
<td>Sarah</td>
<td>Miller</td>
<td>2022.02.20</td>
</tr>
<tr>
<td>Kevin</td>
<td>Smith</td>
<td>2022.04.03</td>
</tr>
</tbody>

</table>

Let’s say this table lists the registered users in the administration area of our application. We also want to be able to delete and edit each users. So let’s add two new cells to each row.

<table border="1" cellspacing="10">

<thead>
<tr>
<th>First Name</th>
<th>Lastname</th>
<th>Registration date</th>
<th>Role</th>
<th>Actions</th>
</tr>
</thead>

<tbody>
<tr>
<td>John</td>
<td>Smith</td>
<td>2022.01.12</td>
<td>customer</td>
<td>Edit</td>
<td>Delete</td>
</tr>
<tr>
<td>Sarah</td>
<td>Miller</td>
<td>2022.02.20</td>
<td>Edit</td>
<td>Delete</td>
</tr>
<tr>
<td>Kevin</td>
<td>Smith</td>
<td>2022.04.03</td>
<td>Edit</td>
<td>Delete</td>
</tr>
</tbody>

</table>

So now we added the edit and delete table cells, but we need to add a table header. The problem is that the edit and delete are in two columns, but I only want to add one header title to these. But if I add one <th> tag, it will appear only above the first column.

This is where we can use the colspan attribute. Let’s add:

colspan="2"

to the <th> tag like this:

<th colspan="2">Actions</th>

And now the cell spans two columns. So the value of the colspan attribute is the number of columns you want the cell to span.

Rowspan

Now you probably guessed how to use the rowspan attribute. With this attribute we specify how many rows a cell should span.

Let’s add a new th in our header and call it ”Role”.

Now we need a new td in the body, let as add

<td>customer</td>

Instead of adding this new td in all rows, just add the rowspan attribute. Since the role of our users are always the same we don’t have to add the role to each row.

Cellspacing

And finally, there is one other attribute I’d like to show you, it is called cellspacing. It does exactly what its name suggests. It adds space between or rather around the cells. The value of cellspacing is a number which is calculated in pixel.

We add the cellspacing attribute to the table element.

This is my final code:

<table border="1" cellspacing="10">

<thead>
<tr>
<th>First Name</th>
<th>Lastname</th>
<th>Registration date</th>
<th>Role</th>
<th colspan="2">Actions</th>
</tr>
</thead>

<tbody>
<tr>
<td>John</td>
<td>Smith</td>
<td>2022.01.12</td>
<td rowspan="3">customer</td>
<td>Edit</td>
<td>Delete</td>
</tr>
<tr>
<td>Sarah</td>
<td>Miller</td>
<td>2022.02.20</td>
<td>Edit</td>
<td>Delete</td>
</tr>
<tr>
<td>Kevin</td>
<td>Smith</td>
<td>2022.04.03</td>
<td>Edit</td>
<td>Delete</td>
</tr>
</tbody>

</table>

One important thing to mention is that you should never use tables to create website layout. Before responsive design and smart devices, we often used tables to lay out webpages. However, we can’t really make tables look good on mobile devices. So never use it for page structures.