一、本课目标
- 掌握表格的基本结构
- 熟练的使用跨行、跨列属性
为什么使用表格？
- 简单通用
- 结构稳定
基本结构：
- 行
- 列
- 单元格
二、表格的基本语法
image.png
示例代码如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table border="2">
<tr>
<th>第一行第一列的标题</th>
<th>第一行第二列的标题</th>
<th>第一行第三列的标题</th>
</tr>
<tr>
<td>第一行第一列的单元格</td>
<td>第一行第二列的单元格</td>
<td>第一行第三列的单元格</td>
</tr>
</table>
</body>
</html>
结果如下：
image.png
分析：标题加粗的原因是使用了th标签。tr标签代表行。
三、表格的跨行和跨列
3.1跨行
image.png
示例代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table border="1">
<tr>
<td colspan="2">学生成绩</td>
</tr>
<tr>
<td>语文</td>
<td>98</td>
</tr>
<tr>
<td>数学</td>
<td>95</td>
</tr>
</table>
</body>
</html>
结果：
image.png
3.2跨列
image.png
示例代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table border="1">
<tr>
<td rowspan="2">张三</td>
<td>语文</td>
<td>98</td>
</tr>
<tr>
<td>数学</td>
<td>95</td>
</tr>
</table>
</body>
</html>
结果：
image.png
3.3表格的跨行和跨列
image.png
代码如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table border="1">
<tr>
<td colspan="3">学生成绩</td>
</tr>
<tr>
<td rowspan="2">张三</td>
<td>语文</td>
<td>98</td>
</tr>
<tr>
<td>数学</td>
<td>95</td>
</tr>
<tr>
<td rowspan="2">李四</td>
<td>语文</td>
<td>91</td>
</tr>
<tr>
<td>数学</td>
<td>92</td>
</tr>
</table>
</body>
</html>
结果：
image.png
3.4总结
image.png
