HTML 表格
表格本身并不是用来布局，而是用来展示表格数据
1.基本结构
- 表格标签
| 标签 | 说明 |
|---|---|
| table | 表格标签 |
| tr | 行标签 |
| th | 单元格标签（表头，粗体居中） |
| td | 单元格标签 |
- 基本代码
<body style="padding:30px;">
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>张三丰</td>
<td>120</td>
</tr>
<tr>
<td>杨过</td>
<td>24</td>
</tr>
</table>
</body>
2.表格的标题
- caption标签用来定义表格的标题,caption标签的文本会在表格上方居中显示
<body style="padding:30px;">
<table>
<caption>我是表格的标题</caption>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>简介</th>
</tr>
<tr>
<td>张三丰</td>
<td>120</td>
<td>本名张君宝，自创太极拳剑，将武当派发扬光大</td>
</tr>
<tr>
<td>杨过</td>
<td>24</td>
<td>金庸武侠小说《神雕侠侣》的主人公</td>
</tr>
</table>
</body>
3.table标签的属性
-
table标签有以下几个属性：
-
注意：表格的属性本质上还是操作css实现的，优先级低于用户设置的css样式，这些属性都已过，请使用css进行替代
-
border属性：为表格设置边框大小（默认0，就是无边框），border属性值只会影响table标签的border-width样式属性，本质上还是操作css
<body style="padding:30px;">
<table border="1">
...
</table>
<table border="10">
...
</table>
</body>
- cellspacing属性:设置各个单元格之间的间距，默认值为2,可以通过操作css的border-spacing属性来实现
<body style="padding:30px;">
<table border="1" cellspacing="5">
...
</table>
<table border="1" cellspacing="0">
...
</table>
</body>
- cellpadding属性:设置单元格的内边距,默认值为1，实际上是通过操作th/td标签的padding样式进行控制的
<body style="padding:30px;">
<table border="1" cellspacing="0">
...
</table>
<table border="1" cellspacing="0" cellpadding="10">
...
</table>
</body>
- width/height属性:设置表格的宽高，如果表格设置的宽高大于表格子元素的总大小，则会把剩余的空间均分给子元素，如果设置的宽度小于表格子元素的总大小，则会压缩子元素的宽度。
<table border="1" cellspacing="0" cellpadding="10" width="700">
...
</table>
-
如果不设置宽度，表格宽度由单元格撑开，但是不会超出其父容器的宽度，不会出现滚动条，如图：
-
align属性:设置表格的在父元素中的水平对齐方式，这个属性可以用于td标签
<table border="1" cellspacing="0" cellpadding="10" align="center">
...
</table>
4.th/td标签
- th标签用于表头的单元格，默认字体是加粗的，且水平居中对其。
- td标签用于普通的单元格，默认水平左对齐。
- 同一个列的th/td标签的宽度是一致的，以宽度最大的那列为准，同理，同一行th/td标签的高度也是一致的，以同行中高度最大那个为准
5.单元格合并
在td标签中设置下面的属性就可以进行单元格合并
colspan：跨列合并单元格（横向）
rowspan：跨行合并单元格（纵向）
<body style="padding:30px;">
<table border="1" cellspacing="0" cellpadding="10" align="center">
<tr>
<th>/</th>
<th>CPU</th>
<th>主板</th>
<th>显卡</th>
<th>总价</th>
</tr>
<tr>
<td>配置一</td>
<!-- 跨列合并 -->
<td colspan="2" align="center">1349</td>
<!-- <td>459</td> -->
<td>1099</td>
<td>2448</td>
</tr>
<tr>
<td>配置二</td>
<td>949</td>
<td>459</td>
<td>1099</td>
<!-- 跨行合并 -->
<td rowspan="2">2507</td>
</tr>
<tr>
<td>配置三</td>
<td>549</td>
<td>459</td>
<td>1499</td>
<!-- <td>2507</td> -->
</tr>
</table>
</body>
6.骚操作系列：利用背景图绘制表格边框
- 分别为table标签和td标签设置不同的背景色，即可生成一张“带边框”的表格
table{
background-color: red;
}
td{
background-color: #fff;
}
- 之所以有这样的效果，是因为默认每个单元格之间存在间距，也就是前面所说的cellspacing属性（css中为border-spacing），表格的背景色通过这些间距透过来形成“边框”，只要把这属性置0，这种效果就会消失
<table class="bg-table" cellspacing="0"></table>
7.基本封装
- 表格默认的样式是非常简陋的，没有基本的分割线和内边距，一般要为其设置基本样式，最简单的办法就是引入bootstrarp.css的table类，例如：
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<table class="table">
</table>
- 或者自己封装，下面是仿bootstrarp的css
<style>
/* 宽度100% */
.table{
width:100%;
/* 去除单元格边距 */
border-spacing:0;
/* 重制文本样式 */
font-size: 14px;
color: #333;
}
/* 表格行为怪异盒模型 */
.table tr{
box-sizing: border-box;
}
/* 所有单元格左对齐 默认有上边框 */
.table tr th,
.table tr td{
text-align: left;
border-top: 1px solid #ddd;
padding: 8px;
}
/* 优化，为最后一行添加边框 */
.table tbody tr:last-child td{
border-bottom: 1px solid #ddd;
}
</style>
8.列的宽度
- table-layout这个css属性描述的是表格如何分配多余的宽度给各个列，他有2个值：
| 属性值 | 说明 |
|---|---|
| auto | 默认，按宽度比例分配，哪列宽度越大，分配的空间越多 |
| fixed | 均等分配总空间，及：列宽度 = 表格宽度/列数 |
.table{
table-layout: fixed;
}
对比图：
9.col标签
- 使用col标签可以给对应列统一设置样式，通过下标进行关联，可以利用这个特性做固定表头
<table class="table table-bordered">
<colgroup>
<col style="background-color:red" width="60">
<col style="background-color:yellow">
<col style="background-color:lightblue">
</colgroup>
<tr>
<td>1</td>
<td>col标签的作用</td>
<td>使用col标签可以给对应列统一设置样式，通过下标进行关联</td>
</tr>
<tr>
<td>2</td>
<td>width属性说明1</td>
<td>如果所有的col标签都设置了width属性，则他们按比例分配所有的宽度，width的值此时可以看作比例系数</td>
</tr>
<tr>
<td>3</td>
<td>width属性说明2</td>
<td>如果只有一部分col标签设定了width属性,则width的值就是那一列的宽度，而没有设定的那些列，将自动分配剩余空间</td>
</tr>
</table>
代码运行结果：
- 调整width的值
<colgroup>
<col style="background-color:red" width="1">
<col style="background-color:yellow" width="2">
<col style="background-color:lightblue" width="3">
</colgroup>
