构建静态页面 之 [ 表格 ]

2024年4月27日 74次阅读 来源: 蔡志远

表格

描述

  • 以网格的形式来呈现数据，并且以二维数据表(有行有列)来显示数据内容

表格元素

  • <table>元素 – 表示定义表格
  • <tr>元素 – 表示定义表格中的行
  • <th>元素 – 表示定义表格中的表头
  • <td>元素 – 表示定义表格中的单元格
  • <caption>元素 – 表示定义表格中的标题
  • <thead>元素 – 表示定义表格的页眉
  • <tbody>元素 – 表示定义表格的主体
  • <tfoot>元素 – 表示表格的页脚

表格元素元素属性

border属性

  • 表示设置表格的边框

    • 属性值为数字值
    • 会同时设置表格和单元格

rowspan属性

  • 表示设置单元格的跨行

    • 属性值为数字值

colspan属性

  • 表示设置单元格的跨列

    • 属性值为数字值

表格元素整体示例代码

<body>
<!--
     border属性 - 表示设置表格的边框
      * 属性值为数字值
      * 会同时设置表格和单元格
     rowspan属性 - 表示设置单元格的跨行
      * 属性值为数字值
     colspan属性 - 表示设置单元格的跨列
      * 属性值为数字值
 -->

<!-- <table>元素 - 表示定义表格 -->
<table border="5">
    <!-- <caption>元素 - 表示定义表格中的标题 -->
    <caption>随身物品</caption>
    <!-- <thead>元素 - 表示定义表格的页眉 -->
    <thead>
        <!-- <tr>元素 - 表示定义表格中的行 -->
        <tr>
            <!-- <th>元素 - 表示定义表格中的表头 -->
            <th>手机</th>
            <th>电脑</th>
            <th>手表</th>
            <th>平板</th>
        </tr>
    </thead>
    <!-- <tbody>元素 - 表示定义表格的主体 -->
    <tbody>
        <tr>
            <!-- <td>元素 - 表示定义表格中的单元格 -->
            <td>iphone X</td>
            <td>MacBook Pro 15寸</td>
            <td>卡西欧</td>
            <td>iPad Pro 12寸</td>
        </tr>
        <tr>
            <td>iphone SE</td>
            <td>MacBook Pro 13寸</td>
            <td>尼尚</td>
            <td>iPad Pro 10寸</td>
        </tr>
    </tbody>
    <!-- <tfoot>元素 - 表示表格的页脚 -->
    <tfoot>
        <tr>
            <td colspan="3">以上二选一</td>
        </tr>
    </tfoot>
</table>
</body>

表格样式

caption-side属性

  • 表示设置表格中的标题元素在表格中的显示位置

border属性

  • 表示设置边框

    • border-width – 表示设置边框的宽度
    • border-style – 表示设置边框的样式
    • border-color – 表示设置边框的颜色
    • border属性也允许简写：顺序是 边框的宽度 边框的样式 边框的颜色

border-collapse属性

  • 表示设置边框是分离还是合并

    • 注意：在设置边框为合并后，border-spacing属性和empty-cells属性会失效

border-spacing属性

  • 表示设置边框之间的距离

empty-cells属性

  • 表示设置空白单元格的显示与隐藏

表格样式示例代码

<head>
    <meta charset="UTF-8">
    <title>表格的样式</title>
    <style>
        caption {
            /*
                caption-side属性 - 表示设置表格中的标题元素在表格中的显示位置
                * top - 表示设置表格标题出现在表格的顶部“默认值”
                * bottom - 表示设置表格标题出现在表格的底部
             */
            caption-side: top;
        }
        table, th, td {
            /*
                border属性 - 表示设置边框
                 * border-width - 表示设置边框的宽度
                 * border-style - 表示设置边框的样式
                 * border-color - 表示设置边框的颜色
                border属性也允许简写：顺序是 边框的宽度 边框的样式 边框的颜色
             */
            border: 1px solid black;
            /*
                border-collapse属性 - 表示设置边框是分离还是合并
                 * separate属性值 - 表示边框的分离“默认值”
                 * collapse属性值 - 表示边框的合并
                * 注意：在设置边框为合并后，border-spacing属性和empty-cells属性会失效
             */
            border-collapse: separate;
            /* border-spacing属性 - 表示设置边框之间的距离 */
            border-spacing: 10px;
            /*
                empty-cells属性 - 表示设置空白单元格的显示与隐藏
                 * show属性值 - 表示显示空白单元格“默认值”
                 * hide属性值 - 表示隐藏空白单元格
             */
            empty-cells: hide;
        }
    </style>
</head>
<body>
<table>
    <caption>随身物品</caption>
    <thead>
        <tr>
            <th>手机</th>
            <th>电脑</th>
            <th>手表</th>
            <th>平板</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>iphone X</td>
            <td>MacBook Pro 15寸</td>
            <td>卡西欧</td>
            <td>iPad Pro 12寸</td>
        </tr>
        <tr>
            <td>iphone SE</td>
            <td>MacBook Pro 13寸</td>
            <td>尼尚</td>
            <td>iPad Pro 10寸</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3">以上二选一</td>
        </tr>
    </tfoot>
</table>
</body>
    原文作者：蔡志远
    原文地址: https://segmentfault.com/a/1190000016184124
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