CSS 表格 - 易学教程，面试笔记经验！

表格是一种 HTML 元素，用于以包含行和列的结构化格式显示数据。它是使用 HTML 中的 <table> 标记创建的，并且可以使用 CSS 属性设置样式。

本章讨论如何使用 CSS 设置 HTML 表格的不同属性。

让我们看一下下面的示例演示了一个简单的 HTML 表格:

<html>
<head>
<style>
</style>
   <table>
      <thead>
      <tr>
         <th>Header 1</th>
         <th>Header 2</th>
         <th>Header 3</th>
      </tr>
      </thead>
      <tbody>
      <tr>
         <td>Data 1</td>
         <td>Data 2</td>
         <td>Data 3</td>
         </tr>
      <tr>
         <td>Data 1</td>
         <td>Data 2</td>
         <td>Data 3</td>
      </tr>
   </tbody>
   </table>
</body>
</html>

上面示例中的表格是数据的简单显示，可以使用 CSS 进行样式设置。您可以设置表格的以下 CSS 属性 -

border-collapse 指定浏览器是否应控制彼此接触的相邻边框的外观，或者是否应控制每个单元格都应保持其样式。
border-spacing: 指定表格单元格之间应显示的宽度。
Caption-side 指定表格标题应显示的位置（顶部或底部）。
empty-cells 指定如果单元格为空，是否应显示边框。
empty-cells 指定是否应在单元格为空时显示边框。 p>
table-layout: 允许浏览器使用列的其余部分遇到的第一个宽度属性来加速表格的布局，而不必在渲染之前加载整个表格
width 和 height 属性设置表格的高度和宽度。
text-align 属性设置表格单元格内文本内容的水平对齐方式。
border 属性可用于设置表格及其单元格的边框。
background-color 属性可以应用于表格本身、表格单元格或表格行。
font-size, font-family, font-weight, font-color等属性设置表格字体的样式。

让我们通过以下部分的示例了解如何使用这些属性。

CSS 表格: 边框折叠

属性 border-collapse 确保表格单元格之间的边框折叠为单个边框，打造更干净的外观。属性 border-collapse 可以具有折叠或分离的值（默认）。

以下示例仅向单元格和表格主体添加边框 -

<html>
<head>
<style>
   table {
      border: 3px solid purple;
   }
   th, td {
      border: 1px solid black;
   }
</style>
<body>
   <table>
      <thead>
      <tr>
         <th>Header 1</th>
         <th>Header 2</th>
         <th>Header 3</th>
      </tr>
      </thead>
      <tbody>
      <tr>
         <td>Data 1</td>
         <td>Data 2</td>
         <td>Data 3</td>
         </tr>
      <tr>
         <td>Data 1</td>
         <td>Data 2</td>
         <td>Data 3</td>
      </tr>
   </tbody>
   </table>
</body>
</html>

现在让我们添加 border-collapse:collapse并查看这如何消除表格单元格之间的间距并导致边框重叠。

<html>
<head>
<style>
   table {
      border-collapse: collapse;
      border: 3px solid purple;
   }
   th, td {
      border: 1px solid black;
   }
</style>
<body>
   <table>
      <thead>
      <tr>
         <th>Header 1</th>
         <th>Header 2</th>
         <th>Header 3</th>
      </tr>
      </thead>
      <tbody>
      <tr>
         <td>Data 1</td>
         <td>Data 2</td>
         <td>Data 3</td>
         </tr>
      <tr>
         <td>Data 1</td>
         <td>Data 2</td>
         <td>Data 3</td>
      </tr>
   </tbody>
   </table>
</body>
</html>

CSS 表格: 边框间距

border-spacing 属性指定分隔表格中相邻单元格边框的距离。该属性可以指定为一个或两个值。:

border-spacing: 2px;:如果传递一个值，则间距将应用于两个值垂直和水平边框。
border-spacing: 1cm 2em;:如果传递两个值，第一个值定义单元格之间的水平间距（即，相邻列），第二个值定义单元格之间的垂直间距（即相邻行单元格之间的间距）。

现在让我们修改前面的示例并查看效果 -

<html>
<head>
<style>
   table {
      border-collapse: separate;
      border-spacing: 1em 0.5em;
      padding: 0 2em 1em 0;
      border: 3px solid purple;
   }
   td {
      width: 1.5em;
      height: 1.5em;
      background: #d2d2d2;
      text-align: center;
      vertical-align: middle;
   }
