14 - 表格

最新推荐文章于 2023-08-09 18:43:43 发布

xyyojl

最新推荐文章于 2023-08-09 18:43:43 发布

阅读量268

点赞数 2

分类专栏：前端 html+css 文章标签： table table的合并 table的默认特征

本文链接：https://blog.csdn.net/xyyojl/article/details/82708862

版权

前端同时被 2 个专栏收录

32 篇文章 0 订阅

订阅专栏

html+css

21 篇文章 0 订阅

订阅专栏

表格

表格table的构成
table默认特征
table默认样式清除
table-layout
table的合并
display: table的特性
表格具有display的类型

表格的构成

表格是以table标签定义:

表格下面的标签	组成的部分
caption	表格的标题文字
thead	整个表格的表头部分(头部)
tbody	整个表格的数据本体(内容)
tfoot	整个表格的注脚等内容

在thead/tbody/tfoot中各部分的组成:

thead/tbody/tfoot中各部分的组成	含义
tr	表格中的每一行构成的标签,存放th/td
th	表头的单元格,行或列的信息描述(居中粗体)
td	单个信息内容单元格,每个td可包含文本/图片/列表/表单/表格

table默认特征

table可以设置宽高(display: table),tr/td近似均分
th默认加粗,水平竖直居中
td默认上下居中,左对齐
td会根据个数计算每个盒子的宽度占比
表格同一行/同一列会继承最大值
th/td**没有margin**(调整元素之间间距)

table的样式特点

display: table,块级表格来显示,类似于block独占一行
border-collapse: separate边框展示效果,默认分开,(border-collapse:collapse合并表格边框,合并会忽略border-spacing)
border-spacing: 2px 单元格默认间距2px可设置水平竖直两个方向,在border-collapse:collapse不会生效

table默认样式清除

清除掉默认的padding和边框的分隔,做一个初始化的表格

table{ border-collapse: collapse;}
table th,table td{ padding:0;}

table-layout

完成表格布局的表格计算方法:

固定表格布局: 水平布局取决于表宽.列宽/边框宽/单元格间距,和内容无关,课直接计算出布局方案(fixed)(单元格平分表格宽度)
自动表格布局: 列宽有所在列最宽的内容设置,需要访问所有表格内容(默认单元格由内容来决定宽度)

table的合并

colspan属性: 当前单元格横向向右横跨单元格的列数<td colspan='2'></td>(横跨一列一共占两列)(列合并)
rowspan属性: 当前单元格纵向向下横跨单元格的行数<td rowspan='2'></td>(横跨一行一共占两行)(行合并)

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>小demo - table的合并</title>
    <style>

    </style>
</head>
<body>
    <table border="1">
        <tr>
            <td rowspan="2">博客</td>
            <td>博客标题</td>
        </tr>
        <tr>
            <td>博客文章</td>
        </tr>
    </table>
</body>
</html>

display: table的特性

支持margin: auto
具有包裹性(内容撑开)
支持宽高
表格前后带有换行符

表格具有display的类型

display的属性值	含义
table	此元素会作为块级表格来显示（类似），表格前后带有换行符
table-row-group	此元素会作为一个或多个行的分组来显示（类似）
table-header-group	此元素会作为一个或多个行的分组来显示（类似）
table-footer-group	此元素会作为一个或多个行的分组来显示（类似）
table-row	此元素会作为一个表格行显示（类似）
table-column	此元素会作为一个单元格列显示（类似）
table-cell	此元素会作为一个表格单元格显示（类似和）
table-caption	此元素会作为一个表格标题显示（类似）

综合例子:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>小demo - 表格的简单应用(海贼迷)</title>
    <style>
        body{
            margin: 0;
            font-size: 14px;
        }
        table{
            border-collapse: collapse;
        }
        table thead{
            background-color: rgb(248, 248, 248);
        }
        table th,
        table td{
            padding:6px 4px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>草帽海贼团成员</th>
                <th>绰号</th>
                <th>能力</th>
                <th>出身</th>
                <th>地位</th>
                <th>悬赏金</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>蒙奇·D·路飞</td>
                <td>草帽</td>
                <td>橡胶果实，霸王色霸气，武装色霸气，见闻色霸气，体术</td>
                <td>东海-哥亚王国-风车镇</td>
                <td>船长</td>
                <td>十五亿</td>
            </tr>
            <tr>
                <td>罗罗诺亚·索隆</td>
                <td>海贼猎人</td>
                <td>剑术，武装色霸气，见闻色霸气</td>
                <td>东海-霜月村</td>
                <td>剑士</td>
                <td>三亿两千万</td>
            </tr>
            <tr>
                <td>娜美</td>
                <td>小贼猫</td>
                <td>武器天候棒</td>
                <td>东海-可可亚西村</td>
                <td>航海士</td>
                <td>六千六百万</td>
            </tr>
            <tr>
                <td>乌索普</td>
                <td>狙击王</td>
                <td>狙击</td>
                <td>东海-西罗普村</td>
                <td>狙击手</td>
                <td>两亿</td>
            </tr>
            <tr>
                <td>文斯莫克·山治</td>
                <td>黑足</td>
                <td>踢技，武装色霸气，见闻色霸气</td>
                <td>北海-杰尔玛王国</td>
                <td>厨师</td>
                <td>三亿三千万</td>
            </tr>
            <tr>
                <td>托尼托尼·乔巴</td>
                <td>爱吃棉花糖的乔巴</td>
                <td>人人果实</td>
                <td>伟大航路·磁鼓岛-无名国</td>
                <td>船医</td>
                <td>一百</td>
            </tr>
            <tr>
                <td>妮可·罗宾</td>
                <td>恶魔之子</td>
                <td>花花果实</td>
                <td>西海-欧哈拉</td>
                <td>考古学家</td>
                <td>一亿三千万</td>
            </tr>
            <tr>
                <td>弗兰奇</td>
                <td>改造人</td>
                <td>改造武器</td>
                <td>南海某国</td>
                <td>船匠</td>
                <td>九千四百万</td>
            </tr>
            <tr>
                <td>布鲁克</td>
                <td>灵魂之王</td>
                <td>黄泉果实，剑术</td>
                <td>西海某国</td>
                <td>音乐家</td>
                <td>八千三百万</td>
            </tr>
            <tr>
                <td>甚平</td>
                <td>海侠</td>
                <td>鱼人空手道、鱼人柔术、武装色霸气</td>
                <td>鱼人岛</td>
                <td>舵手</td>
                <td>四亿以上</td>
            </tr>
        </tbody>
    </table>
</body>
</html>