• 主页

  • 投资

  • IT

    🔥

  • 设计

  • 销售

  • 人

  • 共240篇

    前端 - HTML5

关闭

返回栏目

关闭

返回前端 - HTML5栏目

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

作者：

贺及楼

成为作者

更新日期：2025-02-27 12:03:22

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

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

基本的 <tr> 标签

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Basic Table</title>
  8. </head>
  10. <body>
  11.     <table border="1">
  12.         <tr>
  13.             <th>姓名</th>
  14.             <th>年龄</th>
  15.             <th>职业</th>
  16.         </tr>
  17.         <tr>
  18.             <td>张三</td>
  19.             <td>25</td>
  20.             <td>程序员</td>
  21.         </tr>
  22.         <tr>
  23.             <td>李四</td>
  24.             <td>30</td>
  25.             <td>设计师</td>
  26.         </tr>
  27.     </table>
  28. </body>
  30. </html>

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

调整 <tr> 行的样式

1. 背景颜色

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Table with Row Background Color</title>
  8.     <style>
  9.         table {
  10.             border-collapse: collapse;
  11.         }
  13.         tr {
  14.             background-color: #f2f2f2;
  15.         }
  17.         tr:nth-child(even) {
  18.             background-color: #e0e0e0;
  19.         }
  20.     </style>
  21. </head>
  23. <body>
  24.     <table border="1">
  25.         <tr>
  26.             <th>姓名</th>
  27.             <th>年龄</th>
  28.             <th>职业</th>
  29.         </tr>
  30.         <tr>
  31.             <td>张三</td>
  32.             <td>25</td>
  33.             <td>程序员</td>
  34.         </tr>
  35.         <tr>
  36.             <td>李四</td>
  37.             <td>30</td>
  38.             <td>设计师</td>
  39.         </tr>
  40.     </table>
  41. </body>
  43. </html>

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

2. 文字颜色和字体样式

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Table with Text Style</title>
  8.     <style>
  9.         table {
  10.             border-collapse: collapse;
  11.         }
  13.         tr {
  14.             color: #333;
  15.             font-size: 16px;
  16.             font-family: Arial, sans-serif;
  17.         }
  18.     </style>
  19. </head>
  21. <body>
  22.     <table border="1">
  23.         <tr>
  24.             <th>姓名</th>
  25.             <th>年龄</th>
  26.             <th>职业</th>
  27.         </tr>
  28.         <tr>
  29.             <td>张三</td>
  30.             <td>25</td>
  31.             <td>程序员</td>
  32.         </tr>
  33.         <tr>
  34.             <td>李四</td>
  35.             <td>30</td>
  36.             <td>设计师</td>
  37.         </tr>
  38.     </table>
  39. </body>
  41. </html>

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

3. 行高

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Table with Row Height</title>
  8.     <style>
  9.         table {
  10.             border-collapse: collapse;
  11.         }
  13.         tr {
  14.             height: 40px;
  15.             line-height: 40px;
  16.         }
  17.     </style>
  18. </head>
  20. <body>
  21.     <table border="1">
  22.         <tr>
  23.             <th>姓名</th>
  24.             <th>年龄</th>
  25.             <th>职业</th>
  26.         </tr>
  27.         <tr>
  28.             <td>张三</td>
  29.             <td>25</td>
  30.             <td>程序员</td>
  31.         </tr>
  32.         <tr>
  33.             <td>李四</td>
  34.             <td>30</td>
  35.             <td>设计师</td>
  36.         </tr>
  37.     </table>
  38. </body>
  40. </html>

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

4. 鼠标悬停效果

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Table with Hover Effect</title>
  8.     <style>
  9.         table {
  10.             border-collapse: collapse;
  11.         }
  13.         tr {
  14.             background-color: #f2f2f2;
  15.         }
  17.         tr:hover {
  18.             background-color: #d3d3d3;
  19.         }
  20.     </style>
  21. </head>
  23. <body>
  24.     <table border="1">
  25.         <tr>
  26.             <th>姓名</th>
  27.             <th>年龄</th>
  28.             <th>职业</th>
  29.         </tr>
  30.         <tr>
  31.             <td>张三</td>
  32.             <td>25</td>
  33.             <td>程序员</td>
  34.         </tr>
  35.         <tr>
  36.             <td>李四</td>
  37.             <td>30</td>
  38.             <td>设计师</td>
  39.         </tr>
  40.     </table>
  41. </body>
  43. </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> 标签行的样式调整，可以让表格更加美观、易读，提升用户体验。希望本文的内容对你有所帮助！