</style>
<body>
   <table>
      <thead>
      <tr>
         <th>Header 1</th>
         <th>Header 2</th>
         <th>Header 3</th>
      </tr>
      </thead>
      <tbody>
      <tr>
         <td>Data 1</td>
         <td>Data 2</td>
         <td>Data 3</td>
         </tr>
      <tr>
         <td>Data 1</td>
         <td>Data 2</td>
         <td>Data 3</td>
      </tr>
   </tbody>
   </table>
</body>
</html>

注意:border-spacing 属性仅在 border-collapse 设置为分离时才起作用。如果将 border-collapse 设置为折叠，则 border-spacing 属性将不起作用，并且边框将折叠成一行。

下面是一个示例来演示上述观点:

<html>
<head>
<style>
   table {
      border-collapse: collapse;
      border-spacing: 1em 0.5em;
      padding: 0 2em 1em 0;
      border: 3px solid purple;
   }
   td {
      width: 1.5em;
      height: 1.5em;
      background: #d2d2d2;
      text-align: center;
      vertical-align: middle;
   }
</style>
<body>
   <table>
      <thead>
      <tr>
         <th>Header 1</th>
         <th>Header 2</th>
         <th>Header 3</th>
      </tr>
      </thead>
      <tbody>
      <tr>
         <td>Data 1</td>
         <td>Data 2</td>
         <td>Data 3</td>
         </tr>
      <tr>
         <td>Data 1</td>
         <td>Data 2</td>
         <td>Data 3</td>
      </tr>
   </tbody>
   </table>
</body>
</html>

CSS 表格: caption-side

CSS 中的caption-side属性用于控制表格标题相对于表格的位置或对齐方式。

caption-side 属性可以具有以下值之一:

top:放置在表格上方的标题。
bottom:放置在表格下方的标题。
block-start:标题框位于表格的块起始边缘。
block-end:标题框位于表格的块结束边缘。
inline-start:标题框位于位于表格的内联起始边缘。
inline-end:标题框位于表格的内联结束边缘。
inherit:该值继承自父元素的caption-side属性。

让我们看一个例子:

<html>
<head>
<style>
   .top caption {
      caption-side: top;
   }
   .bottom caption {
      caption-side: bottom;
   }
   table {
      border: 1px solid red;
   }
   td {
      border: 1px solid blue;
   }
</style>
<body>
   <table class="top">
      <caption>
         Caption ABOVE the table
      </caption>
      <thead>
         <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td>Data 1</td>
            <td>Data 2</td>
            <td>Data 3</td>
            </tr>
      </tbody>
   </table>
   <br />
   <table class="bottom">
      <caption>
         Caption BELOW the table
      </caption>
      <thead>
         <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td>Data 1</td>
            <td>Data 2</td>
            <td>Data 3</td>
         </tr>
      </tbody>
   </table>
</body>
</html>

注意:caption-side 属性仅适用于其中包含 <caption> 元素的表。 <caption> 元素用于提供表的标题或描述。如果表格没有标题，则 title-side 属性不会产生任何效果。

CSS 表格: 空单元格

空单元格属性CSS 用于控制表格中没有内容或被视为"空"的单元格的呈现。它仅适用于表格和表格单元格。

此属性可以具有以下两个值之一:

show:表示为空单元格应显示有边框和间距，就好像它们包含内容一样。这是默认值。
hide:表示空单元格应该隐藏，并且不占用任何空间。空单元格的边框和间距将不会显示，有助于布局更加紧凑。

这里是 <table> 中用于隐藏空单元格边框的空单元格属性元素。

<html>
<head>
<style>
   table {
      width: 350px;
      border-collapse: separate;
      empty-cells: hide;
   }
   td,th {
      padding: 5px;
      border-style: solid;
      border-width: 1px;
      border-color: #999999;
   }
</style>
</head>
<body>
   <table>
      <thead>
         <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td>Data 1</td>
            <td>Data 2</td>
            <td></td>
         </tr>
      </tbody>
   </table>
</body>
</html>

在以下示例中，empty-cells:show 属性用于显示 <table> 元素中空单元格的边框。

<html>
<head>
<style>
   table {
      width: 350px;
      border-collapse: separate;
      empty-cells: show;
   }
   td,th {
      padding: 5px;
      border-style: solid;
      border-width: 1px;
      border-color: #999999;
   }
</style>
</head>
<body>
   <table>
      <thead>
         <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td>Data 1</td>
            <td>Data 2</td>
            <td></td>
         </tr>
      </tbody>
   </table>
</body>
</html>

