RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://www.geeksforgeeks.org/html/html-colspan-attribute/ below:

HTML colspan Attribute - GeeksforGeeks

HTML colspan Attribute

Last Updated : 05 Aug, 2025

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:

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:

Output Supported Browsers

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4