今天分享一个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>