Columns HTML: Main Tips
- The
<col>element defines and styles columns in HTML. - The <colgroup> element is the parent of
<col>. - HTML
<col>tag might seem suitable for styling columns, but it has limitations and disadvantages.
Use of col
The HTML <col> element specifies attributes for columns in a <colgroup> element.
<table>
<colgroup>
<col style="background-color: bisque;">
</colgroup>
<tr>
<th>Subject</th>
<th>Score</th>
</tr>
<tr>
<td>HTML</td>
<td>87</td>
</tr>
</table>Tip: you don't need to include the closing <col> tag in HTML documents.
There are several issues with the use of <col> element for grouping columns in HTML:
- Columns do not actually include the individual cells: it's rows, not columns, that define tables in HTML. Therefore, the styles used on rows can replace the styles of columns in HTML.
- The
<col>element manipulates a limited number of CSS properties: visibility, width, background, and border. For example, you cannot change the text color.
span
The span attribute specifies how many columns the <col> element contains.
<table>
<colgroup>
<col span="1" style="background-color: cornsilk;">
<col style="background-color: bisque;">
</colgroup>
<tr>
<th>Item</th>
<th>Price</th>
</tr>
<tr>
<td>White Tape</td>
<td>$23</td>
</tr>
</table>Deprecated Attributes
align
It set the horizontal alignment of content belonging to the <col> element. Not supported in HTML5: apply the CSS text-align property instead.
<table style="width: 100%;">
<col align="left">
<col align="right">
<tr>
<th>Item</th>
<th>Price</th>
</tr>
<tr>
<td>Biscuit</td>
<td>$5</td>
</tr>
</table>char
It indicated the character to align the cells in a table to. Not supported in HTML5.
<table style="width: 100%;">
<col align="left">
<col align="char" char=".">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ryan</td>
<td>$100.00</td>
</tr>
<tr>
<td>Franklin</td>
<td>$70.00</td>
</tr>
</table>charoff
It specified how many characters will offset the column data from the alignment characters. Not supported in HTML5.
<table style="width: 100%;">
<col align="left">
<col align="char" char="." charoff="2">
<tr>
<th>Name</th>
<th>Earnings</th>
</tr>
<tr>
<td>Patrick</td>
<td>$140.00</td>
</tr>
<tr>
<td>Samantha</td>
<td>$220.00</td>
</tr>
</table>valign
It set the vertical alignment rules for the content of the <col> element. Since HTML5 does not support this attribute, use vertical-align property instead.
<table style="height: 200px;">
<col valign="top">
<col valign="bottom">
<tr>
<th>Name</th>
<th>Position</th>
</tr>
<tr>
<td>Daniel</td>
<td>Executive</td>
</tr>
</table>width
It defined the HTML table column width for a <col> element. Not supported in HTML5: use the CSS property called width as an alternative.
<table>
<col width="130">
<col width="80">
<tr>
<th>Name</th>
<th>Department</th>
</tr>
<tr>
<td>Daniel</td>
<td>Management</td>
</tr>
<tr>
<td>Patrick</td>
<td>Sales</td>
</tr>
</table>