files/en-us/web/html/reference/elements/col/index.md
The <col> HTML element defines one or more columns in a column group represented by its parent {{HTMLElement("colgroup")}} element. The <col> element is only valid as a child of a {{HTMLElement("colgroup")}} element that has no span attribute defined.
{{InteractiveExample("HTML Demo: <col>", "tabbed-taller")}}
<table>
<caption>
Superheros and sidekicks
</caption>
<colgroup>
<col />
<col span="2" class="batman" />
<col span="2" class="flash" />
</colgroup>
<thead>
<tr>
<td></td>
<th scope="col">Batman</th>
<th scope="col">Robin</th>
<th scope="col">The Flash</th>
<th scope="col">Kid Flash</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Skill</th>
<td>Smarts, strong</td>
<td>Dex, acrobat</td>
<td>Super speed</td>
<td>Super speed</td>
</tr>
</tbody>
</table>
.batman {
background-color: #d7d9f2;
}
.flash {
background-color: #ffe8d4;
}
table {
border-collapse: collapse;
border: 2px solid rgb(140 140 140);
font-family: sans-serif;
font-size: 0.8rem;
letter-spacing: 1px;
}
caption {
caption-side: bottom;
padding: 10px;
}
th,
td {
border: 1px solid rgb(160 160 160);
padding: 8px 6px;
}
td {
text-align: center;
}
This element includes the global attributes.
span
<col> element spans. The value must be a positive integer greater than zero. If not present, its default value is 1.The following attributes are deprecated and should not be used. They are documented below for reference when updating existing code and for historical interest only.
align {{deprecated_inline}}
: Specifies the horizontal alignment of each column cell. The possible {{Glossary("enumerated")}} values are left, center, right, justify, and char. When supported, the char value aligns the textual content on the character defined in the char attribute and on offset defined by the charoff attribute. Note that this attribute overrides the specified align of its {{HTMLElement("colgroup")}} parent element. Use the {{cssxref("text-align")}} CSS property on the {{htmlelement("td")}} and {{htmlelement("th")}} elements instead, as this attribute is deprecated.
[!NOTE] Setting
text-alignon the<col>element has no effect as<col>has no descendants, and therefore no elements inherit from it.If the table does not use a
colspanattribute, use thetd:nth-of-type(an+b)CSS selector. Setato zero andbto the position of the column in the table, e.g.,td:nth-of-type(2) { text-align: right; }to right-align the second column cells.If the table does use a
colspanattribute, the effect can be achieved by combining adequate CSS attribute selectors like[colspan=n], though this is not trivial.
bgcolor {{deprecated_inline}}
#, or a color keyword. Other CSS {{cssxref("<color>")}} values are not supported. Use the {{cssxref("background-color")}} CSS property instead, as this attribute is deprecated.char {{deprecated_inline}}
.) when attempting to align numbers or monetary values. If align is not set to char, this attribute is ignored, though it will still override the specified char of its {{HTMLElement("colgroup")}} parent element.charoff {{deprecated_inline}}
char attribute.valign {{deprecated_inline}}
: Specifies the vertical alignment of each column cell. The possible {{Glossary("enumerated")}} values are baseline, bottom, middle, and top. Note that this attribute overrides the specified valign of its {{HTMLElement("colgroup")}} parent element. Use the {{cssxref("vertical-align")}} CSS property on the {{htmlelement("td")}} and {{htmlelement("th")}} elements instead, as this attribute is deprecated.
[!NOTE] Setting
vertical-alignon the<col>element has no effect as<col>has no descendants, and therefore no elements inherit from it.If the table does not use a
colspanattribute, use thetd:nth-of-type(an+b)CSS selector. Setato zero andbto the position of the column in the table, e.g.,td:nth-of-type(2) { vertical-align: middle; }to center the second column cells vertically.If the table does use a
colspanattribute, the effect can be achieved by combining adequate CSS attribute selectors like[colspan=n], though this is not trivial.
width {{deprecated_inline}}
0*, which means that the width of each column spanned should be the minimum width necessary to hold the column's contents. Relative widths such as 5* can also be used. Note that this attribute overrides the specified width of its {{HTMLElement("colgroup")}} parent element. Use the {{cssxref("width")}} CSS property instead, as this attribute is deprecated.<col> element is used within a {{HTMLElement("colgroup")}} element that doesn't have a span attribute.<col> elements do not structurally group columns together. This is the role of the {{HTMLElement("colgroup")}} element.<col>:
background properties will set the background for cells within the column. As the column background color is painted on top of the table and column groups ({{HTMLElement("colgroup")}}), but behind background colors applied to the row groups ({{htmlelement("thead")}}, {{htmlelement("tbody")}}, and {{htmlelement("tfoot")}}), the rows ({{htmlelement("tr")}}), and the individual cells ({{htmlelement("th")}} and {{htmlelement("td")}}), backgrounds applied to table columns are only visible if every layer painted on top of them has a transparent background.border properties apply, but only if the <table> has {{cssxref("border-collapse", "border-collapse: collapse")}} set.collapse for a column results in all cells of that column not being rendered, and cells spanning into other columns being clipped. The space these columns would have occupied is removed. However, the size of other columns is still calculated as though the cells in the collapsed column(s) are present. Other values for visibility have no effect.width property defines a minimum width for the column, as if {{cssxref("min-width")}} were set.See {{HTMLElement("table")}} for a complete table example introducing common standards and best practices.
This example demonstrates an eight-column table divided into three <col> elements.
A {{HTMLElement("colgroup")}} element provides structures to a basic table, creating a single implicit column group. Three <col> elements are included within the <colgroup>, creating three stylable columns. The span attribute specifies the number of table columns each <col> should span (defaulting to 1 when omitted), enabling attributes to be shared across the columns in each <col>.
<table>
<caption>
Personal weekly activities
</caption>
<colgroup>
<col />
<col span="5" class="weekdays" />
<col span="2" class="weekend" />
</colgroup>
<thead>
<tr>
<th>Period</th>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thu</th>
<th>Fri</th>
<th>Sat</th>
<th>Sun</th>
</tr>
</thead>
<tbody>
<tr>
<th>a.m.</th>
<td>Clean room</td>
<td>Football training</td>
<td>Dance Course</td>
<td>History Class</td>
<td>Buy drinks</td>
<td>Study hour</td>
<td>Free time</td>
</tr>
<tr>
<th>p.m.</th>
<td>Yoga</td>
<td>Chess Club</td>
<td>Meet friends</td>
<td>Gymnastics</td>
<td>Birthday party</td>
<td>Fishing trip</td>
<td>Free time</td>
</tr>
</tbody>
</table>
We use CSS, instead of deprecated HTML attributes, to provide a background color to the columns and align the cell content:
table {
border-collapse: collapse;
border: 2px solid rgb(140 140 140);
}
caption {
caption-side: bottom;
padding: 10px;
}
th,
td {
border: 1px solid rgb(160 160 160);
padding: 8px 6px;
text-align: center;
}
.weekdays {
background-color: #d7d9f2;
}
.weekend {
background-color: #ffe8d4;
}
table {
font-family: sans-serif;
font-size: 0.8rem;
letter-spacing: 1px;
}
{{EmbedLiveSample('Example', 650, 170)}}
{{Specifications}}
{{Compat}}