• 主页

  • 投资

  • IT

    🔥

  • 设计

  • 销售

  • 人

  • 共240篇

    前端 - HTML5

关闭

返回栏目

关闭

返回前端 - HTML5栏目

61 - 表格元素 - table标签 - 表格的边框设置

作者：

贺及楼

成为作者

更新日期：2025-02-27 12:02:17

表格元素 - table 标签 - 表格的边框设置

在前端开发中，表格是一种常用的元素，用于展示结构化的数据。HTML5 中的 <table> 标签是创建表格的基础，而表格的边框设置则能让表格更加清晰易读。本文将详细介绍如何使用 HTML 和 CSS 来设置表格的边框。

基本的表格结构

在开始设置边框之前，我们先来了解一下基本的表格结构。一个简单的 HTML 表格由 <table>、<tr>、<th> 和 <td> 标签组成。其中，<table> 标签定义表格，<tr> 标签定义表格的行，<th> 标签定义表格的表头单元格，<td> 标签定义表格的数据单元格。

  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>
  12.         <tr>
  13.             <th>Name</th>
  14.             <th>Age</th>
  15.         </tr>
  16.         <tr>
  17.             <td>John</td>
  18.             <td>25</td>
  19.         </tr>
  20.         <tr>
  21.             <td>Jane</td>
  22.             <td>30</td>
  23.         </tr>
  24.     </table>
  25. </body>
  27. </html>

在上述代码中，我们创建了一个简单的表格，包含表头和两行数据。但是，此时表格没有边框，看起来不够清晰。接下来，我们将介绍如何为表格添加边框。

使用 HTML 属性设置边框

在 HTML 中，我们可以使用 border 属性为表格添加边框。这个属性可以直接添加到 <table> 标签上。

  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 Border</title>
  8. </head>
  10. <body>
  11.     <table border="1">
  12.         <tr>
  13.             <th>Name</th>
  14.             <th>Age</th>
  15.         </tr>
  16.         <tr>
  17.             <td>John</td>
  18.             <td>25</td>
  19.         </tr>
  20.         <tr>
  21.             <td>Jane</td>
  22.             <td>30</td>
  23.         </tr>
  24.     </table>
  25. </body>
  27. </html>

在上述代码中，我们为 <table> 标签添加了 border="1" 属性，这样表格就会有一个宽度为 1 像素的边框。不过，这种方法已经逐渐被淘汰，因为它不符合 HTML 和 CSS 分离的原则，而且样式的控制不够灵活。

使用 CSS 设置边框

为整个表格添加边框

使用 CSS 可以更灵活地控制表格的边框。我们可以使用 border 属性为整个表格添加边框。

  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 CSS Border</title>
  8.     <style>
  9.         table {
  10.             border: 1px solid black;
  11.         }
  12.     </style>
  13. </head>
  15. <body>
  16.     <table>
  17.         <tr>
  18.             <th>Name</th>
  19.             <th>Age</th>
  20.         </tr>
  21.         <tr>
  22.             <td>John</td>
  23.             <td>25</td>
  24.         </tr>
  25.         <tr>
  26.             <td>Jane</td>
  27.             <td>30</td>
  28.         </tr>
  29.     </table>
  30. </body>
  32. </html>

在上述代码中，我们使用 CSS 的 border 属性为表格添加了一个 1 像素宽的黑色边框。这样，表格的外边框就会显示出来。

为单元格添加边框

除了为整个表格添加边框，我们还可以为每个单元格添加边框。

  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 Cell Borders</title>
  8.     <style>
  9.         table,
  10.         th,
  11.         td {
  12.             border: 1px solid black;
  13.         }
  14.     </style>
  15. </head>
  17. <body>
  18.     <table>
  19.         <tr>
  20.             <th>Name</th>
  21.             <th>Age</th>
  22.         </tr>
  23.         <tr>
  24.             <td>John</td>
  25.             <td>25</td>
  26.         </tr>
  27.         <tr>
  28.             <td>Jane</td>
  29.             <td>30</td>
  30.         </tr>
  31.     </table>
  32. </body>
  34. </html>

在上述代码中，我们使用 table, th, td 选择器为表格、表头单元格和数据单元格都添加了 1 像素宽的黑色边框。但是，这样会出现一个问题，相邻单元格的边框会重叠，看起来不太美观。

合并相邻单元格的边框

为了解决相邻单元格边框重叠的问题，我们可以使用 border-collapse 属性。

  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 Collapsed Borders</title>
  8.     <style>
  9.         table {
  10.             border-collapse: collapse;
  11.         }
  13.         table,
  14.         th,
  15.         td {
  16.             border: 1px solid black;
  17.         }
  18.     </style>
  19. </head>
  21. <body>
  22.     <table>
  23.         <tr>
  24.             <th>Name</th>
  25.             <th>Age</th>
  26.         </tr>
  27.         <tr>
  28.             <td>John</td>
  29.             <td>25</td>
  30.         </tr>
  31.         <tr>
  32.             <td>Jane</td>
  33.             <td>30</td>
  34.         </tr>
  35.     </table>
  36. </body>
  38. </html>

在上述代码中，我们为 <table> 标签添加了 border-collapse: collapse; 属性，这样相邻单元格的边框就会合并成一个，表格看起来更加整洁。

总结

方法 优点 缺点
HTML border 属性 简单直接 不符合 HTML 和 CSS 分离原则，样式控制不灵活
CSS border 属性 灵活控制边框样式 需要一定的 CSS 知识
CSS border-collapse 属性 解决相邻单元格边框重叠问题 依赖 CSS 支持

通过以上介绍，我们了解了如何使用 HTML 和 CSS 来设置表格的边框。在实际开发中，建议使用 CSS 来控制表格的边框，这样可以使代码更加清晰、易于维护。