What Is colspan in HTML?

Marquel Ellis



Tables are essential for storing information organized and keeping your web pages organized. However, not every row of your table will need the same number of cells. That’s where the colspan attribute in HTML comes into play.

person using a colspan in html on a computer

The title of your table or different rows may need to span multiple columns. The colspan attribute allows your row to span multiple columns. This is similar to the “merge cells” function in Excel.

Download Now: 50 Code Templates [Free Snippets]

One of the major keys to coding successfully is learning how to use HTML efficiently. Today we are talking about colspan, an essential attribute that can help you build better, more beautiful tables.

Table of Contents

What is colspan in HTML?

Colspan is an HTML attribute that allows you to span a row or column across multiple cells. This means that instead of having multiple columns, the cells will merge and the content will span multiple columns.

For example, let’s say you have a table with two columns. If you use colspan, you can make the first row span both columns. The syntax for this would be as follows.

<tr> <td colspan="2">This content spans two columns</td> </tr>

Here’s an example form using the colspan attribute. In this case, the first and last rows span both columns.

colspan example table with two rows spanning two columns

How to Use Colspan in HTML

Using colspan is actually very simple. All you have to do is add the colspan attribute to the <td> tag of the row you want to span.

For example, let’s say you have a table with two rows and five columns — if you wanted to make the first row span all five columns, the syntax would look like this:

<tr> <td colspan="5">This content spans five columns</td> </tr>

Colspan makes it easy to create complex tables with multiple rows and columns, as well as keep things organized and looking great. With colspan, you can quickly create tables that are dynamic and responsive to different devices.

See below for a step-by-step guide.

1. Create a table using HTML.

colspan example, build a table

Before you use  the colspan attribute you will need to build a table using the <table>, <tr>, and <td> elements.

Need a refresher? Take a deep dive into working with HTML tables.

<table> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </table>

2. Add the colspan attribute.colspan example, colspan attribute

You may want to use the colspan attribute on the header of your table or at other division points. This helps keep your table easy-to-read.

The code below creates a cell in your chart that spans three columns.

<table> <tr> <td colspan="3">This content spans three columns</td> </tr> </table>

3. Add the content in the table row.

colspan example, add content

After you designate which row will span multiple columns, it’s time to input your text. To do so, place your content between the open and closed <td> tag.

<table> <tr> <td colspan="3">My content goes here</td> </tr> </table>

Repeat the process for any other rows you want to span multiple columns.

colspan example, repeat

And that’s how you use colspan in HTML. Using this attribute can make it much easier to create complex tables with multiple rows and columns.

There are many different scenarios in which colspan can be used. Some examples include:

  • Displaying multiple columns of data on the same row.
  • Displaying a header row across multiple columns.
  • Creating tables with variable column widths.
  • Combining two or more cells into one.

Colspan in Action

Let’s look at how colspan works in action. Here is a simple table that we will use to illustrate how colspan works.

<code-block> <code-tab data-label="HTML" data-language="html" data-highlight="" data-escaped="true"> &lt;table&gt; &lt;tr&gt; &lt;td colspan=&quot;3&quot;&gt;My content goes here&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; </code-tab> </code-block>

The result of this code will be a table with two rows and four columns. Cell 3 spans two columns, while Cell 4 spans three columns.

colspan example, example

This is how colspan can quickly help create complex tables with just a few lines of code.

Using colspan in your HTML.

Colspan is a great tool for developers who want to create dynamic, responsive tables quickly and easily. With colspan, you can merge cells into one and span rows or columns across multiple cells — all without writing any extra code.

New Call-to-action

Topics: HTML

Related Articles

We're committed to your privacy. HubSpot uses the information you provide to us to contact you about our relevant content, products, and services. You may unsubscribe from these communications at any time. For more information, check out our Privacy Policy.

Dozens of free coding templates you can start using right now.