HTML Col Tag - Learn HTML | W3Docs

Trang chủ » Html Col Tag Width » HTML Col Tag - Learn HTML | W3Docs

Có thể bạn quan tâm

w3docs logo Books Learn HTML Learn CSS Learn Git Learn Javascript Learn PHP Learn python Learn Java Exercises HTML JavaScript Git CSS PHP Courses Quizzes Snippets Tools General Tools
  • Password Generator
  • HTML Editor
  • HTML Encoder
  • Base 64
  • Code Diff
  • JSON Beautifier
  • CSS Beautifier
  • Markdown Convertor
  • Find the Closest Tailwind CSS Color
  • Phrase encrypt / decrypt
  • Browser Feature Detection
  • Number convertor
  • JTW Decoder
CSS Maker
  • CSS Maker
  • CSS Maker text shadow
  • CSS Maker Text Rotation
  • CSS Maker Out Line
  • CSS Maker RGB Shadow
  • CSS Maker Transform
  • CSS Maker Font Face
Color Tools
  • Color Picker
  • Colors CMYK
  • Colors HWB
  • Colors HSL
  • Color Hex
  • Color mixer
  • Color Converter
  • Colors RGB
  • Color Contrast Analyzer
  • Color Gradient
String Tools
  • String Length Calculator
  • MD5 Hash Generator
  • Sha256 Hash Generator
  • String Reverse
  • URL Encoder
  • URL Decoder
  • Base 64 Encoder
  • Base 64 Decoder
  • Extra Spaces Remover
  • String to Lowercase
  • String to Uppercase
  • Word Count Calculator
  • Empty Lines Remover
  • HTML Tags Remover
  • Binary to Hex
  • Hex to Binary
  • Rot13 Transform on a String
  • String to Binary
  • Duplicate Lines Remover
Change theme
  • Dark
  • Light
  • System
  • HTML Basics HTML IntroductionEditors & ToolsHTML ElementsHTML Basic TagsHTML AttributesHTML HeadingsHTML FormattingHTML LinksHTML ListsHTML ColorsHTML CommentsHTML TablesHTML BlocksHTML ScriptsHTML Styles - CSSHTML File PathsHTML Computercode
  • HTML Templates Layout TemplatesForm Templates
  • HTML 5 HTML5 IntroductionHTML5 TagsSemantic ElementsAudio & VideoHTML5 Browser SupportHTML5 Migration
  • HTML References Character SetsASCIIISO-8859-1ISO Language CodesUTF-8 EncodingHTML EntitiesKeyboard ShortcutsHTTP MethodsHTML ImagesHTTP Status MessagesMIME-TypesTable of HTML TagsXHTMLHTML URL
  • HTML Tags Deprecated TagsHTML Global AttributesEvent Attributes<!-- ... --><!DOCTYPE><a><abbr><acronym><address><applet><area><article><aside><audio><b><base><basefont><bdi><bdo><big><blink><blockquote><body><br><button><canvas><caption><center><cite><code><col><colgroup><data><datalist><dd><del><details><dfn><dialog><dir><div><dl><dt><em><embed><fieldset><figcaption><figure><font><footer><form><frame><frameset><h1>-<h6><head>
  • <header><hgroup><hr><html><i><iframe><img><input><ins><isindex><kbd><keygen><label><legend><li><link><main><map><mark><marquee><menu><menuitem><meta><meter><nav><nobr><noframes><noscript><object><ol><optgroup><option><output><p><param><plaintext><picture><pre><progress><q><rb><rp><rt><rtc><ruby><s><samp><script><section><select><small><source><spacer><span><strike>
  • <strong><style><sub><summary><sup><svg><table><tbody><td><template><textarea><tfoot><th><thead><time><title><tr><track><tt><u><ul><var><video><wbr><xmp>
  • Canvas Tutorial Canvas IntroCanvas DrawingCanvas CoordinatesCanvas GradientsCanvas TextCanvas ImagesCanvas Reference
  • SVG Tutorial SVG IntroSVG in HTML5SVG RectangleSVG CircleSVG EllipseSVG LineSVG PolygonSVG PolylineSVG PathSVG TextSVG StrokingSVG Filters IntroSVG Blur EffectsSVG Drop ShadowsSVG LinearSVG RadialSVG Reference
  • HTML Attributes Deprecated AttributesHTML Class AttributeHTML id Attribute
  • HTML Media HTML MultimediaHTML YouTube Videos
  • HTML Forms HTML Forms
  • HTML Attribute Reference altasyncacceptcontentcontenteditablecontrolscoordsdisableddownloaddraggableautocompleteautofocusdeferdircolspanaccesskeyactionautoplaycheckedaccept-charset
HTML <col> Tag ❮ Prev Next ❯

The <col> tag defines the properties of one or more columns in the HTML table defined by the <table> tag. The <col> tag is often used with the <colgroup> tag which specifies a group with common properties.

The <col> tag is placed inside the <table> tag, before the <thead>, <tbody>, <tfoot> and <tr> tags, and after the <caption> tag if it is used (in the <caption> tag we insert the name of the table).

Syntax

The <col> tag is empty, which means that the closing tag isn’t required. But in XHTML, the (<col>) tag must be closed (<col/>).

Example of the HTML <col> tag:

<!DOCTYPE html> <html> <head> <title>Title of the document</title> <style> table, th, td { border: 1px solid #666; } </style> </head> <body> <table> <colgroup> <col span="2" style="width:20%; background-color:#eee;"> <col style="width:10%; background-color:#8ebf42;"> </colgroup> <tr> <th>Name</th> <th>Gender</th> <th>Age</th> </tr> <tr> <td>Mary Nicolson</td> <td>female</td> <td>19</td> </tr> <tr> <td>John Johnson</td> <td>male</td> <td>23</td> </tr> </table> </body> </html> Try it Yourself »

Result

col exemple

Attributes

Attribute Value Description
align Sets the alignment of the content of the column. Not supported in HTML5.
left Aligns to the left.
right Aligns to the right.
center Aligns to the center.
justify Stretches the lines so that each line has equal width.
char Aligns a special character with a minimum offset, which is defined by the char and charoff attributes.
char character Aligns the content related to a <col> element to a character. It is used only if the attribute is align = "char". Not supported in HTML5.
charoff number Shifts 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 align = "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 Aligns the content vertically.
top Aligns at the top of the line.
bottom Aligns the bottom edge.
middle Aligns in the middle.
baseline Aligns the baseline.Not supported in HTML5.
width %pixelsrelative_length Sets the width of the column. Not supported in HTML5.

The <col> tag also supports the Global Attributes and the Event Attributes.

Browser support

chrome edge firefox safari opera
✓ ✓ ✓ ✓ ✓

Practice Your Knowledge

What does the HTML <col> tag do in an HTML document? It specifies column properties for each column within a <colgroup> element It defines a head section in HTML document It indicates the start of a new paragraph It provides styling to individual columns Correct Answer Correct! Wrong Answer Incorrect! Submit

Quiz Time: Test Your Skills!

Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.

  • HTML Basics
❮ Prev Next ❯

Related Resources

  • How to Set the Width of the Table Column
Sorry about that How can we improve it? Submit Thanks for your feedback! Thanks for your feedback! Do you find this helpful? Yes No Quizzes
  • PHP basics
  • HTML Basics
  • Javascript Basics
  • CSS Basics
  • ES6 Basics
  • TypeScript Basics
  • React Basics
  • Angular Basics
  • Sass Basics
  • Git Basics
  • Vue.js Basics
  • SQL Basics
  • Python Basics
  • Java Basics
  • NodeJS Basics

Từ khóa » Html Col Tag Width