CSS 表格: 表格布局

table-layout 属性应该帮助您控制浏览器应如何呈现或布局表格。

此属性可以具有以下值之一:

auto:当表格布局设置为auto时，浏览器将根据内容计算列和单元格的宽度。
fixed:当table-layout设置为fixed时，浏览器将根据表格的第一行为每一列分配固定的宽度。这意味着所有后续行将遵循相同的列宽，无论其内容如何。

注意:使用表布局:固定当您想要创建具有一致列宽的表格时，尤其是在处理大量数据或想要维护特定设计时，这可能很有用。

CSS 表格: 具有固定布局

以下示例显示 table-layout 的使用:已修复:

<html>
<head>
<style>
   table {
      width: 100%;
      border-collapse: collapse;
      table-layout: fixed; /* Using fixed layout */
   }

   th, td {
      border: 1px solid black;
      padding: 8px;
      text-align: center;
   }
</style>
</head>
<body>
   <table>
      <tr>
         <th>Header 1</th>
         <th>Header 2</th>
         <th>Header 3</th>
      </tr>
      <tr>
         <td>Row 1, Column 1</td>
         <td>Row 1, Column 2</td>
         <td>Row 1, Column 3</td>
      </tr>
      <tr>
         <td>Row 2, Column 1</td>
         <td>Row 2, Column 2</td>
         <td>Row 2, Column 3</td>
      </tr>
   </table>
</body>
</html>

CSS Table: 带自动布局

以下示例显示 table-layout 的使用: auto:

<html>
<head>
<style>
   table {
      width: 100%;
      border-collapse: collapse;
      table-layout: auto; /* Using auto layout */
   }
   th, td {
      border: 1px solid black;
      padding: 8px;
      text-align: center;
   }
</style>
</head>
<body>
   <table>
      <tr>
         <th>Header 1</th>
         <th>Header 2</th>
         <th>Header 3</th>
      </tr>
      <tr>
         <td>This is some longer content in Column 1</td>
         <td>Short content</td>
         <td>Even longer content that might wrap in Column 3</td>
      </tr>
      <tr>
         <td>Row 2, Column 1</td>
         <td>Row 2, Column 2</td>
         <td>Row 2, Column 3</td>
      </tr>
   </table>
</body>
</html>

CSS 表格: 高度和宽度

要设置表格的高度和宽度，请使用以下属性:

<html>
<head>
<style>
   #myTable {
      width: 500px; /* Set the width of the table */
      height: 300px; /* Set the height of the table */
      border-collapse: collapse;
   }

   #myTable th, #myTable td {
      border: 5px solid black;
   }
</style>
</head>
<body>
   <table id="myTable">
      <thead>
      <tr>
         <th>Header 1</th>
         <th>Header 2</th>
         <th>Header 3</th>
      </tr>
      </thead>
      <tbody>
      <tr>
         <td>Data 1</td>
         <td>Data 2</td>
         <td>Data 3</td>
         </tr>
        <tr>
           <td>Data 1</td>
           <td>Data 2</td>
           <td>Data 3</td>
        </tr>
     </tbody>
     </table>
  </body>
</html>

CSS 表格: 表格对齐

在 CSS 中，用于对齐表格的各种属性如下:

text-align

此属性设置表格的水平对齐方式表格单元格内的文本内容（<th> 或 <td>）。它可以采用以下值:

left
right
center
justify

注意:<th> 元素的内容默认情况下，是居中对齐，而 <td> 元素的元素是左对齐。

让我们看一个 text-align 的示例:center:

<html>
<head>
<style>
table, td, th {
   border: 2px solid black;
}
table {
   border-collapse: collapse;
   width: 50%;
}
td {
   text-align: center;
}
</style>
</head>
<body>
   <h2>Text-align Property</h2>
   <table>
      <tr>
         <th>Header 1</th>
         <th>Header 2</th>
         <th>Header 3</th>
         <th>Header 4</th>
      </tr>
      <tr>
         <td>Data 1</td>
         <td>Data 2</td>
         <td>Data 3</td>
         <td>Data 4</td>
      </tr>
      <tr>
         <td>Data 1</td>
         <td>Data 2</td>
         <td>Data 3</td>
         <td>Data 4</td>
      </tr>
      <tr>
         <td>Data 1</td>
         <td>Data 2</td>
         <td>Data 3</td>
         <td>Data 4</td>
      </tr>
   </table>
   </body>
</html>

同样，要使文本左对齐或右对齐，请分别使用属性 text-align: left 或 text-align: right。

