Html中的表格、Table和div，表格页面、员工登记表、Div代码

Table和div

Table 表格
Web1班名册
学号姓名性别年龄
01 张三男 21
02 李四女 20
…
人数合计： 60

表格的组成部分：标题表头主体表尾
table： 定义一个表格
caption： 定义表格的标题
thead ：定义表头的部分
tbody ：定义表格的主体（数据）部分
tfoot ：定义表尾，一般来显示汇总信息

tr ：定义一行
th、 td 来定义数据项（单元格） th一般用于表头，有加粗的样式。
td 一般用于主体部分，没有加粗的样式
td ：rowspan 和 colspan 分别定义了单元格跨行的行数，跨列的列数

cellspacing= 间距
cellpadding= 边距

div

定义一个分块（division）

特点：在新的一行显示块级标签

块级标签与行内标签的区别：
块级标签占满行行内标签会按照顺序从左到右依次排列

块级标签：h1-h6 p ul ol li div table dl form
行内标签：span a br lable i em
行内块：img input

块级元素的特点：display:block

每个块都是从新的一行开始，后面的元素会另起一行（霸道）
元素的宽度，高度，行高，内外边距都可以设置的
如果不设置元素的宽度，是它父容器的100%，除非你给他设定高度

行内元素的特点： display:inline

和其他的元素都在一行上
不能设置元素的宽度，高度，行高，内外边距
元素的宽度是它包含文字或图片的宽度，不能改变

行内块元素的特点： display:inline-block

和其他的元素都在一行上
宽度，高度，行高，内外边距都可以设置的

表格页面

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><table border="1" cellspacing="0" cellpadding="10" align="center"><caption>web1班名册</caption><thead><tr><th>学号</th><th>姓名</th><th>性别</th><th>年龄</th></tr></thead><tbody><tr><td>01</td><td>李四</td><td>女</td><td>20</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>60</td></tr></tfoot></table></body>
</html>

DIV

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>div</title></head><style type="text/css">img{width: 200px;height: 200px;}</style><body><div style="width: 900px;height: 900px;background-color:antiquewhite;"><h2>鹅鹅鹅</h2><p>曲项向天歌</p><img src="./img/a.jpg" ></div><div style="width: 200px;height: 200px;background-color:antiquewhite;"></div><div style="width: 200px;height: 200px;background-color:antiquewhite;"></div><span style="width: 200px;height: 200px;">赤橙黄绿青蓝紫</span><span>赤橙黄绿青蓝紫</span><i>内容</i><em>内容</em></body>
</html>

员工入职登记表

 <!DOCTYPE html>
<html><head><meta charset="utf-8"><title>案例</title></head><body><table border="1" cellspacing="0" cellpadding="10" align="center"><caption>新员工入职登记表</caption><tbody><tr><td>姓   名</td><td></td><td>性   别</td><td><input type="radio" name="sex"> 男<input type="radio" name="sex"> 女</td><td>出生年月</td><td> </td><td rowspan="5">一寸近照<br><input type="file"/></td>   </tr><tr><td>曾用名</td><td>   </td><td>体  重</td><td>   </td><td>升  高</td><td>     </td>   </tr><tr><td>民  族</td><td> <select><option value ="h">汉族</option><option value ="m">苗族</option><option value ="hui">回族</option></select></td><td>籍  贯</td><td>   </td><td>婚姻状况</td><td> <input type="radio" name="sex"> 未婚<input type="radio" name="sex"> 已婚</td>  </tr><tr><td>政治面貌</td><td><input type="radio" name="sex"> 团员<input type="radio" name="sex"> 群众</td><td>健康状况</td><td>   </td><td>血   型</td><td><input type="radio" name="sex"> A<input type="radio" name="sex"> B</td>   </tr><tr><td>身份证号码</td><td colspan="5"></td></tr></table></head><body></body>
</html>