Css table colspan all

Colspan to Merge HTML Table Cells Horizontally

Colspan is a HTML attribute which can be assigned to a table cell ( and ). It takes a number, greater than 0 that shows how many cells are merged together starting from the marked cell.
It’s very similar to the rowspan attribute that extends cells towards the bottom.

Syntax

Colspan Examples

Colspan is often used to mark cell that have the same value or to visualize merged table cells.

    1 2 3 4 5 6 7 8 9 10   1  colspan="2">2-3 4  colspan="3">5-7 8 9 10   colspan="5">1-5  colspan="5">6-10   colspan="10">10   1  colspan="2">2-3  colspan="3">4-6  colspan="4">7-10    

   class="candyPinkBack">  span="8">    Name 1 2 3 4 5 6 7 8     John  colspan="5" bgcolor="#fdc">1-5   Bob  colspan="6" bgcolor="#dfc">3-8   Mary  colspan="3" bgcolor="#fdc">1-3  colspan="3" bgcolor="#fdc">5-7    Eli  colspan="4" bgcolor="#cdf">2-5    

Adding Colspan To An Existing Table

When we increase the size of a cell using the colspan attribute, that will push out some cells to the right. We have to make sure to remove them, otherwise it will render icnorrectly, as shown below.

Colspan pushing=»2″ out the highlighted cell. It renders differently on desktop and mobile Chrome browsers.

Incorrect:

   A B C   D  colspan="2">E  class="candyPinkBack">F   G H I   

A table with 3 cells per row, in the middle row having a widened E cell which pushes out the highlighted F cell.

W3 Markup Validator showing the error.

Correct:

The highlighted F cell has been removed:

   A B C   D  colspan="2">E   G H I   

Colspan In The Last Cell Of A Row

Increasing the colspan of the last cell of a table row would make the cell stick out of the table borders. Doing this is not just a bad practice but it will result an invalid code.

We can only extend a cell as far as the edge of the table allows it to stretch.

 class="demo">  A  colspan="2" class="brick"> B   C D   

Colspan Combined With Rowspan

Colspan is used to spread out a cell to the right. We need to use rowspan to extend vertically towards the bottom. You can learn more about it on its dedicated page.

>    colspan="3" bgcolor="#fcdddb"> Colspan=3  rowspan="3" bgcolor="#fcdddb"> Row />span />=3   

Assigning both rowspan and colspan to a single cell will extend it both down and to the left. The exemple below will create a 2×2 cell.

   A B C D   E  colspan="2" rowspan="2" class="candyPinkBack"> 2x2 F   G H   I J K L   

Colspan For Div Tables

HTML tables can be replaced by structured tags. Div tables support responsiveness but their code needs to be tweaked when adding colspans. Just adding colspan=»x» to a div tag will not work as it does in a td tag.

W3 Markup Validator throwing an error for assigning colspan attribute to a div element.

When it comes to adding colspan to a div table, we need to consider using nested tables and think about responsiveness too.

Example

Let’s start with a 3×3 div table, where we wish to enlarge the highlighted E cell and make it swallow the F cell.

 class="divTable">  class="divTableBody">  class="divTableRow">  class="divTableCell">A  class="divTableCell">B  class="divTableCell">C   class="divTableRow">  class="divTableCell">D  class="divTableCell brick">E  class="divTableCell">F   class="divTableRow">  class="divTableCell">G  class="divTableCell">H  class="divTableCell">I    

Источник

HTML Table Colspan & Rowspan

HTML tables can have cells that span over multiple rows and/or columns.

HTML Table — Colspan

To make a cell span over multiple columns, use the colspan attribute:

Example

Note: The value of the colspan attribute represents the number of columns to span.

HTML Table — Rowspan

To make a cell span over multiple rows, use the rowspan attribute:

Example

Note: The value of the rowspan attribute represents the number of rows to span.

HTML Exercises

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

CSS Colspan

“In this article, we will look at the colspan property, which is available in the CSS directory and can be used on a table. The colspan property is used to span columns of a table in a single cell by combining them into a single entity. This property can be used on both the table elements, which are table header and table data tags. CSS allows us to use this property with other properties as well in the same tag, which we will be implementing as well in this article.”

Example 01: Using the CSS Colspan Property on the Table Data Tag in an HTML File

In this example, we will be using the Colspan property that CSS provides to span two columns of a table which will be table data in this case. We will use this property directly inside the td tag to span a row in a single cell of a table.

