: The Table Column Element - HTML - MDN Web Docs - Mozilla

Trang chủ » Html Tag Column Width » : The Table Column Element - HTML - MDN Web Docs - Mozilla

Có thể bạn quan tâm

  1. References
  2. HTML
  3. Elements
  4. <col>
Article Actions
  • English (US)
    • Remember language
    • Deutsch
    • Español
    • Français
    • 日本語
    • Русский
    • 中文 (简体)
    • 正體中文 (繁體)
  • Try it
  • Attributes
  • Usage notes
  • Example
  • Technical summary
  • Specifications
  • Browser compatibility
  • See also
  1. HTML
  2. Tutorials
  3. HTML basics
  4. Introduction to HTML
    1. Introduction to HTML overview
    2. Getting started with HTML
    3. What's in the head? Metadata in HTML
    4. HTML text fundamentals
    5. Creating hyperlinks
    6. Advanced text formatting
    7. Document and website structure
    8. Debugging HTML
    9. Assessment: Marking up a letter
    10. Assessment: Structuring a page of content
  5. Multimedia and embedding
    1. Multimedia and embedding overview
    2. Images in HTML
    3. Video and audio content
    4. From object to iframe — other embedding technologies
    5. Adding vector graphics to the web
    6. Responsive images
    7. Assessment: Mozilla splash page
  6. HTML tables
    1. HTML tables overview
    2. HTML table basics
    3. HTML table advanced features and accessibility
    4. Assessment: Structuring planet data
  7. References
  8. HTML elements
    1. <a>
    2. <abbr>
    3. <acronym> Deprecated
    4. <address>
    5. <area>
    6. <article>
    7. <aside>
    8. <audio>
    9. <b>
    10. <base>
    11. <bdi>
    12. <bdo>
    13. <big> Deprecated
    14. <blockquote>
    15. <body>
    16. <br>
    17. <button>
    18. <canvas>
    19. <caption>
    20. <center> Deprecated
    21. <cite>
    22. <code>
    23. <col>
    24. <colgroup>
    25. <data>
    26. <datalist>
    27. <dd>
    28. <del>
    29. <details>
    30. <dfn>
    31. <dialog>
    32. <dir> Deprecated
    33. <div>
    34. <dl>
    35. <dt>
    36. <em>
    37. <embed>
    38. <fencedframe> Experimental
    39. <fieldset>
    40. <figcaption>
    41. <figure>
    42. <font> Deprecated
    43. <footer>
    44. <form>
    45. <frame> Deprecated
    46. <frameset> Deprecated
    47. <h1>
    48. <head>
    49. <header>
    50. <hgroup>
    51. <hr>
    52. <html>
    53. <i>
    54. <iframe>
    55. <img>
    56. <input>
    57. <ins>
    58. <kbd>
    59. <label>
    60. <legend>
    61. <li>
    62. <link>
    63. <main>
    64. <map>
    65. <mark>
    66. <marquee> Deprecated
    67. <menu>
    68. <meta>
    69. <meter>
    70. <nav>
    71. <nobr> Deprecated
    72. <noembed> Deprecated
    73. <noframes> Deprecated
    74. <noscript>
    75. <object>
    76. <ol>
    77. <optgroup>
    78. <option>
    79. <output>
    80. <p>
    81. <param> Deprecated
    82. <picture>
    83. <plaintext> Deprecated
    84. <portal> Experimental
    85. <pre>
    86. <progress>
    87. <q>
    88. <rb> Deprecated
    89. <rp>
    90. <rt>
    91. <rtc> Deprecated
    92. <ruby>
    93. <s>
    94. <samp>
    95. <script>
    96. <search>
    97. <section>
    98. <select>
    99. <slot>
    100. <small>
    101. <source>
    102. <span>
    103. <strike> Deprecated
    104. <strong>
    105. <style>
    106. <sub>
    107. <summary>
    108. <sup>
    109. <table>
    110. <tbody>
    111. <td>
    112. <template>
    113. <textarea>
    114. <tfoot>
    115. <th>
    116. <thead>
    117. <time>
    118. <title>
    119. <tr>
    120. <track>
    121. <tt> Deprecated
    122. <u>
    123. <ul>
    124. <var>
    125. <video>
    126. <wbr>
    127. <xmp> Deprecated
  9. Global attributes
    1. accesskey
    2. anchor Experimental Non-standard
    3. autocapitalize
    4. autocorrect Experimental
    5. autofocus
    6. class
    7. contenteditable
    8. data-*
    9. dir
    10. draggable
    11. enterkeyhint
    12. exportparts
    13. hidden
    14. id
    15. inert
    16. inputmode
    17. is
    18. itemid
    19. itemprop
    20. itemref
    21. itemscope
    22. itemtype
    23. lang
    24. nonce
    25. part
    26. popover
    27. slot
    28. spellcheck
    29. style
    30. tabindex
    31. title
    32. translate
    33. virtualkeyboardpolicy Experimental
    34. writingsuggestions
  10. Attributes
    1. accept
    2. autocomplete
    3. capture
    4. crossorigin
    5. dirname
    6. disabled
    7. elementtiming
    8. for
    9. max
    10. maxlength
    11. min
    12. minlength
    13. multiple
    14. pattern
    15. placeholder
    16. readonly
    17. rel
    18. required
    19. size
    20. step
  11. <input> types
    1. <input type="button">
    2. <input type="checkbox">
    3. <input type="color">
    4. <input type="date">
    5. <input type="datetime-local">
    6. <input type="email">
    7. <input type="file">
    8. <input type="hidden">
    9. <input type="image">
    10. <input type="month">
    11. <input type="number">
    12. <input type="password">
    13. <input type="radio">
    14. <input type="range">
    15. <input type="reset">
    16. <input type="search">
    17. <input type="submit">
    18. <input type="tel">
    19. <input type="text">
    20. <input type="time">
    21. <input type="url">
    22. <input type="week">
  12. Guides
    1. Content categories
    2. Block-level elements
    3. Inline elements
    4. Quirks Mode and Standards Mode
    5. Date and time formats used in HTML
    6. Constraint validation
    7. Microdata
    8. Microformats
    9. Viewport meta tag
    10. Allowing cross-origin use of images and canvas
  • Try it
  • Attributes
  • Usage notes
  • Example
  • Technical summary
  • Specifications
  • Browser compatibility
  • See also

