主题
  • 默认模式
  • 浅蓝色模式
  • 淡红色模式
  • 深夜模式

定义和用法

<col>标签是 HTML 中用于定义表格中一列或多列属性的元素,通常与<colgroup>标签一起使用。

<col>标签用于为表格中的列指定样式属性,而不需要为每个单元格重复设置。

<col>元素的基本语法:

<table>
    <colgroup>
        <col style="background-color:yellow">
        <col style="background-color:lightblue">
    </colgroup>
    <tr>
        <th>书名</th>
        <th>价格</th>
    </tr>
    <tr>
        <td>HTML指南</td>
        <td>$29.99</td>
    </tr>
</table>

使用实例

接下来用多种实例演示<col>标签的用法,来深化您对<col>的理解。

1. span - 指定 <col> 元素应该横跨的列数

实例代码 运行代码
复制
<col span="2" style="background-color:red">

2. style - 指定列的内联样式

实例代码 运行代码
复制
<col style="width:100px">

3. class - 为列指定类名,用于 CSS 样式

实例代码 运行代码
复制
<col class="highlight">

4. 与 <colgroup> 配合使用

实例代码 运行代码
复制
<table>
    <colgroup>
        <col span="2" style="background-color:red">
        <col style="background-color:yellow">
    </colgroup>
    <tr>
        <th>ISBN</th>
        <th>书名</th>
        <th>价格</th>
    </tr>
    <tr>
        <td>12345</td>
        <td>HTML教程</td>
        <td>$29.99</td>
    </tr>
</table>

全局属性

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


事件属性

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


默认的 CSS 设置

大多数浏览器将使用以下默认值显示<col>元素:

col {
    display: table-column;
}

注意事项

  • <col>标签必须位于<caption>元素之后(如果有),且在<thead><tbody><tfoot><tr>元素之前。
  • 需要手动转义HTML特殊字符(如<>&
  • 对于键盘输入,考虑使用<kbd>标签
  • 对于变量,可以使用<avr>标签

浏览器支持

Chrome 浏览器 IE 浏览器 Firefox 浏览器 Safari 浏览器 Opera 浏览器
支持 支持 支持 支持 支持



评论区 0
发表评论