【07】css 常用表格属性详解

原创已于 2024-12-29 09:44:21 修改 · 1.9k 阅读

17 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

收录于

CSS

于 2024-12-28 22:14:19 首次发布

css 常用表格属性

- 一、表格边框border
- 二、折叠边框border-collapse
- 三、单元格中的文字居中对齐text-align、vertical-align
- - 拓展：
- css 常用表格属性总结：

一、表格边框border

border:边框线的宽度1px 设置实线solid 设置边框颜色red;

二、折叠边框border-collapse

<运行结果，见图2>

<!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>
  <style>
    table,
    td {
      border: 2px solid red;
      /* 设置边框 */
      /* 参数注释：“2px”是边框线的宽度，“solid”设置实线，“red”设置边框颜色为红色 */
    }
    table {
      border-collapse: collapse;
      /* 设置了折叠边框，见图2 */
    }
  </style>
  <body>
    <table>
      <tr>
        <td>这是单元格</td>
        <td>这是单元格</td>
      </tr>
      <tr>
        <td>这是单元格</td>
        <td>这是单元格</td>
      </tr>
      <tr>
        <td>这是单元格</td>
        <td>这是单元格</td>
      </tr>
    </table>
  </body>
</html>

三、单元格中的文字居中对齐text-align、vertical-align

水平居中：text-align（left、right、center）

垂直居中：vertical-align（top顶部对齐、bottom底部对齐、middle中间对齐）

<运行结果，见图2>

<!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>
  <style>
    table,
    td {
      border: 2px solid red;
      /* 设置边框 */
    }
    table {
      width: 400px;
      /* 设置宽度 */
      height: 200px;
      /* 设置高度 */
      border-collapse: collapse;
      /* 设置折叠边框 */
    }
    td {
      text-align: center;
      vertical-align: middle;
      /* 设置单元格中的文字居中对齐,见图2 */
    }
  </style>
  <body>
    <table>
      <tr>
        <td>这是单元格</td>
        <td>这是单元格</td>
      </tr>
      <tr>
        <td>这是单元格</td>
        <td>这是单元格</td>
      </tr>
      <tr>
        <td>这是单元格</td>
        <td>这是单元格</td>
      </tr>
    </table>
  </body>
</html>