css中tr是什么意思？

1. 概述

在 CSS 中，tr 表示 table row，也就是表格中的一行。

在 HTML 中，tr 通常和 table、thead、tbody、tfoot、th、td 这些标签一起使用，用来创建表格。

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>30</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>25</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">Footer</td>
    </tr>
  </tfoot>
</table>

1.1 table

table 表示一个表格，其中可以包含多个 tr。

table 标签有一些属性，包括：

border: 表示表格边框的宽度，默认为 0，如果要显示边框，可以设置大于 0 的值。

cellpadding: 表示单元格内容和单元格边框之间的空白，默认为 1。

cellspacing: 表示单元格之间的空白，默认为 2。

<table border="1" cellspacing="0" cellpadding="4">
  <!-- 表格内容 -->
</table>

1.2 thead、tbody 和 tfoot

thead: 表示表格的头部，通常包含表头，只能包含 tr。

tbody: 表示表格的主体部分，通常包含真正的表格数据，只能包含 tr。

tfoot: 表示表格的尾部，通常包含表格的摘要或注释，只能包含 tr。

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>30</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>25</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">Footer</td>
    </tr>
  </tfoot>
</table>

1.3 th 和 td

th 和 td 用于表示单元格，th 通常用于表头，td 通常用于数据部分。

th 和 td 标签也有许多属性，包括：

colspan: 表示单元格占据的列数。

rowspan: 表示单元格占据的行数。

<table>
  <thead>
    <tr>
      <th rowspan="2">Name</th>
      <th colspan="2">Contact</th>
    </tr>
    <tr>
      <th>Email</th>
      <th>Phone</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>john@example.com</td>
      <td>123456789</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>jane@example.com</td>
      <td>987654321</td>
    </tr>
  </tbody>
</table>

2. 样式化 tr

我们可以通过 CSS 来样式化 tr，比如设置背景颜色、字体颜色、字体大小等。

首先，我们可以通过 table 设置表格宽度、边框样式等。

table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #ddd;
}

然后，我们可以给 tr 设置背景颜色、字体颜色、字体大小等。

tr {
  background-color: #f5f5f5;
  color: #333;
  font-size: 14px;
}

2.1 鼠标悬停效果

我们可以通过 CSS 实现鼠标悬停效果，当鼠标移入 tr 时，背景色或字体颜色变化。

tr:hover {
  background-color: #ddd;
  color: #fff;
}

2.2 第一行样式

我们可以给表格中的第一行单独设置样式。

tr:first-child {
  background-color: #f0f0f0;
  font-weight: bold;
}

2.3 奇偶行样式

我们也可以给表格的奇数行和偶数行设置不同的样式。

tr:nth-child(odd) {
  background-color: #f9f9f9;
}
tr:nth-child(even) {
  background-color: #fff;
}

3. 总结

tr 表示表格中的一行，通常和 table、thead、tbody、tfoot、th、td 等标签一起使用，用来创建表格。

我们可以通过 CSS 设置 tr 的样式，比如背景颜色、字体颜色、字体大小等，还可以实现鼠标悬停效果、给第一行设置样式、给奇偶行设置不同的样式等。