小码哥的IT人生

HTML <col> 标签 详解

HTML基础 2022-06-02 09:39:29小码哥的IT人生shichen

HTML <col> 标签

实例

col 元素为表格中的三个列规定了不同的对齐方式:

<table width="100%" border="1">
  <col align="left" />
  <col align="left" />
  <col align="right" />
  <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>

 

完整实例【亲自试一试】:

<html>
<body>
<table width="100%" border="1">
  <col align="left" />
  <col align="left" />
  <col align="right" />
  <tr>
    <th>ISBN</th>
    <th>Title</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>3476896</td>
    <td>My first HTML</td>
    <td>$53</td>
  </tr>
  <tr>
    <td>2489604</td>
    <td>My first CSS</td>
    <td>$47</td>
  </tr>
</table>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果:http://www.phpcodeweb.com/runjs.html

浏览器支持

元素 Chrome IE Firefox Safari Opera
<col> Yes Yes Yes Yes Yes

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

定义和用法

<col> 标签为表格中一个或多个列定义属性值。

如需对全部列应用样式,<col> 标签很有用,这样就不需要对各个单元和各行重复应用样式了。

您只能在 table 或 colgroup 元素中使用 <col> 标签。

HTML 与 XHTML 之间的差异

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

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

提示和注释:

提示:请为 <col> 标签添加 class 属性。这样就可以使用 CSS 来负责对齐方式、宽度和颜色等等。

提示:如果您希望在 colgroup 内部为每个列规定不同的属性值时,请使用此元素。如果没有 col 元素,列会从 colgroup 那里继承所有的属性值。

注释:col 元素是仅包含属性的空元素。如需创建列,您就必须在 tr 元素内部规定 td 元素。

参见:<colgroup> 标签

可选的属性

属性 描述
align
  1. right
  2. left
  3. center
  4. justify
  5. char
规定与 col 元素相关的内容的水平对齐方式。
char character 规定根据哪个字符来对齐与 col 元素相关的内容。
charoff number 规定第一个对齐字符的偏移量。
span number 规定 col 元素应该横跨的列数。
valign
  1. top
  2. middle
  3. bottom
  4. baseline
定义与 col 元素相关的内容的垂直对齐方式。
width
  1. pixels
  2. %
  3. relative_length
规定 col 元素的宽度。

全局属性

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

事件属性

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

相关页面

HTML DOM 参考手册:Column 对象

版权所有 © 小码哥的IT人生
Copyright © phpcodeweb All Rights Reserved
ICP备案号:苏ICP备17019232号-2  

苏公网安备 32030202000762号

© 2021-2024