参考资料

1. html列表标签详细说明以及案例
2. html表单标签详细说明以及案例
3. HTML 引文、引用和定义元素
4. HTML 图像
5. HTML 合并单元格
6. HTML 文字方向格式化
7. HTML 书签属性格式化
8. 禁用开发者工具的方法与示例

HTML 表格背景

HTML 表格背景

详细介绍

HTML 表格背景是指为表格元素设置的背景颜色或背景图像，可以应用于整个表格、行、列或单个单元格。

标签和属性

1. 传统HTML属性（已废弃，建议使用CSS）：

• bgcolor：设置背景颜色

• background：设置背景图片

2. CSS属性：

• background-color：设置背景颜色

• background-image：设置背景图片

• background-repeat：控制背景图片重复方式

• background-position：设置背景图片位置

• background-attachment：设置背景图片是否固定

• background：简写属性

用法

<!-- 传统HTML方式（不推荐） -->
<table bgcolor="#f0f0f0">
  <tr>
    <td background="image.jpg">单元格</td>
  </tr>
</table>

<!-- CSS方式（推荐） -->
<style>
  table {
    background-color: #f0f0f0;
  }
  td.highlight {
    background-image: url('image.jpg');
    background-repeat: no-repeat;
  }
</style>

实例

<table style="width:100%; border-collapse: collapse;">
  <tr style="background-color: #e6f7ff;">
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td style="background-color: #f5f5f5;">Data 1</td>
    <td style="background-image: linear-gradient(to right, #ffefba, #ffffff);">Data 2</td>
  </tr>
  <tr>
    <td colspan="2" style="background: url('pattern.png') repeat-x #fff;">Spanning cell</td>
  </tr>
</table>

CSS扩展功能

1. 渐变背景：

tr:hover {
  background: linear-gradient(to right, #ff9966, #ff5e62);
}

2. 多背景：

table {
  background: 
    url('corner.png') left top no-repeat,
    url('corner.png') right top no-repeat,
    linear-gradient(#f9f9f9, #e9e9e9);
}

3. 斑马条纹：

tr:nth-child(even) {
  background-color: #f2f2f2;
}

4. 固定背景：

table {
  background-attachment: fixed;
}

5. 背景混合模式：

td {
  background-color: blue;
  background-blend-mode: screen;
}