- HTML Tutorial
- HTML - Home
- HTML - Introduction
- HTML - Editors
- HTML - Basic Tags
- HTML - Elements
- HTML - Attributes
- HTML - Headings
- HTML - Paragraphs
- HTML - Fonts
- HTML - Blocks
- HTML - Style Sheet
- HTML - Formatting
- HTML - Quotations
- HTML - Comments
- HTML - Colors
- HTML - Images
- HTML - Image Map
- HTML - Iframes
- HTML - Phrase Elements
- HTML - Meta Tags
- HTML - Classes
- HTML - IDs
- HTML - Backgrounds
- HTML Tables
- HTML - Tables
- HTML - Headers & Caption
- HTML - Table Styling
- HTML - Table Colgroup
- HTML - Nested Tables
- HTML Lists
- HTML - Lists
- HTML - Unordered Lists
- HTML - Ordered Lists
- HTML - Definition Lists
- HTML Links
- HTML - Text Links
- HTML - Image Links
- HTML - Email Links
- HTML Color Names & Values
- HTML - Color Names
- HTML - RGB
- HTML - HEX
- HTML - HSL
- HTML Forms
- HTML - Forms
- HTML - Form Attributes
- HTML - Form Control
- HTML - Input Attributes
- HTML Media
- HTML - Video Element
- HTML - Audio Element
- HTML - Embed Multimedia
- HTML Header
- HTML - Head Element
- HTML - Adding Favicon
- HTML - Javascript
- HTML Layouts
- HTML - Layouts
- HTML - Layout Elements
- HTML - Layout using CSS
- HTML - Responsiveness
- HTML - Symbols
- HTML - Emojis
- HTML - Style Guide
- HTML Graphics
- HTML - SVG
- HTML - Canvas
- HTML APIs
- HTML - Geolocation API
- HTML - Drag & Drop API
- HTML - Web Workers API
- HTML - WebSocket
- HTML - Web Storage
- HTML - Server Sent Events
- HTML Miscellaneous
- HTML - MathML
- HTML - Microdata
- HTML - IndexedDB
- HTML - Web Messaging
- HTML - Web CORS
- HTML - Web RTC
- HTML Demo
- HTML - Audio Player
- HTML - Video Player
- HTML - Web slide Desk
- HTML Tools
- HTML - Velocity Draw
- HTML - QR Code
- HTML - Modernizer
- HTML - Validation
- HTML - Color Picker
- HTML References
- HTML - Cheat Sheet
- HTML - Tags Reference
- HTML - Attributes Reference
- HTML - Events Reference
- HTML - Fonts Reference
- HTML - ASCII Codes
- ASCII Table Lookup
- HTML - Color Names
- HTML - Entities
- MIME Media Types
- HTML - URL Encoding
- Language ISO Codes
- HTML - Character Encodings
- HTML - Deprecated Tags
- HTML Resources
- HTML - Quick Guide
- HTML - Useful Resources
- HTML - Color Code Builder
- HTML - Online Editor
HTML - <col> Tag
HTML <col> tag is used to offer information about columns. Each column within a <colgroup> element is given column characteristics by the HTML <col> tag.
Instead of repeating the styles for each cell and each row, you may apply styles to entire columns by using the <col> tag. This element appears to be a highly useful element for formatting columns in a table, and it does have some advantages. However, there is a significant issue: the table's individual cells aren't truly contained within the column.
Syntax
<col attribute = "value">
Attribute
HTML col tag supports Global and Event attributes of HTML. Some Specific attributes as well which are listed bellow.
Attribute | Value | Description |
---|---|---|
span | number | Specifies the number of consecutive columns the <col> element spans. |
align | left right center justify |
Specifies the alignment of text content(Deprecated). |
bgcolor | color | Specifies the background color of each column cell(Deprecated). |
char | character | Specifies the alignment of the content to a character of each column cell(Deprecated). |
charoff | number | Specifies the number of characters to offset the column cell content from the alignment character specified by the char attribute(Deprecated). |
valign | baseline bottom middle top |
Specifies the vertical alignment of each column cell(Deprecated). |
Examples of HTML col Tag
Bellow examples will illustrate the usage of col tag. Where, when and how to use col tag to offer information about columns.
Using col tag with Table
Following is an example where we are going to use the <col> tag in the HTML table.
<!DOCTYPE html> <html> <body> <table border="1"> <col style='color:red;background:#ABEBC6;'> <tr> <td>Ram</td> <td>1</td> </tr> <tr> <td>Rahul</td> <td>2</td> </tr> <tr> <td>Ravi</td> <td>3</td> </tr> </table> </body> </html>
Specifying Consecutive Columns
Consider another scenario where we are going to use the span attribute with the <col> tag.
<!DOCTYPE html> <html> <style> table, th, td { border: 1.5px solid #DE3163; } </style> <body> <table> <colgroup> <col span="2" style="background-color:#D2B4DE"> </colgroup> <tr> <th>ID</th> <th>Name</th> <th>Age</th> </tr> <tr> <td>123</td> <td>Maya</td> <td>22</td> </tr> <tr> <td>124</td> <td>Ram</td> <td>23</td> </tr> <tr> <td>125</td> <td>Ram</td> <td>23</td> </tr> </table> </body> </html>
Defining Column Width
Let’s look at the following example, where we are going to use the width attribute along with the <col> tag.
<!DOCTYPE html> <html> <body> <table border="1"> <colgroup> <col width="50"></col> <col width="100"></col> <col width="150"></col> <col width="50"></col> </colgroup> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> </table> </body> </html>
HTML tables are defined by their rows. Because of this, any style applied to a row will take override over any style applied to a column. The fact that only a small number of CSS properties may be managed by the <col> element further complicates matters. The following are the properties that are controllable:
- CSS border Property: The border property is used to create a border around an element, such as a div, image, or text.
- CSS background Property: The background property of CSS is used to set the background of an element.
- CSS width Property: The width property sets the width of an element's content area.
- CSS visibility Property: CSS visibility property allows you to show or hide an element without changing the layout of a document, while hidden elements take up space.
The colour of the text cannot be changed, however you can change the background colour of each cell in a column. The row colour will take precedence over the column colour if one of your rows is coloured. The <col> tag doesn’t require any kind of closing tag in HTML.
Supported Browsers
Tag | |||||
---|---|---|---|---|---|
col | Yes | Yes | Yes | Yes | Yes |
To Continue Learning Please Login
Login with Google