HTML —— 表格
复习下关于html中的表格。
基本结构：
表格由 table 标签为父标签进行包裹，可以在 table 上添加几种属性。
border ： 定义表格的边框。
cellspacing ： 间距，指单元格之间的距离，类似 盒模型中的 margin。
cellpadding ： 补白，指单元格内文字与边框的距离 类似盒模型中的 padding 。
其它 比如 宽高对齐方式，建议使用css进行设置。
tr 标签，表示 行。
td 标签，表示单元格。
表格一般都会设置表头，用来定义一列的信息。
表头设置 用 tr 包裹，表示一行，th 标签 定义表头
<table border="1" align="center" cellspacing="2" cellpadding="10">
<tr>
<th>性别</th>
<th>姓名</th>
<th>电话</th>
</tr>
</table>
下面，简单定义一个表格
<table border="1" align="center" cellspacing="2" cellpadding="10">
<tr>
<th>性别</th>
<th>姓名</th>
<th>电话</th>
</tr>
<tr>
<td>男</td>
<td>张三</td>
<td>130000</td>
</tr>
<tr>
<td>男</td>
<td>李四</td>
<td>131120</td>
</tr>
<tr>
<td>女</td>
<td>小红</td>
<td>4541124</td>
</tr>
</table>
我们经常需要合并单元格，来显示一些数据
比如，类似下面这样
直接上重点：
rowspan ： 合并行
上图 其实 是 第二行的第三个单元格 合并了 第三行及第四行 的第三个单元格。
合并掉几个，就要在相应的行内，删除掉对应的单元格。
代码如下：
<table border="1" align="center" cellspacing="2" cellpadding="10">
<tr>
<th>学科</th>
<th>分数</th>
<th>总计</th>
</tr>
<tr>
<td>数学</td>
<td>80</td>
<td rowspan="3">123</td>
</tr>
<tr>
<td>语文</td>
<td>95</td>
</tr>
<tr>
<td>英语</td>
<td>92</td>
</tr>
</table>
colspan ：合并单元格
效果如下：
此时，第一行的第一个单元格，合并掉了第一行的第二个单元格，同样的，既然合并了，就需要删除掉对应的单元格。
代码如下：
<table border="1" align="center" cellspacing="2" cellpadding="10">
<tr>
<td colspan="2">123</td>
<td>abc</td>
</tr>
<tr>
<td>123</td>
<td>abc</td>
<td>abc</td>
</tr>
<tr>
<td>123</td>
<td>abc</td>
<td>abc</td>
</tr>
</table>
下面，写一个具体的示例作为参考
效果如下：
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
table{
border-collapse: collapse;
width: 500px;
}
td,th{
border: 1px solid #B2C2E3;
height: 26px;
text-align: center;
}
th{
background-color: #DBE3F9;
font-size: 14px;
}
td{
font-size: 12px;
}
.noborder{
border: 0;
background-color: #ffffff;
height: 5px;
}
.h{
color: #E33F06;
}
.l{
color: #0C0C6C;
}
.tred{
color: #FF0000;
}
.datebg{
background-color: #F4F7FC;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th colspan="2">日期</th>
<th>天气现象</th>
<th>气温</th>
<th>风向</th>
<th>风力</th>
</tr>
</thead>
<tr>
<td rowspan="2" class="datebg">22日星期五</td>
<td class="datebg">白天</td>
<td>晴间多云</td>
<td class="h">高温7℃</td>
<td>无持续风向</td>
<td>微风</td>
</tr>
<tr>
<td class="datebg">夜间</td>
<td>晴</td>
<td class="l">低温4℃</td>
<td>无持续风向</td>
<td>微风</td>
</tr>
<tr>
<td class="noborder" colspan="7"></td>
</tr>
<tr>
<td rowspan="2" class="tred datebg">23日星期六</td>
<td class="datebg">白天</td>
<td>晴间多云</td>
<td class="h">高温7℃</td>
<td>无持续风向</td>
<td>微风</td>
</tr>
<tr>
<td class="datebg">夜间</td>
<td>晴</td>
<td class="l">低温4℃</td>
<td>无持续风向</td>
<td>微风</td>
</tr>
</table>
</body>
</html>
以上就是本文的全部内容。
