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