col

Col is used to define columns in a table.

Col is a single label element in a table and can only be used in a table element or colgroup element.

The attribute values include the following, which can be implemented using CSS attributes.

  • span: specifycolThe number of columns across the element. The value of this attribute is a positive integer. The default value is1
  • align: specifycolThe horizontal alignment of the content of the column associated with the element, includingleft(left aligned),center(Center aligned),right(Right aligned),charEtc., note this propertyHTML5Abandoned, onlyIE7And below are available. Most browsers are no longer supported
  • bgcolor: specifycolThe background color of the column associated with the element, whose attribute value can be specifiedrgba,rgb,hexAnd color name. Note that this attribute is a non-standard one and supports different browsers
  • valign: specifycolThe vertical alignment of the content of the column associated with the element, includingtop(top aligned),middle(Center aligned),bottom(Bottom aligned),baseline(Baseline alignment), note this propertyHTML5Also deprecated, different browsers support inconsistent
  • width: specifycolThe width of the column associated with the element, with a value ofpxWidth or percentage, noticeHTML5Deprecated, supported by most browsers
  • char:alignProperty set tocharIs used to specify that a column is aligned with a characterHTML5This property is no longer supported and is not supported by most browsers
  • charoff:alignProperty set tocharIs effective, and the provisions are relative tocharProperty to specify the offset of the character

span

Span Specifies the number of columns across, not specified or specified as null default is 1, applied to columns by specifying col style. Most browsers are compatible with col’s SPAN property.

<style>
    td {
        width: 240px;
        height: 30px;
    }

    .col-1 {
        background: lightblue;
    }

    .col-23 {
        background: pink; } </style> <table border="1"> <col class="col-1"> <col span="2" class="col-23"> <tr> <th>Index</th> <th>Language</th> The < th > Proportion < / th > < / tr > < tr > < td > 1 < / td > < td > HTML < / td > < td > 20.36% < / td > < / tr > < tr > < td > 2 < / td > < td > CSS < / td > 19.64% < / td > < td > < / tr > < tr > < td > 3 < / td > < td > JavaScript < / td > < td > 160.00% < / td > < / tr > < / table >Copy the code

The style appears as follows, with COL-1 specifying the first column and COL-23 specifying the second and third columns.

The SPAN property of COL can also be implemented via CSS.

td:nth-child(1),
th:nth-child(1){
    background: lightblue;
}

td:nth-child(2),
th:nth-child(2),
td:nth-child(3),
th:nth-child(3) {
    background: pink;
}
Copy the code

IE8 and below do not support nTH-Child and can use adjacent selector + compatibility. If IE5 does not support adjacent selectors, the class name can be specified.

td,
th {
    background: lightblue;
}

td+td,
td+td+td,
th+th,
th+th+th {
    background: pink;
}
Copy the code

align

Specifies the alignment of columns associated with COL. The default alignment is left, supported only by IE7 and below.

<style>
    td {
        width: 240px;
        height: 30px;
    }
</style>

<table border="1">
    <col align="center">
    <col align="right">
    ...
</table>
Copy the code

IE7 looks like this.

It can also be implemented using CSS properties, which refer to the SPAN property for compatibility.

td:nth-child(1),
th:nth-child(1){
    text-align: center;
}

td:nth-child(2),
th:nth-child(2) {
    text-align: right;
}

<table border="1">... </table>Copy the code

bgcolor

Nonstandard property, with varying browser support, specifies the background color of the column associated with col.

<table border="1"> < col bgcolor = "lightblue" > < col bgcolor = # "CCC" > < col bgcolor = "RGB (0,0,255,0.9)" >... </table>Copy the code

The following styles are rendered for Chrome, or through CSS properties.

valign

Specifies the vertical alignment of columns associated with col. Different browsers support it differently.

<style>
    td {
        width: 240px;
        height: 50px;
    }
</style>

<table border="1">
    <col valign="top">
    <col valign="bottom">
    ...
</table>
Copy the code

The following is the rendering style for Internet Explorer 11.

It can also be implemented using CSS properties.

td:nth-child(1),
th:nth-child(1){
    vertical-align: top;
}

td:nth-child(2),
th:nth-child(2) {
    vertical-align: bottom;
}

<table border="1">... </table>Copy the code

width

Specifies the width of the column associated with col.

<style>
    td {
        height: 30px;
    }
</style>

<table border="1">
    <col width="120px">
    <col width="360px">
    <col width="240px">
    ...
</table>
Copy the code

The browser rendering looks like this.

You can also specify col styles to apply to columns.

.col-1 {
    width: 120px;
}

.col-2 {
    width: 360px;
}

.col-3 {
    width: 240px;
}

 <table border="1">
    <col class="col-1">
    <col class="col-2">
    <col class="col-3">
    ...
</table>
Copy the code

Alternatively, you can specify a CSS style, which can also refer to the SPAN property for compatibility.

td:nth-child(1),
th:nth-child(1) {
    width: 120px;
}

td:nth-child(2),
th:nth-child(2) {
    width: 360px;
}

td:nth-child(3),
th:nth-child(3) {
    width: 240px;
}
Copy the code

char

To align columns with a character, set align to char, which is not supported by most browsers.

<style>
    td {
        width: 240px;
        height: 30px;
    }
</style>

<table border="1">
    <col>
    <col>
    <col align="char" char=".">
    ...
</table>
Copy the code

The simulation looks like this.

charoff

Specifies the offset of the content relative to the character specified by the char attribute, where positive numbers are right offset and negative numbers are left offset.

<style>
    td {
        width: 240px;
        height: 30px;
    }
</style>

<table border="1">
    <col>
    <col>
    <col align="char" char="." charoff="2">
    ...
</table>
Copy the code

The following is a simulated rendering effect, that is, characters. Offset it to the right by 2 characters after alignment.

colgroup

Colgroup is used to define a set of columns in a table.

Colgroup is a single label element and can only be in a table.

Colgroup contains no col child elements. The label colgroup is equivalent to col, and colgroup has exactly the same representation as col attributes, including SPAN, align, BGColor, valign, width, char, and charoff.

A colgroup that contains col children is ignored as long as the colgroup contains col. The style or attribute of the internal COL is inherited to colGroup by default. If the col itself specifies a style or attribute, the inherited style or attribute is overridden.

<style>
    td {
        height: 30px;
    }

    colgroup {
        background: lightblue;
    }

    .col-2 {
        background: pink; } </style> <table border="1"> <colgroup span="2" width="180px"> <col> <col class="col-2" width="360px"> <col> </colgroup> <tr> <th>Index</th> <th>Language</th> <th>Proportion</th> </tr> <tr> <td>1</td> <td>HTML</td> < td > 20.36% < / td > < / tr > < tr > < td > 2 < / td > < td > CSS < / td > < td > 19.64% < / td > < / tr > < tr > < td > 3 < / td > < td > JavaScript < / td > < td > 160.00% < / td > < / tr > < / table >Copy the code

The span=”2″ attribute of the following colgroup is ignored, the styles (background: lightblue) and attributes (width=”120px”) of the first and third columns are inherited to colGroup, while the second column overwrites the inherited styles and attributes.