一、本課目標(biāo)
- 掌握表格的基本結(jié)構(gòu)
- 熟練的使用跨行莺债、跨列屬性
為什么使用表格滋觉？
- 簡單通用
- 結(jié)構(gòu)穩(wěn)定
基本結(jié)構(gòu)：
- 行
- 列
- 單元格
二、表格的基本語法
image.png
示例代碼如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table border="2">
<tr>
<th>第一行第一列的標(biāo)題</th>
<th>第一行第二列的標(biāo)題</th>
<th>第一行第三列的標(biāo)題</th>
</tr>
<tr>
<td>第一行第一列的單元格</td>
<td>第一行第二列的單元格</td>
<td>第一行第三列的單元格</td>
</tr>
</table>
</body>
</html>
結(jié)果如下：
image.png
分析：標(biāo)題加粗的原因是使用了th標(biāo)簽齐邦。tr標(biāo)簽代表行椎侠。
三、表格的跨行和跨列
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">學(xué)生成績</td>
</tr>
<tr>
<td>語文</td>
<td>98</td>
</tr>
<tr>
<td>數(shù)學(xué)</td>
<td>95</td>
</tr>
</table>
</body>
</html>
結(jié)果：
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>數(shù)學(xué)</td>
<td>95</td>
</tr>
</table>
</body>
</html>
結(jié)果：
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">學(xué)生成績</td>
</tr>
<tr>
<td rowspan="2">張三</td>
<td>語文</td>
<td>98</td>
</tr>
<tr>
<td>數(shù)學(xué)</td>
<td>95</td>
</tr>
<tr>
<td rowspan="2">李四</td>
<td>語文</td>
<td>91</td>
</tr>
<tr>
<td>數(shù)學(xué)</td>
<td>92</td>
</tr>
</table>
</body>
</html>
結(jié)果：
image.png
3.4總結(jié)
image.png
