HTML col tag

Example

Set the background color of the three columns with the <colgroup> and <col> tags:

<table>
<colgroup>
<col span="2" style="background-color:red">
<col style="background-color:yellow">
</colgroup>
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td>$53</td>
</tr>
</table>

ISBN	Title	Price
3476896	My first HTML	$53

Definition and Usage

The <col> tag specifies column properties for each column within a <colgroup> element.

The <col> tag is useful for applying styles to entire columns, instead of repeating the styles for each cell, for each row.

Attributes

Attribute	Value	Description
span	number	Specifies the number of columns a <col> element should span

Global Attributes

The <col> tag also supports the Global Attributes in HTML.

Event Attributes

The <col> tag also supports the Event Attributes in HTML.

More Examples

Example

Align text in table columns (with CSS):

<table style="width:100%">
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td style="text-align:right">$53</td>
</tr>
<tr>
<td>2489604</td>
<td>My first CSS</td>
<td style="text-align:right">$47</td>
</tr>
</table>

Example

Vertical-align text in table columns (with CSS):

<table style="height:200px">
<tr>
<th>Month</th>
<th style="vertical-align:bottom">Savings</th>
</tr>
<tr>
<td>January</td>
<td style="vertical-align:bottom">$100</td>
</tr>
</table>

Example

Specify width of table columns (with CSS):

<table>
<tr>
<th style="width:130px">Month</th>
<th style="width:80px">Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>

Default CSS Settings

Most browsers will display the <col> element with the following default values:

Example

col {
display: table-column;
}