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指定浏览器是否应控制彼此接触的相邻边框的外观，或者每个单元格是否应保持其样式。

  • 边框间距指定表格单元格之间应显示的宽度。

  • 标题侧指定表格标题应显示的位置（顶部或底部）。

  • 空单元格指定如果单元格为空，是否应显示边框。

  • 表格布局允许浏览器使用列的其余部分遇到的第一个宽度属性来加速表格的布局，而不必在渲染之前加载整个表格。

  • width和height属性设置表格的高度和宽度。

  • text -align属性设置表格单元格内文本内容的水平对齐方式。

  • border属性可用于设置表格及其单元格的边框。

  • 背景颜色属性可以应用于表格本身、表格单元格或表格行。

  • font -size、font-family、font-weight、font-color等设置表格字体的样式。

使用 CSS 折叠表格边框

border-collapse属性确保表格单元格之间的边框折叠成单个边框，从而创建更清晰的外观。属性border-collapse 的值可以是Collapse或alone（默认）。

例子

下面的示例展示了如何使用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属性指定表格中相邻单元格边框之间的距离。该属性可以指定为一个或两个值：

  • 边框间距：2px；：如果传递一个值，则间距将应用于垂直和水平边框。

  • 边框间距：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 中的title-side属性用于控制表格标题相对于表格的位置或对齐方式。标题端属性可以具有以下值之一：

  • top：放置在表格上方的标题。

  • 底部：放置在表格下方的标题。

  • block-start：标题框位于表格的块起始边缘。

  • block-end：标题框位于表格的块结束边缘。

  • inline-start：标题框位于表格的内联起始边缘。

  • inline-end：标题框位于表格的行内结束边缘。

  • 继承：该值继承自父元素的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>

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

隐藏表格中的空单元格

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

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

  • show：表示空单元格应显示边框和间距，就像它们包含内容一样。这是默认值。

  • hide：表示空单元格应该隐藏并且不占用任何空间。空单元格的边框和间距将不会显示，从而使布局更加紧凑。

例子

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

<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时，浏览器将根据内容计算列和单元格的宽度。

  • 固定：当table-layout设置为固定时，浏览器将根据表格的第一Behave每一列分配固定的宽度。这意味着所有后续行将遵循相同的列宽，无论其内容如何。

当您想要创建具有一致列宽的表时，尤其是在处理大量数据或想要维护特定设计时，使用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>）。它可以采用以下值：

  • 左边

  • 正确的

  • 中心

  • 证明合法

默认情况下，<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>中内容的垂直对齐方式。

它可以采用以下值：

  • 顶部

  • 中间

  • 底部

默认情况下， <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 表格背景颜色

背景颜色属性可以应用于表格本身、表格单元格或表格行。

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

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 表格字体样式

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

例子

让我们看几个例子：

填充

为了向表格或其单元格添加填充，请使用属性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 表格分隔线（垂直/水平）

为了添加垂直或水平分隔线，您可以将属性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>

条纹桌

为了使表格看起来有条纹，其中替代行是彩色的，您可以使用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 提供了一些功能，通过这些功能我们可以使表格变得响应式。当屏幕较小且看不到完整内容时，您可以使用属性O​​verflow-x: auto向表格添加水平滚动条。

您需要在<table>元素周围添加一个容器元素，例如<div>，并具有属性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 属性列表：

财产 描述
边界崩溃 设置表格边框渲染算法。
边框间距 使用单独的边框设置边框之间的间距。一个值设置垂直和水平间距，两个值分别设置水平和垂直间距。
标题侧 设置表格标题的位置。
空单元格 使用单独的边框，隐藏表格中的空单元格。
表格布局 确定表格渲染算法。