
- HTML Tutorial
- HTML - Home
- HTML - Overview
- HTML - Basic Tags
- HTML - Elements
- HTML - Attributes
- HTML - Formatting
- HTML - Phrase Tags
- HTML - Meta Tags
- HTML - Comments
- HTML - Images
- HTML - Tables
- HTML - Lists
- HTML - Text Links
- HTML - Image Links
- HTML - Email Links
- HTML - Frames
- HTML - Iframes
- HTML - Blocks
- HTML - Backgrounds
- HTML - Colors
- HTML - Fonts
- HTML - Forms
- HTML - Embed Multimedia
- HTML - Marquees
- HTML - Header
- HTML - Style Sheet
- HTML - Javascript
- HTML - Layouts
- HTML References
- HTML - Tags Reference
- HTML - Attributes Reference
- HTML - Events Reference
- HTML - Fonts Reference
- HTML - ASCII Codes
- ASCII Table Lookup
- HTML - Color Names
- HTML - Entities
- HTML - Fonts Ref
- HTML - Events Ref
- MIME Media Types
- HTML - URL Encoding
- Language ISO Codes
- HTML - Character Encodings
- HTML - Deprecated Tags
Set the number of columns to span in HTML
The task we are going to perform in this article is set the number of columns to span in HTML.
When utilizing the <td> element, this is accomplished by using the colspan attribute. As a result, a single table cell can now span multiple columns or cells in width. Let’s jump into the article to know more about colspan attribute.
Colspan Attribute
The number of columns that a cell should span in HTML is specified by the colspan attribute. It enables a single table cell to stretch across many columns or cells. It offers the same features as a spreadsheet program like Excel's "merge cell" function.
Syntax
Following is the syntax for colspan attribute.
<td colspan="number">
Let’s dive into the following examples to understand more about colspan attribute.
Example 1
In the following examples we are using colspan for table.
<!DOCTYPE html> <html> <head> <style> body { text-align: center; } table, tbody, td { border: 1px solid black; border-collapse: collapse; } </style> </head> <body> <table> <tr> <th>NAME</th> <th>Amount</th> </tr> <tr> <td>Surya</td> <td>143</td> </tr> <tr> <td>Karthik</td> <td>420</td> </tr> <tr> <td colspan="2">Total Amount : 563</td> </tr> </table> </body> </html>
When the script gets executed, it will generate an output displaying the table consisting of the data in it given in the script along with a colspan of the total amount on the webpage.
Example 2
let’s look into the following example, where we are using colspan with the <article> tag.
<!DOCTYPE html> <html> <head> <style> article { columns: 3; } h1 { column-span: all; } </style> </head> <body> <article> <h1>spanning all of the columns</h1> <p>Mahendra Singh Dhoni is an Indian former professional cricketer who was captain of the Indian national cricket team in limited-overs formats</p> <p>Virat Kohli is an Indian international cricketer and former captain of the India national cricket team.He plays for Delhi in domestic cricket</p> <p>Hardik Himanshu Pandya is an Indian international cricketer who plays for the India national cricket team at the international level and the Baroda cricket team domestically.</p> </article> </body> </html>
On running the above script, it will generate an output consisting of text used in the script along with the colspan on the webpage.
- Related Articles
- How to specify the number of columns a table cell should span in HTML?
- How to set the number of rows a table cell should span in HTML?
- Set how many columns an element should span across with CSS
- Set how many columns an element should span across with JavaScript.
- How to set the color of a textView span in android?
- HTML DOM Span object
- How to set the color of TextView span in Android using Kotlin?
- HTML DOM Column span Property
- HTML DOM ColumnGroup span Property
- Generate a Vandermonde matrix and set the number of columns in the output in Numpy
- How do we style HTML elements using the span tag ?
- How to set a certain number of rows and columns of a Tkinter grid?
- Reduce number of columns of a result set from a Transaction in SAP system
- How to include groups of table columns in HTML?
- How to set the name of the element in HTML?
