HTML表格背景颜色|极客笔记

HTML表格背景颜色

HTML表格是网页设计中常用的元素之一，可以用来展示数据、排列信息等。通过设置表格的背景颜色，可以使表格更具有吸引力和可读性。本文将详细介绍如何在HTML中设置表格的背景颜色，包括单元格背景色、行背景色和整个表格的背景色。

设置单元格背景色

设置HTML表格单元格的背景色可以通过background-color属性来实现。该属性可以在<td>或<th>标签中使用，具体示例代码如下所示：

<table>
  <tr>
    <td style="background-color: red;">how2html.com</td>
    <td style="background-color: green;">how2html.com</td>
  </tr>
</table>

在上面的示例代码中，我们给第一个单元格设置了红色的背景色，给第二个单元格设置了绿色的背景色。

设置行背景色

如果想要设置整行的背景色，可以通过在<tr>标签中添加style属性来实现。具体示例代码如下所示：

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table>
  <tr style="background-color: yellow;">
    <td>how2html.com</td>
    <td>how2html.com</td>
  </tr>
  <tr style="background-color: blue;">
    <td>how2html.com</td>
    <td>how2html.com</td>
  </tr>
</table>
</body>
</html>

Output:

HTML表格背景颜色

在上面的示例代码中，我们给第一行设置了黄色的背景色，给第二行设置了蓝色的背景色。

设置整个表格的背景色

如果想要设置整个表格的背景色，可以通过在<table>标签中添加style属性来实现。具体示例代码如下所示：

<table style="background-color: pink;">
  <tr>
    <td>how2html.com</td>
    <td>how2html.com</td>
  </tr>
  <tr>
    <td>how2html.com</td>
    <td>how2html.com</td>
  </tr>
</table>

在上面的示例代码中，我们给整个表格设置了粉色的背景色。

其他背景色设置方式

除了直接在HTML标签中添加style属性设置背景色之外，还可以通过CSS样式表来设置表格的背景色。具体示例代码如下所示：

<style>
  table {
    background-color: lightgray;
  }
  td {
    background-color: lightblue;
  }
</style>

<table>
  <tr>
    <td>how2html.com</td>
    <td>how2html.com</td>
  </tr>
  <tr>
    <td>how2html.com</td>
    <td>how2html.com</td>
  </tr>
</table>

在上面的示例代码中，我们通过内部CSS样式表来设置表格和单元格的背景色。