In this script, we will be opening the header tag and start with the style tag for providing styling to the table and its elements like the table header and table data. After providing styling properties, the tag for the body of the page will be opened. In the body tag, we will create our table with four rows using the tr tag. In the first row, we will add the heading of the table using the th tag. Then, in the second and third rows, we will put data into the table’s columns using the td tag.

Then we will add another row in which both the columns of the table will be merged using the Colspan property. The Colspan property is defined in the table data tag by using the colspan keyword with the number of columns that we want on our table as the argument. In this row, we will add the sum of the table elements in the previous two rows. After this, we will close the remaining tags and open the file on our browser using the “.html” format.

As we can see in the output above, we have added four rows to the table, with the last row consisting of a single cell made up of two columns due to the colspan property added inside the td tag.

Example 02: Using the CSS Colspan Property on the Header of the Table in an HTML File

In this example, we will use CSS’s Colspan property to span table components, which will be the table header in this case. This attribute will be used precisely inside the th tag to span a row in a single column of a table.

We will open the header tag and begin with the style tag to style the table and its features, such as the table header and table data in this script. The tag for the page’s body will be opened after supplying style attributes. Using the th element, we will add the table heading to the first row. The colspan property will then be used to combine both tables’ columns in this row. The Colspan property will be specified in the table header tag by utilizing the colspan keyword with the number of columns on our table as an input. This table’s header will serve as a collective heading for the whole table.

We have added three rows to the table, as indicated in the result above, the first of which is a single cell made up of two columns because of the colspan attribute applied within the th tag, making it a common header for all table components.

Example 03: Using the CSS Colspan Property on the Header and Table Data Tag of the Same Table in an HTML File

We will utilize CSS’s Colspan property to span two table components, which in this case will be the table header and the table data tag in this example. This property will be used particularly inside the th, and td tags to span a row in a single column of a table, resulting in two spanned rows.

In this script, we will open the header tag and start with the style tag to style the table and its components, such as the table header and table data. After providing style attributes, the tag for the page’s body will be opened. In the body tag, we will create a table with four rows using the tr tag. The table header will be added to the first row using the th element. The colspan property will then be used to combine both tables’ columns in this row. The Colspan property will be provided in the table header element by using the colspan keyword as an input and the number of columns on our table as an output. The header of this table will function as the table’s overall heading.

Then we will add another row after the third row in which we will use the colspan attribute to combine the table’s columns. We will add the total of the table components from the previous two rows in this row.

As shown in the output above, we added four rows to the table, the first of which is a single cell made up of two columns due to the colspan attribute applied within the th tag, making it a common header for all table components, and the last of which is also a single representing the sum of numbers from the previous rows.

Example 04: Using the CSS Colspan and Rowspan Property on the Same Table in an HTML File

In this example, we will utilize CSS’s colspan and rowspan properties to span two table columns of two rows. This property will be used particularly inside the th tag to create a cell of two columns and two rows in a table.

In this script, we will open the header tag and begin styling the table and its properties, such as the table header and table data, with the style tag. After providing style attributes, the tag for the page’s body will be opened. In the body tag, we will create a table with three rows using the tr tag. The table header will be added to the first and second rows using the th tag.

Then, in this row, the colspan and rowspan properties will be used to combine both tables’ columns. The colspan property will be specified in the table header element by using the colspan keyword as an input, and the rowspan property will be specified in the same way. Then, in the second and third rows, we will put data into the table’s columns using the td tag.

As shown in the result above, we added three rows and three columns to the table, the first of which is a single cell made up of two columns and two rows owing to the colspan and rowspan attributes applied within the th tag.

Conclusion

In this article, we have discussed the colspan property that CSS provides in an HTML file. This property is usually added to the table elements like table header and table data to create spanned cells of multiple columns. The colspan property can be added multiple times in one table to show more presentable data to the user, which we implemented in this article on the Notepad++ IDE. We also implemented this property with the rowspan property as an example to develop a better understanding of the uses of this property.

About the author

Aqsa Yasin

I am a self-motivated information technology professional with a passion for writing. I am a technical writer and love to write for all Linux flavors and Windows.

Источник

HTML colspan Attribute

The colspan attribute defines the number of columns a table cell should span.

Applies to

The colspan attribute can be used on the following elements:

Examples

Td Example

An HTML table with a table cell that spans two columns:

Th Example

An HTML table with a header cell that spans two columns:

Browser Support

The colspan attribute has the following browser support for each element:

Element
td	Yes	Yes	Yes	Yes	Yes
th	Yes	Yes	Yes	Yes	Yes

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник