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>



Do you find this helpful?

Related articles