HTML colspan Attribute

Last Updated : 28 Aug, 2024

The colspan attribute in HTML specifies the number of columns a cell should span. It allows the single table cell to span the width of more than one cell or column. It provides the same functionality as "merge cell" in a spreadsheet program like Excel.

Note: colspan="0" tells the browser to span the cell to the last column of the column group (colgroup).

Syntax:

<td colspan = "value">table content...</td>

Note: It can be used with <td> and <th> elements in an HTML Table.

Attribute Values

number: It specifies how many columns a cell should cover. When set to colspan="0", it instructs the browser to expand the cell to the last column of the table section (thead, tbody, or tfoot).

Using with <td> tag:

The colpan attribute when used with <td> tag determines the number of columns a table cell should span.

Syntax:

<td colspan = "value">table content...</td> // The value specifies the number of  columns that the cell fills and  it must be integer

Example: In this article we will see the implementation of colspan attribute with td attribute with an example.

html

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8">     <meta name="viewport"            content="width=device-width, initial-scale=1.0">     <title>HTML colspan Attribute</title>     <style>         table,         th,         td {             border: 1px solid black;             border-collapse: collapse;             padding: 6px;             text-align: center;         }     </style> </head>  <body>     <center>         <h6>The HTML colspan Attribute</h6>         <table>             <tr>                 <th>Name</th>                 <th>Expense</th>             </tr>             <tr>                 <td>Arun</td>                 <td>$10</td>             </tr>             <tr>                 <td>Priya</td>                 <td>$8</td>             </tr>              <!-- The last row -->             <tr>                 <!-- This td will span two columns, that is a                      single column will take up the space of 2 -->                 <td colspan="2">Sum: $18</td>             </tr>         </table>     </center> </body>  </html>

Output:

Using with <th> tag:

The colspan attribute when used with <th> tag determines the number of header cells it should span.

Syntax:

<th colspan = "value">table content...</th>  // The value specifies the number of  columns that the cell fills and  it must be integer

Example: The implementation of rowspan attribute with th attribute with an example.

html

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8">     <meta name="viewport"            content="width=device-width, initial-scale=1.0">     <title>HTML colspan Attribute</title>     <style>         table,         th,         td {             border: 1px solid black;             border-collapse: collapse;             padding: 6px;             text-align: center;         }     </style> </head>  <body>     <center>         <h6>HTML colspan Attribute</h6>          <table>             <tr>                 <th colspan="2">Expense</th>             </tr>              <tr>                 <td>Arun</td>                 <td>$10</td>             </tr>              <tr>                 <td>Priya</td>                 <td>$8</td>             </tr>         </table>     </center> </body>  </html>

Output:

Supported Browsers

Vishal Chaudhary 2

Improve

Article Tags :