Table表格
表格的组成部分:标题、头部、主体、底部
table:定义一个表格
caption:定义表格的标题
thead:头部部分
tbody:定义表格的主体(数据)部分·
tfoot:定义表尾,一般显示汇总信息
tr 定义一行
th td 来定义数据项(单元格) th 一般用于表头,有加粗的样式。
td 一般用于主体部分,没有加粗的样式
td rowspan和colspan 分别定义了单元格的行的行数,跨列的列数。
cellpadding:数据与表格之间的距离
cellspacing:表格与表格之间的距离
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../exercise/css/reset.css">
<title>Document</title>
<style>
caption{
font: 30px bold;
margin-bottom: 20px;
}
table{
width: 60%;
border: 1px solid black;
margin: 0 auto;
border-collapse: collapse;
}
th{
border: 1px solid black;
height: 50px;
text-align: center;
line-height: 50px;
vertical-align: middle;
}
</style>
</head>
<body>
<table>
<caption>新员工入职登记表</caption>
<tr>
<th>姓名</th>
<th></th>
<th>性别</th>
<th><form action="target.html">
<input type="radio" name="hello" value="a" checked>男
<input type="radio" name="hello" value="b">女
</form></th>
<th>出生日期</th>
<th></th>
<th rowspan="5" class="last">一寸近照<form action="target.html">
<input type="file" name="file" id="file1">
</form></th>
</tr>
<tr>
<th>曾用名</th>
<th></th>
<th>体重</th>
<th></th>
<th>身高</th>
<th></th>
</tr>
<tr>
<th>民族</th>
<th><form action="target.html">
<select name="haha">
<option selected value="i">汉族</option>
<option value="ii">苗族</option>
<option value="iii">回族</option>
</select>
</form></th>
<th>籍贯</th>
<th></th>
<th>婚姻状况</th>
<th><form action="target.html">
<input type="radio" name="hello" value="a">已婚
<input type="radio" name="hello" value="b" checked>未婚
</form></th>
</tr>
<tr>
<th>政治面貌</th>
<th><form action="target.html">
<input type="radio" name="hello" value="a">党员
<input type="radio" name="hello" value="b" checked>团员
</form></th>
<th>健康状况</th>
<th></th>
<th>血型</th>
<th><form action="target.html">
<input type="radio" name="hello" value="a" checked>A
<input type="radio" name="hello" value="b">B
<input type="radio" name="hello" value="b">AB
</form></th>
</tr>
<tr>
<th>身份证号码</th>
<th colspan="5"></th>
</tr>
</table>
</body>
</html>