CSS 表格-之路教程

斑马条纹的表格

使用 nth-child() 选择器并将 CSS background-color 属性添加到奇数（偶数）表格行，我们可以创建一个斑马条纹表格。

创建斑马条纹表格的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table {
        border-collapse: collapse;
        width: 100%;
      }
      th,
      td {
        text-align: left;
        padding: 10px;
      }
      tr:nth-child(even) {
        background-color: #6eeccf;
      }
      tr:nth-child(odd) {
        background-color: #2d7f88;
      }
    </style>
  </head>
  <body>
    <h2>Striped table example</h2>
    <table>
      <tr>
        <th>First name</th>
        <th>Last name</th>
        <th>Points</th>
      </tr>
      <tr>
        <td>Sherlock</td>
        <td>Holmes</td>
        <td>0</td>
      </tr>
      <tr>
        <td>John</td>
        <td>Watson</td>
        <td>0</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Watson</td>
        <td>0</td>
      </tr>
    </table>
  </body>
</html>

折叠边框

border-collapse 属性指定表格的边框是折叠成单个边框还是分开。

表格颜色

正如你所看到的，我们表格的 <thead> 部分是蓝色的，而我们写的一些文本是白色的。
对于蓝色背景，我们使用 background-color 属性，对于白色文本，我们使用 color 属性。

其他文字用黑色书写。

表格填充

要控制表格中边框和内容之间的空间，请在 <td> 和 <th> 元素上使用 padding 属性：

td {
  padding: 15px;
}

使用垂直 align-property 进行垂直对齐

使用 CSS vertical-align 属性，我们可以在 <th> 或者 <td> 中设置内容的垂直对齐方式。

默认情况下， <th> 和 <td> 元素中的内容垂直居中对齐。

在下面的示例中， <td> 元素的内容垂直对齐到底部：

<td> 元素的内容垂直对齐到底部的示例：

<!DOCTYPE html>
<html>
  <head>
    <style>
      table,
      td,
      th {
        border: 1px solid black;
      }
      table {
        border-collapse: collapse;
        width: 100%;
      }
      td {
        height: 50px;
        vertical-align: bottom;
        text-align: right;
        padding-right: 10px;
      }
    </style>
  </head>
  <body>
    <h2>Vertical alignment example</h2>
    <table>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Money</th>
      </tr>
      <tr>
        <td>Sherlock</td>
        <td>Holmes</td>
        <td>0</td>
      </tr>
      <tr>
        <td>John</td>
        <td>Watson</td>
        <td>0</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Watson</td>
        <td>0</td>
      </tr>
    </table>
  </body>
</html>

响应式表格

将任何具有 CSS overflow-x 属性的“auto”值的容器元素添加到 <table> 元素，我们可以使表格具有响应性。

创建响应表的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        overflow-x: auto;
      }
      table {
        border-collapse: collapse;
        width: 100%;
      }
      th,
      td {
        text-align: left;
        padding: 8px 5px;
      }
      tr:nth-child(even) {
        background-color: #6eeccf;
      }
      tr:nth-child(odd) {
        background-color: #2d7f88;
      }
    </style>
  </head>
  <body>
    <h2>Responsive table example</h2>
    <div>
      <table>
        <tr>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Money</th>
          <th>Money</th>
          <th>Money</th>
          <th>Money</th>
          <th>Money</th>
          <th>Money</th>
          <th>Money</th>
          <th>Money</th>
          <th>Money</th>
          <th>Money</th>
        </tr>
        <tr>
          <td>Sherlock</td>
          <td>Holmes</td>
          <td>0</td>
          <td>0</td>
          <td>0</td>
          <td>0</td>
          <td>0</td>
          <td>0</td>
          <td>0</td>
          <td>0</td>
          <td>0</td>
          <td>0</td>
        </tr>
        <tr>
          <td>John</td>
          <td>Watson</td>
          <td>0</td>
          <td>0</td>
          <td>0</td>
          <td>0</td>
          <td>0</td>
          <td>0</td>
          <td>0</td>
          <td>0</td>
          <td>0</td>
          <td>0</td>
        </tr>
        <tr>
          <td>Mary</td>
          <td>Watson</td>
          <td>0</td>
          <td>0</td>
          <td>0</td>
          <td>0</td>
          <td>0</td>
          <td>0</td>
          <td>0</td>
          <td>0</td>
          <td>0</td>
          <td>0</td>
        </tr>
      </table>
    </div>
  </body>
</html>

使用 text-align 属性水平对齐

借助 CSS text-align 属性，我们可以在 <th> 或者 <td> 中设置内容的水平对齐方式。

默认情况下，<td> 元素的内容向左对齐，<th> 元素的内容向中心对齐。
在下面的示例中， <th> 和 <td> 元素的内容向右对齐：

