CSS 表格

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

使用CSS样式表格

下面是一个使用CSS样式设置的简单HTML表格：

<html>
<head>
<style>
   table {
     font-family: Arial, Helvetica, sans-serif;
     border-collapse: collapse; width: 100%;
   }
   td, th {
     border: 1px solid #ddd; padding: 8px;
   }
   tr:nth-child(even){background-color: #f2f2f2;}
   tr:hover {background-color: #ddd;}
   th {
     padding-top: 12px; padding-bottom: 12px;
     text-align: left; background-color: #40a944; color: white;
   }
</style>
</head>
<body>
   <h1>CSS Styled Table</h1>
   <table>
     <tr>
       <th>Name</th>
       <th>Address</th>
       <th>Country</th>
     </tr>
     <tr>
       <td>Nuha Ali</td>
       <td>My Home Bhooja</td>
       <td>India</td>
     </tr>
     <tr>
       <td>Zara Ali</td>
       <td>Students Roosters</td>
       <td>England</td>
     </tr>
     <tr>
       <td>Mahira</td>
       <td>Orland Park</td>
       <td>Chicago</td>
     </tr>

   </table>
</body>
</html>

表的CSS属性

您可以设置表的以下CSS属性：

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

使用CSS折叠表格边框

属性 border-collapse 确保表格单元格之间的边框折叠成一个单一的边框，从而创造出更清晰的外观。属性 border-collapse 可以具有值 collapse 或 separate（默认） 。

示例

以下示例显示了如何使用 border-collapse 属性将边框合并以消除表格单元格之间的间距。

<html>
<head>
<style>
   table {
      border-collapse: collapse;
      border: 3px solid;
      width: 100%; padding:5px;
   }
   th, td {
      border: 1px solid black;
   }
</style>
<body>
   <table>
     <tr>
       <th>Name</th>
       <th>Address</th>
       <th>Country</th>
     </tr>
     <tr>
       <td>Nuha Ali</td>
       <td>My Home Bhooja</td>
       <td>India</td>
     </tr>
     <tr>
       <td>Zara Ali</td>
       <td>Students Roosters</td>
       <td>England</td>
     </tr>
     <tr>
       <td>Mahira</td>
       <td>Orland Park</td>
       <td>Chicago</td>
     </tr>
   </table>
</body>
</html>

设置表格边距

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

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

示例

现在让我们修改之前的例子，看看有什么不同 –

<html>
<head>
<style>
   table {
      border-collapse: separate; border-spacing: 1em; width: 100%;
      padding: 5px; border: 3px solid #40a944;
   }
   td {
      width: 1.5em; height: 1.5em; background: #d2d2d2;
      text-align: center; vertical-align: middle;
   }
</style>
<body>
   <table>
     <tr>
       <th>Name</th>
       <th>Address</th>
       <th>Country</th>
     </tr>
     <tr>
       <td>Nuha Ali</td>
       <td>My Home Bhooja</td>
       <td>India</td>
     </tr>
     <tr>
       <td>Zara Ali</td>
       <td>Students Roosters</td>
       <td>England</td>
     </tr>
     <tr>
       <td>Mahira</td>
       <td>Orland Park</td>
       <td>Chicago</td>
     </tr>
   </table>
</body>
</html>

border-spacing 属性仅在将 border-collapse 设置为 separate 时起作用。如果将 border-collapse 设置为 collapse ，则 border-spacing 属性将无效，并且边框将坍塌成一条线。

使用CSS设置表格标题

CSS中的 caption-side 属性用于控制表格标题与表格之间的位置或对齐方式。可以为 caption-side 属性指定以下值之一：

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

示例

让我们来看一个示例：

<html>
<head>
<style>
   table {
      border-collapse: separate; border-spacing: 1em; width: 100%;
      padding: 5px; border: 3px solid #40a944;
   }
   .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>元素用于为表格提供标题或描述。如果表格没有标题， caption-side 属性将不起作用。

在表格中隐藏空单元格

CSS中的 empty-cells 属性用于控制表格中没有内容或被认为是“空”的单元格的渲染。它仅适用于表格和表格单元格。

这个属性可以有以下两个值之一：

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

示例

这里是在<table>元素中使用 empty-cells 属性来隐藏空单元格的边框。

<html>
<head>
<style>
   table {
      width: 100%;
      border:1px solid #aaa;
      border-collapse: separate;
      empty-cells: hide;
   }
   td,th {
      padding: 5px;
      border: 1px solid #aaa;
   }
</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: 100%;
      border:1px solid #aaa;
      border-collapse: separate;
      empty-cells: show;
   }
   td,th {
      padding: 5px;
      border: 1px solid #aaa;
   }
</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 ：当table-layout设置为auto时，浏览器将根据内容计算列和单元格的宽度。
fixed ：当table-layout设置为fixed时，浏览器将根据表格的第一行为每列分配固定宽度。这意味着所有后续行将遵循相同的列宽度，而不管其内容如何。

使用table-layout: fixed可以在创建具有一致列宽的表格时非常有用，尤其是处理大量数据或者希望保持特定设计的情况下。

示例

以下示例演示了使用table-layout: fixed：

<html>
<head>
<style>
   table {
      width: 100%;
      border:1px solid #aaa;
      border-collapse: collapse;
      table-layout: fixed;
   }

   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>

下面的例子展示了使用 table-layout: auto ：

<html>
<head>
<style>
   table {
      width: 100%;
      border:1px solid #aaa;
      border-collapse: collapse;
      table-layout: auto;
   }
   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提供了 height 和 width 属性，分别用于设置表格的高度和宽度。

示例

<html>
<head>
<style>
   table {
      width: 600px; 
      height: 200px;
      border-collapse: collapse;
      border: 1px solid #aaa;
   }

   th, td {
      border: 1px solid #aaa;
   }
</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>Data 3</td>
         </tr>
        <tr>
           <td>Data 1</td>
           <td>Data 2</td>
           <td>Data 3</td>
        </tr>
     </tbody>
   </table>
</body>
</html>

设置表格文本对齐方式

text-align属性设置表格单元格（<th>或<td>）中文本内容的水平对齐方式。它可以取以下值：

left
right
center
justify

<th>元素的内容默认是居中对齐，而<td>元素的内容默认是左对齐。

示例

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

<html>
<head>
<style>
table, td, th {
   border: 1px solid black;
}
table {
   border-collapse: collapse;
   width: 100%;
}
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 确保文本在每个单元格的左右两侧对齐，创建一个清晰有序的外观。

设置表格垂直对齐

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

它可以取以下值：

top
middle
bottom

<th>和<td>元素的内容默认垂直对齐方式为 middle 。

示例

让我们看一个将垂直对齐设置为 top 的例子：

<html>
<head>
<style>
   table, td, th {
      border: 2px solid black;
   }
   table {
      border-collapse: collapse;
      width: 100%;
   }
   td {
      height: 50px;
      vertical-align: middle;
   }
</style>
</head>
<body>
   <h2>Vertical-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>

CSS表格背景颜色

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

要设置背景颜色，请使用以下代码：

table {
  background-color: #f2f2f2;
}
td {
  background-color: #f2f2f2;
}
tr {
  background-color: #ffffff;
}

示例

让我们看一个例子：

<html>
<head>
<style>
   table {
      background-color: rgb(237, 181, 237);
      border: 2px solid black;
      border-collapse: collapse;
      width: 100%;
   }
   td {
      height: 50px;
      vertical-align: middle;
      text-align: center;
   }
</style>
</head>
<body>
   <h2>Background color 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>

CSS表格字体样式

可以使用与字体相关的属性样式化表格内容的字体，如 font-size，font-family，font-weight 等，在 <th> 和 <td> 元素上。

示例

让我们看下面的例子：

<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属性进一步设置表格的设计。例如，您可以为表格添加填充、边距、分隔线等。

示例

让我们看几个示例：

填充

为了给表格或其单元格添加填充，使用属性 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 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>
   </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>Border 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>

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

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

示例

让我们看一个例子：

<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>

条纹表格

为了使表格具有条纹效果，即交替行有颜色，您可以使用 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提供了一些功能，可以使表格具有响应式的特性。你可以使用属性 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 Table – 相关属性

以下是用于样式化表格的CSS属性列表：

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