HTML | colspan Attribute - GeeksforGeeks

13 Dec, 2021
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.Usage: It can be used with <td> and <th> element while creating an HTML Table. 
Attribute Values: It contains a value i.e number Which specify the number of columns that a cell should span. 
Note: colspan=”0′′ tells the browser to span the cell to the last column of the column group (colgroup). 
<td>: The colspan attribute when used with <td> tag determines the number of standard cells it should span. Syntax:
<td colspan = "value">table content...</td>
The value specifies the number of columns that the cell fills. The value must be an integer. 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:  
<th>: 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. The value must be a integer. 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: 
Supported Browsers: The browser supported by colspan attribute are listed below:  
Google Chrome
Internet Explorer
Firefox
Opera
Safari
 
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.
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
hritikbhatnagar2182
ManasChhabra2
HTML-Attributes
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to update Node.js and NPM to next version ?
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?