Scribd
Upload
18 views

Tables Colgroup HTML

Uploaded by

captainricardus
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
18 views

Tables Colgroup HTML

Uploaded by

captainricardus
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

HTML Table Colgroup

❮ PreviousNext ❯

The <colgroup> element is used to style specific columns of a table.

HTML Table Colgroup


If you want to style the two first columns of a table, use
the <colgroup> and <col> elements.

MON TUE WED THU FRI SAT SUN


1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28

The <colgroup> element should be used as a container for the column


specifications.

Each group is specified with a <col> element.

The span attribute specifies how many columns that get the style.

The style attribute specifies the style to give the columns.

Note: There is a very limited selection of legal CSS properties for colgroups.

Example
<table>
<colgroup>
<col span="2" style="background-color: #D6EEEE">
</colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
...
Try it Yourself »
Note: The <colgroup> tag must be a child of a <table> element and should be
placed before any other table elements, like <thead>, <tr>, <td> etc., but after
the <caption> element, if present.

Legal CSS Properties


There is only a very limited selection of CSS properties that are allowed to be
used in the colgroup:

width property
visibility property
background properties
border properties

All other CSS properties will have no effect on your tables.

ADVERTISEMENT

Multiple Col Elements


If you want to style more columns with different styles, use
more <col> elements inside the <colgroup>:

Example
<table>
<colgroup>
<col span="2" style="background-color: #D6EEEE">
<col span="3" style="background-color: pink">
</colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
...
Try it Yourself »

Empty Colgroups
If you want to style columns in the middle of a table, insert a
"empty" <col> element (with no styles) for the columns before:

Example
<table>
<colgroup>
<col span="3">
<col span="2" style="background-color: pink">
</colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
...
Try it Yourself »

Hide Columns
You can hide columns with the visibility: collapse property:

Example
<table>
<colgroup>
<col span="2">
<col span="3" style="visibility: collapse">
</colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
...

You might also like