表格元素 - tr标签 - 行的样式调整

表格元素 - tr 标签 - 行的样式调整

在 HTML5 中，表格是一种非常实用的元素，用于展示结构化的数据。<tr> 标签作为表格的重要组成部分，代表表格中的一行。合理地调整 <tr> 行的样式，能够让表格更加美观、易读，提升用户体验。本文将详细介绍如何使用 HTML 和 CSS 对 <tr> 标签所代表的行进行样式调整，并通过具体的示例代码进行演示。

基本的 `<tr>` 标签

在 HTML 中，<tr> 标签用于定义表格中的一行，它通常包含一个或多个 <td>（表格单元格）或 <th>（表头单元格）标签。以下是一个简单的表格示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Basic Table</title>
</head>
<body>
    <table border="1">
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>职业</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>25</td>
            <td>程序员</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>30</td>
            <td>设计师</td>
        </tr>
    </table>
</body>
</html>

在这个示例中，第一个 <tr> 包含 <th> 标签，用于定义表头行，后面的两个 <tr> 包含 <td> 标签，用于定义数据行。

调整 `<tr>` 行的样式

1. 背景颜色

可以使用 CSS 的 background-color 属性来改变 <tr> 行的背景颜色。以下是一个示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Table with Row Background Color</title>
    <style>
        table {
            border-collapse: collapse;
        }
        tr {
            background-color: #f2f2f2;
        }
        tr:nth-child(even) {
            background-color: #e0e0e0;
        }
    </style>
</head>
<body>
    <table border="1">
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>职业</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>25</td>
            <td>程序员</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>30</td>
            <td>设计师</td>
        </tr>
    </table>
</body>
</html>

在这个示例中，所有的 <tr> 行默认背景颜色为 #f2f2f2，使用 tr:nth-child(even) 选择器将偶数行的背景颜色设置为 #e0e0e0，这样可以使表格更具层次感，便于用户区分不同的行。

2. 文字颜色和字体样式

可以使用 color、font-size、font-family 等 CSS 属性来调整 <tr> 行中文字的颜色和字体样式。以下是一个示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Table with Text Style</title>
    <style>
        table {
            border-collapse: collapse;
        }
        tr {
            color: #333;
            font-size: 16px;
            font-family: Arial, sans-serif;
        }
    </style>
</head>
<body>
    <table border="1">
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>职业</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>25</td>
            <td>程序员</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>30</td>
            <td>设计师</td>
        </tr>
    </table>
</body>
</html>

在这个示例中，所有 <tr> 行中的文字颜色为 #333，字体大小为 16px，字体族为 Arial 或无衬线字体。

3. 行高

可以使用 height 或 line-height 属性来调整 <tr> 行的高度。以下是一个示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Table with Row Height</title>
    <style>
        table {
            border-collapse: collapse;
        }
        tr {
            height: 40px;
            line-height: 40px;
        }
    </style>
</head>
<body>
    <table border="1">
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>职业</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>25</td>
            <td>程序员</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>30</td>
            <td>设计师</td>
        </tr>
    </table>
</body>
</html>

在这个示例中，所有 <tr> 行的高度和行高都设置为 40px，这样可以使表格的行更加整齐。

4. 鼠标悬停效果

可以使用 CSS 的 :hover 伪类来为 <tr> 行添加鼠标悬停效果。以下是一个示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Table with Hover Effect</title>
    <style>
        table {
            border-collapse: collapse;
        }
        tr {
            background-color: #f2f2f2;
        }
        tr:hover {
            background-color: #d3d3d3;
        }
    </style>
</head>
<body>
    <table border="1">
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>职业</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>25</td>
            <td>程序员</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>30</td>
            <td>设计师</td>
        </tr>
    </table>
</body>
</html>

在这个示例中，当鼠标悬停在 <tr> 行上时，该行的背景颜色会变为 #d3d3d3，这样可以提高用户与表格的交互性。

总结

样式调整	CSS 属性	示例值	说明
背景颜色	`background-color`	`#f2f2f2`	改变 `<tr>` 行的背景颜色
文字颜色	`color`	`#333`	改变 `<tr>` 行中文字的颜色
字体大小	`font-size`	`16px`	改变 `<tr>` 行中文字的大小
字体族	`font-family`	`Arial, sans-serif`	改变 `<tr>` 行中文字的字体
行高	`height` 或 `line-height`	`40px`	调整 `<tr>` 行的高度
鼠标悬停效果	`:hover`	`background-color: #d3d3d3`	为 `<tr>` 行添加鼠标悬停效果

通过对 <tr> 标签行的样式调整，可以让表格更加美观、易读，提升用户体验。希望本文的内容对你有所帮助！

表格元素 - tr标签 - 行的样式调整