版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/xyyojl/article/details/82708862
表格
- 表格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>