今天我们说下HTML的表格结构标签，包含<thead></thead>、<tbody></tbody>等。
- <thead></thead> 用于定义表格的头部，<thead>内部必须包含<tr>标签，一般是位于第一行。头部区域
- <tbody></tbody>用于定义表格的主体，主要用于放数据本体。主题区域。
- 以上两个标签都是放在<table></table>标签中
先看下效果:
然后看下代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table align="center" width="500" height="250" border="1">
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>sex</th>
<th>图片</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>李世民</td>
<td>男</td>
<td><img src="HTML5.jpeg" width="200" height="150"></td>
</tr>
<tr>
<td>2</td>
<td>秦始皇</td>
<td>男</td>
</tr>
<tr>
<td>3</td>
<td>武则天</td>
<td>女</td>
</tr>
</tbody>
</table>
</body>
</html>
在<body>中，我们看到层次分明的三个部分
首先是页面整体配置:
然后是head部分
接下来是tbody部分
接下来说下合并单元格
特殊情况下，可以把多个单元格合并为一个单元格，只需要了解简单合并单元格就可以了。
- 合并单元格方式：跨行合并:rowspan="合并单元格的个数"跨列合并:colspam="合并单元格的个数"
- 目标单元格
- 合并单元格的步骤
- 跨行合并跨列合并
综上显示:
目标单元格:
跨行:最上侧单元格为目标单元格，写合并代码
跨列:最左侧单元格为目标单元格，写合并代码
首先，需要先确定是跨行还是跨列合并
其次，找到目标单元格，写上合并方式=合并的单元格数量，比如 <td colspan="2"></td>
最后，删除多余的单元格
先创建一个3x3的单元格，代码如下:
对应代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<h1>今天我们学习合并单元格</h1>
<body>
<h3>首先，我们先创建一个3x3的单元格</h3>
<table align="left" width="500" height="250" border="1" cellspacing="0">
<thead>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>
按照上面的代码试了一下，发现不行，重新写了测试代码
先看样式:
然后进行单元格合并:
为啥我的是这样呢，是准备合并第一行的第二列和第三列数据
先看下代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table width=500 height=200 border="1" cellspacing="0">
<tr>
<td></td>
<td colspan="2"></td>
<!--需要删除合并后多余的表格-->>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
发现是还没有删除第三行的代码，格子给挤出去了。现在看就好了
我们看下全部代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table width=500 height=200 border="1" cellspacing="0">
<tr>
<td></td>
<td colspan="2"></td>
<!--需要删除合并后多余的表格-->>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
好的，今天就先到这里，大家下周再见
,
