bugl
bugl
HomeLearnPatternsSearch
HomeLearnPatternsSearch

Loading lesson path

Learn/HTML/HTML Foundations
HTML•HTML Foundations

HTML Table Colgroup

The

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

HTML Table Colgroup

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

Mon Tue Wed Thu Fri Sat

Sun

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 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"

Formula

style ="background - color: #D6EEEE">

</colgroup> <tr>

Formula

< th > MON </th >
< th > TUE </th >
< th > WED </th >
< th > THU </th >...

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.

Multiple Col Elements

If you want to style multiple columns with different styles, use more than one <col> element inside the <colgroup>

Example

<table> <colgroup> <col span="2"

Formula

style ="background - color: #D6EEEE">

<col span="3"

Formula

style ="background - color: pink">

</colgroup> <tr>

Formula

< th > MON </th >
< th > TUE </th >
< th > WED </th >
< th > THU </th >...

Empty Colgroups

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

Example

<table> <colgroup> <col span="3"> <col span="2"

Formula

style ="background - color: pink">

</colgroup> <tr>

Formula

< th > MON </th >
< th > TUE </th >
< th > WED </th >
< th > THU </th >...

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>

Formula

< th > MON </th >
< th > TUE </th >
< th > WED </th >
< th > THU </th >...

Previous

HTML Table Styling

Next

HTML Unordered Lists