将 <th> 和 <td> 元素的内容向右对齐的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table,
      td,
      th {
        border: 1px solid black;
      }
      table {
        border-collapse: collapse;
        width: 100%;
      }
      th,
      td {
       text-align: right;
      }
    </style>
  </head>
  <body>
    <h2>Horizontal alignment example</h2>
    <table>
      <tbody>
        <tr>
          <th>Firstname</th>
          <th>Lastname</th>
          <th>Money</th>
        </tr>
        <tr>
          <td>Sherlock</td>
          <td>Holmes</td>
          <td>0</td>
        </tr>
        <tr>
          <td>John</td>
          <td>Watson</td>
          <td>0</td>
        </tr>
        <tr>
          <td>Mary</td>
          <td>Whatson</td>
          <td>0</td>
        </tr>
      <tbody>
    </table>
  </body>
</html>

表格宽度和高度

该表还具有宽度和高度属性。

如我们所见，我们在我们的风格中使用了这些属性。
我们使用整个表格的宽度属性和标题的高度属性。
我们可以将这些属性与像素和百分比一起使用。

可悬停的表格

在 <tr> 元素上使用 CSS :hover 选择器，将使表格可悬停。

创建可悬停表格的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table {
        border-collapse: collapse;
        width: 100%;
      }
      tr {
        background-color: #f5f5f5;
      }
      th,
      td {
        padding: 15px;
        text-align: left;
        border-bottom: 1px solid #ccc;
      }
      tr:hover {
        background-color: #cdcdcd;
      }
    </style>
  </head>
  <body>
    <h2>Hoverable table example</h2>
    <table>
      <tr>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Money</th>
      </tr>
      <tr>
        <td>Sherlock</td>
        <td>Holmes</td>
        <td>0</td>
      </tr>
      <tr>
        <td>John</td>
        <td>Watson</td>
        <td>0</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Watson</td>
        <td>0</td>
      </tr>
    </table>
  </body>
</html>

表格样式属性

以下是我们用于将样式应用于表格的 CSS 属性。

background-color 和 color 属性分别设置背景颜色和文本颜色。

border-collapse 属性使表格边框折叠。

text-align 属性设置文本位置。

此外，我们应该使用高度、宽度和填充属性进行样式设置。

样式表的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table {
        width: 100%;
        border-collapse: collapse;
      }
      table,
      th,
      td {
        border: 1px solid black;
      }
      thead {
        background-color: #1c87c9;
        color: #ffffff;
      }
      th {
        text-align: center;
        height: 50px;
      }
      tbody tr:nth-child(odd) {
        background: #ffffff;
      }
      tbody tr:nth-child(even) {
        background: #f4f4f4;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>Heading</th>
          <th>Heading</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Some text</td>
          <td>Some text</td>
        </tr>
        <tr>
          <td>Some text</td>
          <td>Some text</td>
        </tr>
        <tr>
          <td>Some text</td>
          <td>Some text</td>
        </tr>
        <tr>
          <td>Some text</td>
          <td>Some text</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

我们来解释一下上面的代码。

如我们所见，我们的表格有两部分：第一部分是我们编写标题的部分，即我们的 <thead> 部分，第二部分是我们编写一些文本的 <tbody> 部分。

表格有黑色边框，我们使用边框属性。

我们可以使用任何我们想要的颜色，也可以选择边框的样式。

水平分隔线

通过将 CSS border-bottom 属性添加到 <td> 和 <th> 元素，我们将创建水平分隔线。

创建水平分隔线的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table {
        border-collapse: collapse;
        width: 100%;
      }
      th,
      td {
        padding: 10px;
        text-align: left;
        border-bottom: 1px solid #cccccc;
      }
    </style>
  </head>
  <body>
    <h2>Horizontal dividers example</h2>
    <table>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Money</th>
      </tr>
      <tr>
        <td>Sherlock</td>
        <td>Holmes</td>
        <td>0</td>
      </tr>
      <tr>
        <td>John</td>
        <td>Watson</td>
        <td>0</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Watson</td>
        <td>0</td>
      </tr>
    </table>
  </body>
</html>

表格文本对齐

现在关于表格文本对齐。
如我们之前所知，我们对文本位置使用了 text-align 属性。
在我们的示例中，如我们所见，我们对标题使用 text-align 属性。
为此，我们使用“文本对齐：居中”。
我们可以阅读我们的前一章以了解如何使用它。

CSS 表格

一些 CSS 属性被广泛用于在 HTML 表格上应用样式。

它们中的每一个都在下面描述。

在本章中，我们将讨论如何为表格赋予样式。
我们可以更改所需的标题和行的颜色。

日期：2020-06-02 22:14:27 来源：oir作者：oir

←CSS 语法

CSS 文本→