The <col> HTML element defines one or more columns in a column group represented by its parent <colgroup> element. The <col> element is only valid as a child of a <colgroup> element that has no span attribute defined.

Try it

Attributes

This element includes the global attributes.

span

Specifies the number of consecutive columns the <col> element spans. The value must be a positive integer greater than zero. If not present, its default value is 1.

Deprecated attributes

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

Specifies the horizontal alignment of each column cell. The possible 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 <colgroup> parent element. Use the text-align CSS property on the <td> and <th> elements instead, as this attribute is deprecated.

Note: Setting text-align on 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 colspan attribute, use the td:nth-of-type(an+b) CSS selector. Set a to zero and b to 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 colspan attribute, the effect can be achieved by combining adequate CSS attribute selectors like [colspan=n], though this is not trivial.

bgcolor Deprecated

Defines the background color of each column cell. The value is an HTML color; either a 6-digit hexadecimal RGB code, prefixed by a #, or a color keyword. Other CSS <color> values are not supported. Use the background-color CSS property instead, as this attribute is deprecated.

char Deprecated

Does nothing. It was originally intended to specify the alignment of the content to a character of each column cell. Typical values for this include a period (.) 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 <colgroup> parent element.

charoff Deprecated

Does nothing. It was originally intended to specify the number of characters to offset the column cell content from the alignment character specified by the char attribute.

valign Deprecated

Specifies the vertical alignment of each column cell. The possible enumerated values are baseline, bottom, middle, and top. Note that this attribute overrides the specified valign of its <colgroup> parent element. Use the vertical-align CSS property on the <td> and <th> elements instead, as this attribute is deprecated.

Note: Setting vertical-align on 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 colspan attribute, use the td:nth-of-type(an+b) CSS selector. Set a to zero and b to 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 colspan attribute, the effect can be achieved by combining adequate CSS attribute selectors like [colspan=n], though this is not trivial.

width Deprecated

Specifies a default width for each column. In addition to the standard pixel and percentage values, this attribute can take the special form 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 <colgroup> parent element. Use the width CSS property instead, as this attribute is deprecated.

Usage notes

  • The <col> element is used within a <colgroup> element that doesn't have a span attribute.
  • The <col> elements do not structurally group columns together. This is the role of the <colgroup> element.
  • Only a limited number of CSS properties affect <col>:
    • background : The various 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 (<colgroup>), but behind background colors applied to the row groups (<thead>, <tbody>, and <tfoot>), the rows (<tr>), and the individual cells (<th> and <td>), backgrounds applied to table columns are only visible if every layer painted on top of them has a transparent background.
    • border: The various border properties apply, but only if the <table> has border-collapse: collapse set.
    • visibility: The value 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: The width property defines a minimum width for the column, as if min-width were set.

Example

See <table> for a complete table example introducing common standards and best practices.

This example demonstrates an eight-column table divided into three <col> elements.

HTML

A <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>.

html<table> <caption> Personal weekly activities </caption> <colgroup> <col /> <col span="5" class="weekdays" /> <col span="2" class="weekend" /> </colgroup> <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> <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> </table>

CSS

We use CSS, instead of deprecated HTML attributes, to provide a background color to the columns and align the cell content:

csstable { 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; }

Result

Technical summary

Content categories None.
Permitted content None; it is a void element.
Tag omission Must have a start tag and must not have an end tag.
Permitted parents <colgroup> only, though it can be implicitly defined as its start tag is not mandatory. The <colgroup> must not have a span attribute.
Implicit ARIA role No corresponding role
Permitted ARIA roles No role permitted
DOM interface HTMLTableColElement

Specifications

Specification
HTML Standard # the-col-element

Browser compatibility

BCD tables only load in the browser

See also

  • Learn: HTML tables
  • <caption>, <colgroup>, <table>, <tbody>, <td>, <tfoot>, <th>, <thead>, <tr>: Other table-related elements
  • background-color: CSS property to set the background color of each column cell
  • border: CSS property to control borders of column cells
  • text-align: CSS property to horizontally align each column cell content
  • vertical-align: CSS property to vertically align each column cell content
  • visibility: CSS property to hide cells of a column
  • width: CSS property to control the default width for each column
  • :nth-of-type, :first-of-type, :last-of-type: CSS pseudo-classes to select the desired column cells

Help improve MDN

Was this page helpful to you?YesNoLearn how to contribute.

This page was last modified on Sep 25, 2024 by MDN contributors.

View this page on GitHub • Report a problem with this content

Từ khóa » Html Tag Column Width