Html <Col> Tag

You can write the col tag inside the table tag after the thead, tbody, foot, and tr tags. You can also apply it after the caption tag (in which the table's name is entered). 

The HTML col element is used to specify a column within a table and the common semantics for all common cells. This tag is found in colgroup element.
Only a few CSS properties are supported by col which can be used to style columns.

Syntax:

<col span = “ ”  style = “ ”>

Example:

<!DOCTYPE html>  
<html>  
<head>  
    <title>Col tag</title>  
</head>  
<body>  
<h2>Example of Col Tag</h2>  
<table border="1">  
    <colgroup>  
        <col  span="2" style="background-color: powderblue">  
        <col span="2" style="background-color:   pink">  
    </colgroup>  
    <tr>  
        <th>Roll No.</th>  
        <th>Name</th>  
        <th>English</th>  
        <th>Social Science</th>  
    </tr>  
    <tr>  
        <td>14</td>  
        <td>Abhi</td>  
         <td>69</td>  
         <td>74</td>  
    </tr>  
    <tr>  
        <td>24</td>  
        <td>Jatin</td>  
         <td>85</td>  
         <td>91</td>  
    </tr>  
    <tr>  
        <td>32</td>  
        <td>Jenifier</td>  
         <td>65</td>  
         <td>98</td>  
    </tr>  
    <tr>  
        <td>41</td>  
        <td>Vivan</td>  
         <td>89</td>  
         <td>87</td>  
    </tr>  
</table>  
</body>  
</html>  

Output:

Attribute

The global attributes are present in this element.

Span

In the col element, this attribute specifies the amount of succeeding columns. It is always represented by the integer value and its default value is 1.

Align

This enumerated attribute describes how the content of each column cell will be aligned horizontally. This tag do these multiple following tasks:

• Putting the content in the cell's left-most position.
• Centering the cell's content.
• Aligning the content so that it is to the cell's right.
• To justify the text so that it fits within the cell by adding spaces to the text.

If the value is not set as the alignment in the align attribute of the colgroup element, then you have to determine the left as its value.

Bg-color

It is the color of the table's background. It is a 6-digit hexadecimal RGB code where # is a prefixed letter. You could also use any one color keyword instead of ‘#’.

You can also usee CSS background-color property to achieve a comparable

result.

Char

The character to be used to align the content in a column is selected by this property. When attempting to align numerical or monetary values, the period (.) is used as a value. This attribute is not taken into account if the alignment is not set to char.

Charoff

This attribute specifies how many characters of the column data should be offset from the alignment characters.

valign

This attribute specifies the vertical alignment of the text within each column cell. This attribute has the following possible values:

• The baseline value will positioned the text as close to the bottom of the cell as physically possible by aligning it on the baseline of the characters rather than the bottom of the characters. All the same-sized characters produce the same result as the bottom.
• The bottom value will positioned the text as close to the bottom of the column’s cell as possible.
• The middle value will centered the text within the cell.
• The top value will positioned the text as close to the top of the column’s cell as possible.

Width

This attribute specifies the default column width for the current column group. This attribute can also have the special form 0*, which indicates that each column in the group should have the minimum width that will be required to hold its contents.

Browser Compatibility

Chrome

Opera

Firefox

Safari

Problem With Col Tag

The col element has some advantages for making the styles to the columns in a table.

For styling columns in a table, the <col> element appears to be very useful, and it does have some advantages. However, there is a significant issue in the col tag is that the distinct cells of the table are not actually contained within the column because the table of HTML are defined by rows not by columns.

Another problem is that it colors the cell not the text of cell. This col element provide information about column. The properties that can be managed are:

• Border
• Background
• Width
• Visibility

Conclusion

The col tag specifies the properties of one or more columns. The col tag is frequently used in conjunction with the colgroup tag, which identifies a group with similar properties.