值 text-align: justify 确保文本左对齐和右对齐每个单元格的两侧，创建干净且有组织的外观。

CSS 表格: 垂直对齐

属性vertical-align 设置 <th> 或 <td> 中内容的垂直对齐方式。

它可以采用以下值:

top
middle
bottom

注意:<th> 和 <td> 元素的内容垂直对齐方式为中间，默认情况下.

让我们看一个将垂直对齐设置为顶部的示例:

<html>
<head>
<style>
   table, td, th {
      border: 2px solid black;
   }
   table {
      border-collapse: collapse;
      width: 50%;
   }
   td {
      height: 50px;
      vertical-align: top;
   }
</style>
</head>
<body>
   <h2>Vertical-align 属性</h2>
   <table>
      <tr>
         <th>Header 1</th>
         <th>Header 2</th>
         <th>Header 3</th>
         <th>Header 4</th>
      </tr>
      <tr>
         <td>Data 1</td>
         <td>Data 2</td>
         <td>Data 3</td>
         <td>Data 4</td>
      </tr>
      <tr>
         <td>Data 1</td>
         <td>Data 2</td>
         <td>Data 3</td>
         <td>Data 4</td>
      </tr>
      <tr>
         <td>Data 1</td>
         <td>Data 2</td>
         <td>Data 3</td>
         <td>Data 4</td>
      </tr>
   </table>
</body>
</html>

CSS 表格: 边框

在 CSS 中，有可以应用于表格的几个边框属性:

border:该属性设置表格边框所有四个边的宽度、样式和颜色（例如，边框:1px 纯黑色；）。
border-collapse:此属性设置边框是否应折叠为单个边框或在单元格之间分开。
border-width:此属性设置边框的宽度（例如，border-width:thin|medium|thick|2px；）
border-style:该属性设置表格边框的样式（例如border-style:dotted|dashed|solid|double;）等。
border-color :该属性设置表格边框的颜色（例如，(border-color: red;) 或 (border-top-color: red;)）。
border-radius :该属性使表格边框的角变圆（例如，border-radius: 5px|50%）。

让我们看一个设置表格边框的示例:

<html>
<head>
<style>
   table {
      border-collapse: collapse;
      border-radius: 50%;
      border-style: inset;
      border-color: blue;
      width: 100%;
   }
   td {
      border: 2px dashed red;
      height: 50px;
      vertical-align: middle;
      text-align: center;
   }
</style>
</head>
<body>
   <h2>Border 属性</h2>
   <table>
      <tr>
         <th>Header 1</th>
         <th>Header 2</th>
         <th>Header 3</th>
         <th>Header 4</th>
      </tr>
      <tr>
         <td>Data 1</td>
         <td>Data 2</td>
         <td>Data 3</td>
         <td>Data 4</td>
      </tr>
      <tr>
         <td>Data 1</td>
         <td>Data 2</td>
         <td>Data 3</td>
         <td>Data 4</td>
      </tr>
      <tr>
         <td>Data 1</td>
         <td>Data 2</td>
         <td>Data 3</td>
         <td>Data 4</td>
      </tr>
   </table>
</body>
</html>

CSS 表格: 背景颜色

background-color 属性可以应用于表格本身、表格单元格或表格行。

为了设置背景颜色使用以下代码:

/* 设置表格的背景颜色 */
table {
  background-color: #f2f2f2;
}
/* To set the background color of a cell or a row */
td {
  background-color: #f2f2f2;
}
tr {
  background-color: #ffffff;
}

让我们看一个例子:

<html>
<head>
<style>
   table {
      border: 2px solid black;
      background-color: rgb(237, 181, 237);
      width: 100%;
      border-collapse: collapse;
   }
   td {
      height: 50px;
      vertical-align: middle;
      text-align: center;
   }
</style>
</head>
<body>
   <h2>背景颜色属性</h2>
   <table>
      <tr>
         <th>Header 1</th>
         <th>Header 2</th>
         <th>Header 3</th>
         <th>Header 4</th>
      </tr>
      <tr>
         <td>Data 1</td>
         <td>Data 2</td>
         <td>Data 3</td>
         <td>Data 4</td>
      </tr>
      <tr>
         <td>Data 1</td>
         <td>Data 2</td>
         <td>Data 3</td>
         <td>Data 4</td>
      </tr>
      <tr>
         <td>Data 1</td>
         <td>Data 2</td>
         <td>Data 3</td>
         <td>Data 4</td>
      </tr>
   </table>
