Introduction to <col>tag

The <col>HTML element is a powerful tool used to define the properties of one or more columns within a table. It is a self-closing tag that helps manage the presentation of data in an organized, readable format by allowing you to apply specific styles to entire columns without needing to target each individual cell. The <col>element is used exclusively within a <colgroup>element, which groups columns together for styling purposes.

Usage of the <col>Element

The <col>element must always be a direct child of the <colgroup>element, and its primary function is to provide a way to apply styles or attributes to entire columns in a table. For example, you can use the <col>element to set the width, background color, or border properties for all cells within a specific column.

Copy to clipboard
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>title of <col> tag</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>HTML Table with <code><col></code> Tag</h1>
<table>
<colgroup>
    <col class="col-id">
    <col class="col-name">
    <col class="col-age">
    <col class="col-country">
</colgroup>
<thead>
    <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Age</th>
        <th>Country</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>1</td>
        <td>Alice</td>
        <td>24</td>
        <td>USA</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Bob</td>
        <td>30</td>
        <td>Canada</td>
    </tr>
    <tr>
        <td>3</td>
        <td>Charlie</td>
        <td>22</td>
        <td>UK</td>
    </tr>
    <tr>
        <td>4</td>
        <td>Diana</td>
        <td>28</td>
        <td>Australia</td>
    </tr>
</tbody>
</table>
</div>
</body>
</html>
Copy to clipboard
/* General Styles */
    body {
        font-family: Arial, sans-serif;
        background-color: #f4f4f4;
        color: #333;
        margin: 0;
        padding: 20px;
    }
    
    .container {
        max-width: 800px;
        margin: 0 auto;
        background-color: #fff;
        padding: 20px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }
    
    h1 {
        text-align: center;
        margin-bottom: 20px;
    }
    
    /* Table Styles */
    table {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 20px;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    }
    
    th, td {
        padding: 10px;
        text-align: left;
        border-bottom: 1px solid #ddd;
    }
    
    /* Col Styles */
    .col-id {
        width: 10%;
        background-color: #f2f2f2;
    }
    
    .col-name {
        width: 40%;
        background-color: #e6f7ff;
    }
    
    .col-age {
        width: 20%;
        background-color: #e0f7ea;
    }
    
    .col-country {
        width: 30%;
        background-color: #fff3e0;
    }
    
    /* Table Header Styles */
    thead th {
        background-color: #333;
        color: #fff;
        text-transform: uppercase;
    }

Global Attributes

Attributes Description
accesskey Specifies a shortcut key to activate or focus an element.
autocapitalize Controls whether and how text input is automatically capitalized.
class Specifies one or more class names for the element, allowing CSS styling and JavaScript manipulation.
contenteditable Specifies whether the content of an element is editable or not.
contextmenu Specifies a context menu for the element.
dir Defines the text direction. Possible values are "ltr" (left-to-right), "rtl" (right-to-left), and "auto".
draggable Specifies whether an element is draggable. Possible values are "true" or "false".
enterkeyhint Specifies the action label or icon to be shown for the enter key on virtual keyboards.
hidden Indicates that the element is not yet, or is no longer, relevant. The browser does not display elements that have the `hidden` attribute set.
id Specifies a unique identifier for the element.
inputmode Provides a hint to browsers for which virtual keyboard configuration to use when editing this element or its descendants.
is Allows you to specify the type of custom element.
lang Specifies the language of the element's content.
nonce A cryptographic nonce ("number used once") that can be used by Content Security Policy (CSP) to determine whether or not a given fetch will be allowed to proceed.
part Specifies the element’s part in the shadow DOM.
slot Assigns a slot in a shadow DOM shadow tree.
spellcheck Indicates whether the element is subject to spell checking.
style Provides inline CSS styling for the element.
tabindex Specifies the tab order of the element.
title Adds extra information about the element, displayed as a tooltip when hovering over the element.
translate Specifies whether the content of the element should be translated. Possible values are "yes" or "no".
HTML Attributes Global Attributes Event Attributes
To view the full list
 To view the full list
 To view the full list
elements Chrome Browsers Microsoft Edge Browser Firefox Browsers Safari Browser Opera Browser
<col> Yes Yes Yes Yes Yes