• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • <col>

    HTML <col>元素定义表格中的列,并用于定义所有公共单元格上的公共语义。它通常位于<colgroup>元素内。

    浏览器支持

    所有主流浏览器都支持<col>标签。

    注意:W3C规范中 HTML5 中支持的属性只有span。用于 css 控制属性只有borderwidthbackgroundvisibility。这些被所有浏览器支持。


    标签定义及使用说明

    • <col>标签为表格中的一个或多个列定义属性值。您只能在表格或列组中使用该元素。<col>标签只能在<table>标签或<colgroup>标签中使用来为表格中一个或多个列定义属性值。
    • 在html中,<col>标签是单标签,可以没有结束标签;在xhtml中,<col>标签必须使用“/”关闭,如:<col span="2"/>
    • <col>元素是空元素。如需创建列,必须在 tr 元素内规定 td 元素。
    • <col>标签,可以向整个列应用样式,而不需要重复为每个单元格或每一行设置样式。
    • 如果需要向一个列组规定相同的属性值,请使用<colgroup>元素。<col>标签规定了<colgroup>元素内部的每一列的列属性。

    属性

    属性描述
    alignleft
    right
    center
    justify
    char
    HTML5 不支持。规定与<col>元素相关的内容的水平对齐方式。
    charcharacterHTML5 不支持。规定根据哪个字符来对齐与<col>元素相关的内容。
    charoffnumberHTML5 不支持。规定第一个对齐字符的偏移量。
    valigntop
    middle
    bottom
    baseline
    HTML5 不支持。规定与<col>元素相关的内容的垂直对齐方式。
    spannumberHTML5 支持。规定<col>元素应该横跨的列数。
    width%
    pixels
    relative_length
    HTML5 支持。Specifies the width of a <col> element

    HTML 4.01 与 HTML 5 之间的差异

    HTML5 中不再支持 HTML 4.01 中的大部分属性。HTML5 中支持的属性只有spanborderwidthbackgroundvisibility

    HTML 与 XHTML 之间的差异

    在 HTML 中,<col>标签没有结束标签。

    在 XHTML 中,<col>标签必须被正确的关闭。

    全局属性

    <col>标签支持HTML 的全局属性。

    事件属性

    <col>标签支持HTML 的事件属性。

    实例

    <table>
      <col style="color:blue" />
      <col span="2" style="color:red;background-color:#ccc;" />
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
      </tr>
    </table>
    

    结果:

    1234
    1234

    HTML5中,不支持color,所以字体颜色红色,无效。支持background,所以背景色是灰色。支持span,所以前两列中的,背景色有效。

    <colgroup><col>标签为表格中的三个列设置了背景色:

    <table border="1">
    	<colgroup>
    		<col span="2" style="background-color:red">
    		<col style="background-color:yellow">
    	</colgroup>
    	<tr>
    		<th>isbn</th>
    		<th>title</th>
    		<th>price</th>
    	</tr>
    	<tr>
    		<td>3476896</td>
    		<td>my first html</td>
    		<td>$53</td>
    	</tr>
    </table>
    
    isbntitleprice
    3476896my first html$53
    <table width="100%" border="1">
      <col span="3" align="center" />
      <tr>
        <th>ISBN</th>
        <th>Title</th>
        <th>Price</th>
      </tr>
      <tr>
        <td>3476896</td>
        <td>My first HTML</td>
        <td>$53</td>
      </tr>
    </table>
    
    ISBNTitlePrice
    3476896My first HTML$53

    上篇:<table>

    下篇:<colgroup>