</body>
</html>

CSS 表格: 字体样式

表格内容的字体可以使用 <th> 和 <td> 元素上的字体相关属性（例如 font-size、font-family、font-weight 等）设置样式。

<html>
<head>
<style>
   table.one {
      border-collapse: collapse;
      width: 400px;
   }
   th {
      font-size: large;
      font-family: 'Lucida Sans', sans-serif;
   }
   td {
      font-size: small;
      font-family: Verdana, Geneva, Tahoma, sans-serif;
   }
</style>
</head>
<body>
   <h2>font styles</h2>
   <div>
      <table class = "one" border = "1">
         <th>Heading</th>
         <tr>
         <td>Cell value</td>
         </tr>
         <tr>
         <td>Cell value</td>
         </tr>
      </table>
   </div>
</body>
</html>

CSS 表格: 其他样式

各种 CSS 属性可用于进一步设计表格设计。例如，您可以向表格添加填充、边距、分隔符等。

让我们看几个示例:

CSS 表格 - 填充

In为了向表格或其单元格添加填充，请使用属性 padding。请参阅下面的示例:

<html>
<head>
<style>
   table {
      border: 2px solid black;
      background-color: rgb(175, 239, 194);
      border-collapse: collapse;
   }
   td,th {
      border: 2px solid black;
      padding: 30px;
      vertical-align: middle;
      height: 50px;
   }
</style>
</head>
<body>
   <h2>Padding 属性</h2>
   <table>
      <tr>
         <th>Header 1</th>
         <th>Header 2</th>
         <th>Header 3</th>
         <th>Header 4</th>
      </tr>
      <tr>
         <td>Data 1</td>
         <td>Data 2</td>
         <td>Data 3</td>
         <td>Data 4</td>
      </tr>
      <tr>
         <td>Data 1</td>
         <td>Data 2</td>
         <td>Data 3</td>
         <td>Data 4</td>
      </tr>
   </table>
</body>
</html>

CSS 表格: 边距

为了添加表格或其单元格的边距，请使用属性 margin。请参考以下示例:

<html>
<head>
<style>
   table {
      border: 2px solid black;
      background-color: rgba(237, 181, 237);
      border-collapse: collapse;
      margin-top: 50px;
   }
   td,th {
      border: 2px solid black;
      vertical-align: middle;
      height: 50px;
   }
</style>
</head>
<body>
   <h2>Margin 属性</h2>
   <table>
      <tr>
         <th>Header 1</th>
         <th>Header 2</th>
         <th>Header 3</th>
         <th>Header 4</th>
      </tr>
      <tr>
         <td>Data 1</td>
         <td>Data 2</td>
         <td>Data 3</td>
         <td>Data 4</td>
      </tr>
      <tr>
         <td>Data 1</td>
         <td>Data 2</td>
         <td>Data 3</td>
         <td>Data 4</td>
      </tr>
      <tr>
         <td>Data 1</td>
         <td>Data 2</td>
         <td>Data 3</td>
         <td>Data 4</td>
      </tr>
   </table>
</body>
</html>

CSS 表格 - 表格分隔线（垂直/水平）

为了添加垂直或水平分隔线，您可以将属性 border-right 或 border-bottom 添加到 <th>和 <th> 元素。

让我们看一个示例:

<html>
<head>
<style>
   table {
      border: 2px solid black;
      background-color: rgb(175, 239, 194);
      border-collapse: collapse;
      margin-top: 50px;
   }
   th {
      border-bottom: 2px solid black;
   }
   td{
      border-right: 2px solid black;
      vertical-align: middle;
      height: 50px;
   }
</style>
</head>
<body>
   <h2>horizontal & vertical divider</h2>
   <table>
      <tr>
         <th>Header 1</th>
         <th>Header 2</th>
         <th>Header 3</th>
         <th>Header 4</th>
      </tr>
      <tr>
         <td>Data 1</td>
         <td>Data 2</td>
         <td>Data 3</td>
         <td>Data 4</td>
      </tr>
      <tr>
         <td>Data 1</td>
         <td>Data 2</td>
         <td>Data 3</td>
         <td>Data 4</td>
      </tr>
   </table>
</body>
</html>

CSS 表格: 条纹表格

为了使表格看起来条纹，其中替代行是彩色，您可以使用 nth-child() 选择器并向表格的所有奇数/偶数行添加背景颜色。

让我们看一个示例:

