HTML table和div
5.1 表格
软件1810班名册
|
学号 |
姓名 |
性别 |
年龄 |
|
01 |
张三 |
男 |
21 |
|
02 |
李四 |
女 |
20 |
|
…… |
|
|
|
|
人数合计 |
32 |
||
表格的组成部分：标题、表头、主体、表尾
<table>定义一个表格
<caption>定义表格的标题
<thead>定义表头部分
<tbody>定义表格主体（数据）部分
<tfoot>定义表尾，一般显示汇总信息等。
<tr>定义一行
<th><td>定义一个数据项（单元格），<th>一般用于表头，有加粗样式，<td>一般用于表格主体部分，没有加粗样式
<td>的rowspan和colspan分别定义单元格跨行的行数、跨列的列数.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="5">
<caption>软件1810班名册</caption>
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>01</td>
<td>张三</td>
<td>男</td>
<td>22</td>
</tr>
<tr>
<td>02</td>
<td>李四</td>
<td>女</td>
<td>21</td>
</tr>
<tr>
<td>03</td>
<td>王五</td>
<td>男</td>
<td>20</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">合计人数</td>
<td>32</td>
</tr>
</tfoot>
</table>
</body>
</html>
5.2 div
<div>标签定义一个分块（division）
<div style="width: 300px;height: 200px; </div>
显示特点：在新的一行进行显示。块级标签。
块级元素和内联元素的区别：
块级元素占满行，而内联元素会按照顺序从左至右依次排列
浙公网安备 33010602011771号