Open In App
Related Articles

HTML colspan Attribute

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

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>

Usage

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

Attribute Values:

Attribute Values

Description

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>
 
<head>
    <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>
        <h1 style="color: green;">GeeksforGeeks</h1>
        <h2>HTML colspan Attribute</h2>
        <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: 

colspan

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 a example.

html

<!DOCTYPE html>
<html>
 
<head>
    <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>
        <h1 style="color: green;">GeeksforGeeks</h1>
        <h2>HTML colspan Attribute</h2>
 
        <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: 

colspan

Supported Browsers:

  • Google Chrome 1
  • Microsoft Edge 12
  • Firefox 1
  • Opera 12.1
  • Safari 1

HTML is the foundation of webpages, is used for webpage development by structuring websites and web apps.You can learn HTML from the ground up by following this HTML Tutorial and HTML Examples.



Last Updated : 16 Jan, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads