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