Table Colgroup In HTML With Examples - Dot Net Tutorials

Có thể bạn quan tâm

Back to: HTML Tutorials

Table Colgroup in HTML with Examples

In this article, I am going to discuss Table Colgroup in HTML with Examples. Please read our previous article where we discussed Table Padding and Spacing in HTML with Examples. At the end of this article, you will learn everything about HTML Table Colgroup with Examples.

HTML Table Colgroup

With the <colgroup> element we can style different columns of a table. Inside Colgroup <col> element is used to specify a group of columns. A span attribute is used inside the <col> element to specify the number of columns in a group. The style attribute is used to give styling to different columns.

Multiple Col Elements

We can use as many cols as we want inside the colgroup to style columns with different styles. In the example below we have used three col elements to give background color to three different column groups. For better understanding, please have a look at the below example.

<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; border-collapse: collapse; } </style> </head> <body> <h2>Multiple Col Elements</h2> <table style="width: 100%;"> <colgroup> <col span="2" style="background-color: #B6E8F8"> <col span="3" style="background-color: #ACE4AC"> <col span="2" style="background-color: #F9A409"> </colgroup> <tr> <th>MON</th> <th>TUE</th> <th>WED</th> <th>THU</th> <th>FRI</th> <th>SAT</th> <th>SUN</th> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> </tr> <tr> <td>8</td> <td>9</td> <td>10</td> <td>11</td> <td>12</td> <td>13</td> <td>14</td> </tr> <tr> <td>15</td> <td>16</td> <td>17</td> <td>18</td> <td>19</td> <td>20</td> <td>21</td> </tr> <tr> <td>22</td> <td>23</td> <td>24</td> <td>25</td> <td>26</td> <td>27</td> <td>28</td> </tr> </table> </body> </html>

When you run the above HTML code, you will get the following output in the browser.

Table Colgroup in HTML with Examples

Empty Table Colgroups in HTML

We can use empty cols inside Colgroups to style different columns. For better understanding, please have a look at the below example.<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; border-collapse: collapse; } </style> </head> <body> <h2>Empty Colgroups</h2> <table style="width: 100%;"> <colgroup> <col span="4" style="background-color: lightpink"> <col span="3" style="background-color: Lightgreen"> </colgroup> <tr> <th>MON</th> <th>TUE</th> <th>WED</th> <th>THU</th> <th>FRI</th> <th>SAT</th> <th>SUN</th> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> </tr> <tr> <td>8</td> <td>9</td> <td>10</td> <td>11</td> <td>12</td> <td>13</td> <td>14</td> </tr> <tr> <td>15</td> <td>16</td> <td>17</td> <td>18</td> <td>19</td> <td>20</td> <td>21</td> </tr> <tr> <td>22</td> <td>23</td> <td>24</td> <td>25</td> <td>26</td> <td>27</td> <td>28</td> </tr> </table> </body> </html>

When you run the above HTML code, you will get the following output in the browser.

Empty Table Colgroups in HTML

We have set the background color of the first four columns to light pink and the last three columns to light green.

Hide Columns in HTML Table

We can hide columns in tables using the CSS visibility property. For better understanding, please have a look at the below example.<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; border-collapse: collapse; } </style> </head> <body> <h2>Hide Columns</h2> <table style="width: 100%;"> <colgroup> <col span="3" style="visibility: collapse"> </colgroup> <tr> <th>MON</th> <th>TUE</th> <th>WED</th> <th>THU</th> <th>FRI</th> <th>SAT</th> <th>SUN</th> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> </tr> <tr> <td>8</td> <td>9</td> <td>10</td> <td>11</td> <td>12</td> <td>13</td> <td>14</td> </tr> <tr> <td>15</td> <td>16</td> <td>17</td> <td>18</td> <td>19</td> <td>20</td> <td>21</td> </tr> <tr> <td>22</td> <td>23</td> <td>24</td> <td>25</td> <td>26</td> <td>27</td> <td>28</td> </tr> </table> </body> </html>

Normal Column

Hide Columns in HTML Table

In the example above we have set the value of the span attribute to 3 so all styling that we have defined will be applied to the first three columns. As we have set the value of visibility to collapse the first three columns will disappear from the table. Look at the below output to see the difference.

Hidden Column

Table Colgroup in HTML with Examples

Here, in this article, I try to explain Table Colgroup in HTML with Examples and I hope you enjoy this HTML Table Colgroup with Examples article. dotnettutorials 1280x720 Dot Net Tutorials

About the Author: Pranaya Rout

Pranaya Rout has published more than 3,000 articles in his 11-year career. Pranaya Rout has very good experience with Microsoft Technologies, Including C#, VB, ASP.NET MVC, ASP.NET Web API, EF, EF Core, ADO.NET, LINQ, SQL Server, MYSQL, Oracle, ASP.NET Core, Cloud Computing, Microservices, Design Patterns and still learning new technologies.

Từ khóa » Html Table Hide Column Colgroup

Table Colgroup In HTML With Examples - Dot Net Tutorials