今天分享一个html表格合并其实也是为了方便自己以后查看啦。
首先,我们先用html语言创建一个表格出来,如下图所示:
创建这个表格的代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>这是表格的标题栏</title>
</head>
<body>
<table border="1">
<tr><!--这是表格的第一行-->
<td>姓名</td><!--这是表格的单元格(简单来说就是这一行的第1个格子)-->
<td>城市</td>
<td>性别</td>
<td>成绩</td>
</tr>
<tr><!--这是表格的第二行-->
<td>小明</td><!--这是表格的单元格(简单来说就是这一行的第1个格子)-->
<td>A市</td>
<td>男</td>
<td>98</td>
</tr>
<tr><!--这是表格的第三行-->
<td>大明</td><!--这是表格的单元格(简单来说就是这一行的第1个格子)-->
<td>C市</td>
<td>男</td>
<td>97</td>
</tr>
<tr><!--这是表格的第四行-->
<td>二明</td><!--这是表格的单元格(简单来说就是这一行的第1个格子)-->
<td>C市</td>
<td>女</td>
<td>97</td>
</tr>
</table>>
</body>
</html>
现在,我们来尝试这把一些单元格合并
1. 将大明和二明的城市的单元格合并为一个,内容为C市
效果图如下:
代码如下所示:
<tr><!--这是表格的第三行-->
<td>大明</td><!--这是表格的单元格(简单来说就是这一行的第1个格子)-->
<td rowspan="2">C市</td>
<td>男</td>
<td>97</td>
</tr>
<tr><!--这是表格的第四行-->
<td>二明</td><!--这是表格的单元格(简单来说就是这一行的第1个格子)-->
<td>女</td>
<td>97</td>
</tr>
2. 将小明的性别和成绩合并单元格,内容为保密
效果图如下:
代码如下所示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>这是表格的标题栏</title>
</head>
<body>
<table border="1">
<tr><!--这是表格的第一行-->
<td>姓名</td><!--这是表格的单元格(简单来说就是这一行的第1个格子)-->
<td>城市</td>
<td>性别</td>
<td>成绩</td>
</tr>
<tr><!--这是表格的第二行-->
<td>小明</td><!--这是表格的单元格(简单来说就是这一行的第1个格子)-->
<td>A市</td>
<td colspan="2">保密</td>
</tr>
<tr><!--这是表格的第三行-->
<td>大明</td><!--这是表格的单元格(简单来说就是这一行的第1个格子)-->
<td rowspan="2">C市</td>
<td>男</td>
<td>97</td>
</tr>
<tr><!--这是表格的第四行-->
<td>二明</td><!--这是表格的单元格(简单来说就是这一行的第1个格子)-->
<td>女</td>
<td>97</td>
</tr>
</table>>
</body>
</html>