HTML colspan attribute
The purpose of the HTML colspan attribute is to define the number of columns spanned by an individual column definition.
Supported elements
HTML colspan attribute supports td and th elements.
Syntax
Where ElementName is any supported HTML element.
Type of value
Value
Default value
There is no default value.
Supported doctypes
HTML 4.01 strict, HTML 4.01 transitional, HTML 4.01 frameset.
Example of HTML colspan attribute with td and th
Result
View this example in a separate browser window
Test your Programming skills with w3resource’s quiz.
Follow us on Facebook and Twitter for latest update.
- Weekly Trends
We are closing our Disqus commenting system for some maintenanace issues. You may write to us at reach[at]yahoo[dot]com or visit us at Facebook
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.
What Is colspan in HTML?
Tables are essential for storing information organized and keeping your web pages organized. However, not every row of your table will need the same number of cells. That’s where the colspan attribute in HTML comes into play.
The title of your table or different rows may need to span multiple columns. The colspan attribute allows your row to span multiple columns. This is similar to the “merge cells” function in Excel.
HTML Colspan
By 
Priya Pedamkar
Introduction to HTML Colspan
HTML Colspan is the attribute used in the table for diving columns into the cell. It allows users to divide single table cells into the width of one or more either cell or column. This attribute of HTML works as a merge cell option included in the spreadsheet, same as excel. This attribute used to describe an actual number of columns divided by individual columns.
colspan table attribute used in both table elements like <th> and <td.>. The value we are going to define within the colspan attribute must be a positive integer number always. It was going to support attributes like textarea as well as frameset elements.
Web development, programming languages, Software testing & others
colspan attribute in HTML can be used as follows:
Syntax:
- Above syntax status that <td> tag used to define no of the column going to span. The value attribute in the syntax is used to evaluate the count of columns that are used to fill cells.
- The value must be a positive integer.
Syntax:
- The above syntax is used when users want to use the colspan attribute with <th>tag. It defines the number of header cells going to be span.
- This attributed work as an inline attribute in HTML code.
- HTML cols attribute going to support different attributes like textarea and frameset elements.
Syntax:
- In the above syntax, ElementName is a kind of element that is supported by the HTML element. Value is the attribute that defines multi-length value for the frameset attribute, whereas the number is for textarea.
How to Implement Colspan in HTML?
The code implementation of colspan in HTML is explained below.
1. Colspan in HTML using <td> Tag
Code:
Output:
2. Colspan in HTML using <th> Tag
Code:
Output:
Examples of HTML Colspan
Following are the different examples.
Example #1
This example status that colspan attribute is going to use with table header along with <th> tag. It divides the column into 2 parts, as shown in the example below:
HTML Code:
Output:
Example #2
In this example, we are going to explain how column can be divided using colspan tag and what will the actual output by using colspan tag is going to be generated as follows:
HTML Code:
Output:
Example #3
In this example we are going to use colspan HTML tag in both <th> and <td> tag. This attribute allows using both tags together too. Here is the code for the example, and output will generate for the same.
HTML Code:
Output:
Conclusion
- From all the above information, we came to know that HTML colspan is the attribute that is going to be used within a table as well as text area and frameset attributes.
- It divides the table column into one or more cells as per user requirement. This attribute is going to support both <th>and <td> tag. The value included in it always be a positive integer.
Recommended Articles
This is a guide to HTML Colspan. Here we discuss the introduction and how to implement HTML colspan? Along with appropriate examples. You may also look at the following articles to learn more-