We are independent & ad-supported. We may earn a commission for purchases made through our links.
Advertiser Disclosure
Our website is an independent, advertising-supported platform. We provide our content free of charge to our readers, and to keep it that way, we rely on revenue generated through advertisements and affiliate partnerships. This means that when you click on certain links on our site and make a purchase, we may earn a commission. Learn more.
How We Make Money
We sustain our operations through affiliate commissions and advertising. If you click on an affiliate link and make a purchase, we may receive a commission from the merchant at no additional cost to you. We also display advertisements on our website, which help generate revenue to support our work and keep our content free for readers. Our editorial team operates independently of our advertising and affiliate partnerships to ensure that our content remains unbiased and focused on providing you with the best information and recommendations based on thorough research and honest evaluations. To remain transparent, we’ve provided a list of our current affiliate partners here.
Software

Our Promise to you

Founded in 2002, our company has been a trusted resource for readers seeking informative and engaging content. Our dedication to quality remains unwavering—and will never change. We follow a strict editorial policy, ensuring that our content is authored by highly qualified professionals and edited by subject matter experts. This guarantees that everything we publish is objective, accurate, and trustworthy.

Over the years, we've refined our approach to cover a wide range of topics, providing readers with reliable and practical advice to enhance their knowledge and skills. That's why millions of readers turn to us each year. Join us in celebrating the joy of learning, guided by standards you can trust.

What is Colspan?

By Archana Khambekar
Updated: May 16, 2024
Views: 21,401
Share

The colspan attribute is an HTML feature that enables a table cell in a web page to extend over multiple columns. HTML is one of the main ways in which web pages are created. One way to bring structure into an HTML web page is the concept of a table. A table has multiple rows and columns. The information in the individual cells of the table appears vertically and horizontally organized.

Often, when displaying an HTML table, one would like some information to apply or spread over multiple columns. When such a piece of information is limited to one row, then the colspan attribute comes in handy. Therefore colspan=N, where N is some number such as 2, 3, etc., indicates that the cell spreads or spans that many columns.

Consider an example where sales data is shown as a table with three column headings: the sales region, the person heading the region, and the sales amount. When the total is shown, only the sales amount total is of interest. The person cell will be empty in that row. Rather than showing an empty cell it is nice to bring attention to the total instead. The following code achieves this.

<html>
<table border="1">
<tr> <th>Region</th> <th>Sales Head</th>
<th>Sales</th> </tr>
<tr> <td>East</td> <td>Lewis</td>
<td>$2,100</td> </tr>
<tr> <td>South</td> <td>Lilian</td>
<td>$2,880</td> </tr>
<tr> <td>West</td> <td>Larnoe</td>
<td>$1,900</td> </tr>
<tr> <td colspan="2">Total Sales</td>
<td>$6,880</td> </tr>
</table>
</html>

In this example, a table is created, and three headings — Region, Sales Head and Sales — are specified, followed by three rows of data. Each cell in the table is indicated by the td attribute, for "table data." In the fourth row, the phrase Total Sales is given along with the total amount. Notice that the phrase "Total Sales" is emphasized by its cell spanning two columns: the Region column and the Head column; this is achieved by specifying colspan=2. This cell spans two columns, so this row has just two td attributes and not three as in the other rows.

One can copy this code into a text file and bring it up in a browser to view the effect. A web page may not often require showing data within table cells as in the example above. The table concept is very useful for organizing the information on a web page, however.

A web page often consists of a header on top, such as the company name and logo, one or more menus on top or at the sides, main information in the middle, and summary information at the bottom. To achieve this, a table structure may be used underneath without the reader being aware of it. Quite often some information spreads over multiple columns using the colspan attribute, preventing the web page from looking clunky.

As an example, one may want a personal page with three columns: Family, Career, and Community. It would be a nice effect to break the monotonous columns with a photo, somewhere down the page, wherein it spreads across all columns. The following code achieves this with a span value of 3.

<html>
<table width=900 border="0">
<tr>
<td width=300> Family <br> Me <br> Doggie... </td>
<td width=300> Career <br> Executive at Acme... </td>
<td width=300> Community <br> Hospital Volunteer... </td>
</tr>
<tr> <td colspan="3" align=center> <img src=...> My Photo </td> </tr>
<tr>
<td> Family details... </td>
<td> Career continued... </td>
<td> Community continued... </td>
</tr>
</table>
</html>

Share
EasyTechJunkie is dedicated to providing accurate and trustworthy information. We carefully select reputable sources and employ a rigorous fact-checking process to maintain the highest standards. To learn more about our commitment to accuracy, read our editorial process.
Discussion Comments
Share
https://www.easytechjunkie.com/what-is-colspan.htm
Copy this link
EasyTechJunkie, in your inbox

Our latest articles, guides, and more, delivered daily.

EasyTechJunkie, in your inbox

Our latest articles, guides, and more, delivered daily.