HTML + CSS 连载 | 30 - HTML 表格_html 表格样式css-CSDN博客

本文链接：https://blog.csdn.net/JingnanJia/article/details/134111015

html+css.jpeg

一、HTML 表格元素

在网页中对于某些内容的展示使用表格元素或更加合适，比如

HTML 中编写表格的是 table 元素，该元素中包含 tr(table row) 元素，也就是表格中的行；td(table data) 元素，也就是表格中的单元格。

表格有很多相关的属性可以设置表格的样式，但是已经不推荐使用了；table 元素应该使用 CSS 制定样式，设置 margin-left、margin-right 为 auto 来实现类似于 align 属性的效果。

表格元素的使用

创建 HTML 页面，使用 table 元素来展示股票数据，具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <table>
    <!-- 第一行内容 -->
    <tr>
      <!--第一行第一个单元格-->
      <td>排名</td>
      <!--第一行第二个单元格-->
      <td>名称</td>
      <td>代码</td>
      <td>价格</td>
      <td>涨幅</td>
    </tr>
  </table>
</body>
</html>

在浏览器中打开 HTML 页面，效果如下：

一个 tr 元素只表示一行内容，因此我们需要增加更多的 tr；

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <table>
    <!-- 第一行内容 -->
    <tr>
      <td>排名</td>
      <td>名称</td>
      <td>代码</td>
      <td>价格</td>
      <td>涨幅</td>
    </tr>
    <tr>
      <td>1</td>
      <td>凯因科技</td>
      <td>688687</td>
      <td>29.98</td>
      <td>+20.02%</td>
    </tr>
    <tr>
      <td>2</td>
      <td>阿拉丁</td>
      <td>688179</td>
      <td>20.60</td>
      <td>+19.96%</td>
    </tr>
    <tr>
      <td>3</td>
      <td>迈德医疗</td>
      <td>688310</td>
      <td>37.74</td>
      <td>+14.61%</td>
    </tr>
    <tr>
      <td>4</td>
      <td>四方光电</td>
      <td>688655</td>
      <td>74.91</td>
      <td>+12.39%</td>
    </tr>
  </table>
</body>
</html>

在浏览器中打开 HTML 页面，效果如下：

基本信息已经展现出来了，但是这个表格并没有边框线，我们可以通过 border 属性来实现，给每个单元格添加边框线，在 HTML 页面中增加如下 CSS 代码：

td {
  border: 1px solid #333;
}

刷新页面，效果如下：

可以看到每个单元格都有自己的边框线，但是单元格的内容和边框之间略显拥挤，我们可以设置内边距，具体 CSS 代码如下：

td {
  border: 1px solid #333;
  padding: 8px 16px;
}

再次刷新页面，效果如下：

但是这里还有一个问题，每个单元格都有自己的边框线，但其实相邻单元格只需要一个边框线就可以了。

我们可以使用属性 border-collapse 来解决重复边框线的问题，该属性用来决定表格的边框是分开的还是合并的，属性值为 collapse 则表示合并单元格的边框。

在 CSS 代码中设置居中并且合并边框线，注意要在 table 上设置，而不是在 td 上设置：

table {
  /*设置文本居中*/
  text-align: center;
  border-collapse: collapse;
}

刷新页面，效果如下：

可以看到相邻单元格之间就只有一条边框线了。

接着我们还需要给表格的第一行内容及表头的字体加粗，给第一行的 tr 元素增加一个 class 属性，具体代码如下：

<!-- 第一行内容 -->
<tr class="head">
  <td>排名</td>
  <td>名称</td>
  <td>代码</td>
  <td>价格</td>
  <td>涨幅</td>
</tr>

新建一个 CSS 选择器，设置字体加粗：

table tr.head {
  font-weight: 700;
}

刷新页面，效果如下：

可以看到第一行内容字体被明显加粗了；除了这种方式之外，我们还可以使用结构伪类来为第一行内容设置字体加粗，并且这种方式不需要单独添加 class 属性，具体 CSS 代码如下：

table tr:nth-child(1) {
  font-weight: 700;
}

刷新页面，效果如下：

二、表格的其他元素

表格的格式也跟 HTML 格式是类似的，可以分为表格标题、表头、主体以及尾部部分，因此关于表格 HTML 元素就有了更加语义化的元素，比如：

caption：表格的标题
thead：表格的表头
th：表格的表头单元格
tbody：表格的主体
tfoot：表格的页脚

使用上面这些表格的语义化元素修改上面的表格，修改后的 HTML 代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>

    table {
      text-align: center;
      border-collapse: collapse;
    }

    /* table tr.head {
      font-weight: 700;
    } */
    table tr:nth-child(1) {
      font-weight: 700;
    }

    td {
      border: 1px solid #333;
      padding: 8px 16px;
    }
  </style>
</head>
<body>
  <table>
    <caption>股票排行</caption>
    <!-- 第一行内容 -->
    <thead class="head">
      <th>排名</th>
      <th>名称</th>
      <th>代码</th>
      <th>价格</th>
      <th>涨幅</th>
    </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>凯因科技</td>
        <td>688687</td>
        <td>29.98</td>
        <td>+20.02%</td>
      </tr>
      <tr>
        <td>2</td>
        <td>阿拉丁</td>
        <td>688179</td>
        <td>20.60</td>
        <td>+19.96%</td>
      </tr>
      <tr>
        <td>3</td>
        <td>迈德医疗</td>
        <td>688310</td>
        <td>37.74</td>
        <td>+14.61%</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td>4</td>
        <td>四方光电</td>
        <td>688655</td>
        <td>74.91</td>
        <td>+12.39%</td>
      </tr>
    </tfoot>
  </table>
</body>
</html>

刷新页面，效果如下：

效果与之前没有使用这些语义化元素时的效果一致，除了首行没有边框外，当然我们也可以对 th 添加边框，具体 CSS 代码如下：

th, td {
  border: 1px solid #333;
  padding: 8px 16px;
}

刷新页面，效果如下：

可以看到首行的边框也被加上去了，当然我们也可以使用结构伪类对 tbody 中的主体内容进行样式的设置，比如修改文字颜色、字体加粗等，添加如下 CSS 代码：

table tbody tr:nth-child(1) {
  color: aquamarine;
  font-weight: 700;
}

刷新页面，效果如下：