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.