HTML <col> Column Tag
Tags: learnhtml, htmlc
Published: 2021-05-10 05:20:44

---
title: HTML <col> Column Tag
published: true
date: 2021-02-17 12:13:24 UTC
tags: LearnHTML,HTMLC
canonical_url: https://sharepointanchor.com/learn-html/html-col-column-tag/
---

In an HTML document, the **<col> Column tag** used for **specifying the properties of one or more columns**. This tag is generally used within an **<colgroup>** element.

<svg aria-hidden="true" focusable="false" data-icon="clock" width="20" height="20" fill="none" stroke="currentColor" style="display:inline-block;vertical-align:-0.1em" role="img" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>Estimated reading time: 3 minutes

## Syntax:

The <col> tag **does not contain the closing tag**. But in **XHTML** , it contains both **opening <col>** and **closing <col/>** tags.

```

<col attribute="value">

```

### HTML <col> Tag:
<style> th, td{ padding: 20px; } </style>

| HTML <col> tag | Used to specify the properties of one or more columns. |
| Content categories | None |
| Permitted content | None, It is an empty element. |
| Tag omission | It must have an opening tag, but does not require a closing tag. |
| Permitted parents | <colgroup> tag |
| Implicit ARIA role | No corresponding role |
| Permitted ARIA roles | No role permitted |
| DOM interface | HTML TableColElement. |

## Sample of HTML <col> Tag:

Here is the example for HTML column tag:

```

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table, th, td {
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
<h3>Sample of HTML <col> Tag</h3>
    <table>
      <colgroup>
        <col span="2" style="width:20%; background-color:#eee;">
        <col style="width:10%; background-color:#F5bf42;">
      </colgroup>
      <thead>
        <th>Name</th>
        <th>Gender</th>
        <th>Age</th>
      </thead>
      <tr>
        <td>Bella Smith</td>
        <td>Female</td>
        <td>19</td>
      </tr>
      <tr>
        <td>Jack Johnson</td>
        <td>Male</td>
        <td>23</td>
</tr>
    </table>
  </body>
</html>

```

## Result:

![](https://sharepointanchor.com/wp-content/uploads/2021/02/Result-1-6.png)<figcaption>Result</figcaption>

### Download Sample File:

[HTML-Column-Tag](https://sharepointanchor.com/wp-content/uploads/2021/02/HTML-Column-Tag.html)[Download](https://sharepointanchor.com/wp-content/uploads/2021/02/HTML-Column-Tag.html)

## Attributes:

The  **<col>**  tag supports the  **global attributes**  and the  **event attributes**.

<style> th, td{ padding: 20px; } </style>

| Attribute | Value | Description |
| --- | --- | --- |
| align | | The align attribute will help to **set the alignment of the content of the column**. **Not supported in HTML5.** |
| left | It aligns to the left. |
| right | Used to the **right alignment**. |
| center | Helps to **align the center**. |
| justify | This value helps to **stretch the lines so that each line has equal width**. |
| char | It is used to **align a special character with a minimum offset** , which is defined by the **“char”** and **“charoff”**  attributes. |
| char | character | This value will **align the content related to an <col> element to a character**. It is used only if the attribute is aligned = **“char”.**** Not supported in HTML5.** |
| charoff | number | Helps to **shift the content of the cell** relative to the character specified as the value of the attribute to the right (positive values) or to the left (negative values). It is used only if the attribute is aligned = **“char”.**** Not supported in HTML5.** |
| span | number | Sets the **quantity of columns** , the properties of which are determined by the <col> element. The **number must be a positive** integer. If the parameter is not specified, the **default value is 1**. |
| valign | | The **“valign”** attribute helps to **align the content vertically**. |
| top | It helps to align at the **top of the line**. |
| bottom | This value used to align the **bottom edge**. |
| middle | Used for **center or middle alignment**. |
| baseline | This value is used for **baseline alignment**. **Not supported in HTML5.** |
| width | % pixels relative\_length | It will set the **width of the column**. **Not supported in HTML5.** |

 
## Browser Support:

![](https://sharepointanchor.com/wp-content/uploads/2021/02/Browser-Support-3.png)<figcaption>Browser Support</figcaption>

### Related Articles:

- **[HTML <aside> Aside Tag](https://sharepointanchor.com/learn-html/html-aside-tag/)**
- **[HTML <body> Body Tag](https://sharepointanchor.com/learn-html/html-body-tag/)**
- **[Basic HTML Definitions and Usages in the Real World](https://sharepointanchor.com/learn-html/basic-html-definitions-and-usages-in-real-world/)**
- **[HTML <basefont> Basefont Tag](https://sharepointanchor.com/learn-html/html-basefont-tag/)**

The post [HTML <code><col></code> Column Tag](https://sharepointanchor.com/learn-html/html-col-column-tag/) appeared first on [Share Point Anchor](https://sharepointanchor.com).