<html>
<head>
<style>
   table {
      border-collapse: collapse;
      width: 100%;
   }

   th, td {
      text-align: left;
      padding: 8px;
   }

   tr:nth-child(odd) {background-color: rgb(230,125,111);}
</style>
</head>
<body>
   <h2>Striped table</h2>
   <table>
      <tr>
         <th>Header 1</th>
         <th>Header 2</th>
         <th>Header 3</th>
         <th>Header 4</th>
      </tr>
      <tr>
         <td>Data 1</td>
         <td>Data 2</td>
         <td>Data 3</td>
         <td>Data 4</td>
      </tr>
      <tr>
         <td>Data 1</td>
         <td>Data 2</td>
         <td>Data 3</td>
         <td>Data 4</td>
      </tr>
      <tr>
         <td>Data 1</td>
         <td>Data 2</td>
         <td>Data 3</td>
         <td>Data 4</td>
      </tr>
      <tr>
         <td>Data 1</td>
         <td>Data 2</td>
         <td>Data 3</td>
         <td>Data 4</td>
      </tr>
   </table>
</body>
</html>

CSS表格-响应式表格

响应式表格是指根据不同的屏幕尺寸和分辨率来调整和适应其布局和格式的表格。它确保表格在各种设备上易于阅读和访问。

CSS 提供了一些功能，通过这些功能我们可以使表格具有响应性。当屏幕小且看不到完整内容时，您可以使用属性overflow-x:auto向表格添加水平滚动条。

注意:您需要添加一个容器元素，例如 <div>，并在 <table> 元素周围添加属性 Overflow-x: auto，以使表格具有响应能力。

让我们看一个示例:

注意:请调整屏幕大小以查看表格的响应能力。

<html>
<head>
<style>
   table {
      border-collapse: collapse;
      width: 100%;
   }
   th, td {
      text-align: left;
      padding: 8px;
   }
   tr:nth-child(odd) {background-color: rgb(230,125,111);}
</style>
</head>
<body>
   <h2>Responsive table</h2>
   <div style="overflow-x: auto;">
      <table>
      <tr>
         <th>Header</th>
         <th>Header</th>
         <th>Header</th>
         <th>Header</th>
         <th>Header</th>
         <th>Header</th>
         <th>Header</th>
         <th>Header</th>
      </tr>
      <tr>
         <td>Data 1</td>
         <td>Data 2</td>
         <td>Data 3</td>
         <td>Data 4</td>
         <td>Data 5</td>
         <td>Data 6</td>
         <td>Data 7</td>
         <td>Data 8</td>
      </tr>
      <tr>
         <td>Data 1</td>
         <td>Data 2</td>
         <td>Data 3</td>
         <td>Data 4</td>
         <td>Data 5</td>
         <td>Data 6</td>
         <td>Data 7</td>
         <td>Data 8</td>
      </tr>
      <tr>
         <td>Data 1</td>
         <td>Data 2</td>
         <td>Data 3</td>
         <td>Data 4</td>
         <td>Data 5</td>
         <td>Data 6</td>
         <td>Data 7</td>
         <td>Data 8</td>
      </tr>
      <tr>
         <td>Data 1</td>
         <td>Data 2</td>
         <td>Data 3</td>
         <td>Data 4</td>
         <td>Data 5</td>
         <td>Data 6</td>
         <td>Data 7</td>
         <td>Data 8</td>
      </tr>
      </table>
   </div>
</body>
</html>

CSS 表格: 相关属性

以下是样式表的 CSS 属性列表:

属性	描述
border-collapse	设置表格边框渲染算法。
border-spacing	使用单独的边框设置边框之间的间距。一个值设置垂直和水平间距，两个值分别设置水平和垂直间距。
caption-side	设置表格标题的位置。
empty-cell	具有单独的边框，隐藏表格中的空单元格。
table-layout	确定表格渲染算法。

CSS 表格 table

CSS 表格: 边框折叠

CSS 表格: 边框间距

CSS 表格: caption-side

CSS 表格: 空单元格

CSS 表格: 表格布局

CSS 表格: 具有固定布局

CSS Table: 带自动布局

CSS 表格: 高度和宽度

CSS 表格: 表格对齐

text-align

CSS 表格: 垂直对齐

CSS 表格: 边框

CSS 表格: 背景颜色

CSS 表格: 字体样式

CSS 表格: 其他样式

CSS 表格 - 填充

CSS 表格: 边距

CSS 表格 - 表格分隔线（垂直/水平）

CSS 表格: 条纹表格

CSS表格-响应式表格

CSS 表格: 相关属性