表格:table、tr、td的使用
一、表格语法
-
表格标签
<table></table>
类似于 Excel 中的表格,是一个行、列组成的二维表格。 -
其中
<thead>
表示表格头,<tbody>
表示表格的主体 -
<tr>
表示一行 -
<th>
表示表格头<thead>
中的一列 -
<td>
表示表格中<tbody>
的一列
<table>
<thead>
<tr>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>
二、代码实战
代码的详细解读,可以参考视频教程。
新建 html 文件 10-table.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>表格table</title>
</head>
<body>
<table style="width:50%;" border="1" cellspacing=0>
<thead>
<tr>
<th>姓名</th>
<th>学校</th>
<th>年龄</th>
<th colspan="2">地址</th>
<!--<th>具体小区</th>-->
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td rowspan="2">中华学校</td>
<td>14</td>
<td>北京</td>
<td>京京京-01</td>
</tr>
<tr>
<td>李四</td>
<!--<td>中华学校</td>-->
<td>15</td>
<td>北京</td>
<td>北北北-01</td>
</tr>
<tr>
<td>王五</td>
<td>北京中学</td>
<td>14</td>
<td>北京</td>
<td>北京小区-01</td>
</tr>
</tbody>
</table>
</body>
</html>