w3docs logo

HTML colspan Attribute

The HTML colspan attribute specifies how many columns a table cell should span. This attribute allows a single table cell to span the width of more than one column or cell. It has the same functionality as “merge cell” in Excel.

You can use the colspan attribute on the <td> and <th> elements.

When the colspan attribute is used on the <td> tag, it determines the number of standard cells it should span. When used on the <th> tag, the colspan attribute specifies the number of header cells it should span.

Syntax

<tag colspan="value"></tag>

Example of the HTML colspan pan attribute used on the <td> element:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <table border="1">
      <tr>
        <th>Month</th>
        <th>Salary</th>
      </tr>
      <tr>
        <td>March</td>
        <td>$100</td>
      </tr>
      <tr>
        <td>April</td>
        <td>$150</td>
      </tr>
      <tr>
        <td colspan="2">Total: $250</td>
      </tr>
    </table>
  </body>
</html>

Example of the HTML colspan attribute used on the <th> element:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <table border="1">
      <tr>
        <th colspan="2">Month and Date</th>
      </tr>
      <tr>
        <td>January</td>
        <td>15</td>
      </tr>
      <tr>
        <td>February</td>
        <td>23</td>
      </tr>
    </table>
  </body>
</html>

Practice Your Knowledge

What is the main purpose of the HTML colspan attribute?

Quiz Time: Test Your Skills!

Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.

Do you find this helpful?