新人笔记3，table和div

Table和div

Table 表格

<table border="1" cellspacing="0" sellspacing="10">
			<caption>-web一班名册</caption>
			<thead>
				<tr>
					<th>学号</th>
					<th>性别</th>
					<th>姓名</th>
					<th>年龄</th>
				</tr>
				<tr>
					<td>01</td>
					<td>张三</td>
					<td>男</td>
					<td>21</td>
				</tr>
				<tr>
					<td>02</td>
					<td>李四</td>
					<td>女</td>
					<td>20</td>
				</tr>
				</thead>
			</tbody>
			<tfoot>
				<tr>
					<td colspan="3">人数合计</td>
					<td>60</td>
				</tr>
			</tfoot>
		</table>

1.表格的组成部分：标题 表头 主体 表尾

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

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

cellspacing：间距
cellpadding：边距

div

1.div 定义一个分块 （division）

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

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

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

1.块级元素的特点：display:block

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

2.行内元素的特点： display:inline

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

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

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

这是我的作业：

<form action="#" method="get">
			<table border="1" cellspacing="0" cellpadding="10" align="center" >
				<caption>新员工入职登记表</caption>
				<tbody>
				<tr>
					<td>姓名</td>
					<td></td>
					<td>性别</td>
					<td>
						<input type="radio" name="one"/>男
						<input type="radio" name="one"/>女
					</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 ="j">苗族</option>
								<option value ="k">傣族</option>
							</select>
						</td>
						<td>籍贯</td>
						<td></td>
						<td>婚姻状况</td>
						<td>
							<input type="radio" name="two"/>已婚
							<input type="radio" name="two"/>未婚
						</td>
					</tr>
					<tr>
						<td>政治面貌</td>
						<td>
							<input type="radio" name="there"/>团员
							<input type="radio" name="there"/>党员
						</td>
						<td>健康状况</td>
						<td></td>
						<td>血型</td>
						<td>
							<input type="radio" name="XUE"/>A
							<input type="radio" name="XUE"/>B
							<input type="radio" name="XUE"/>C
						</td>	
					</tr>
					
						<tr>
							<td>身份证号码</td>
							<td colspan="5"></td>
							
						</tr>
					
				</tbody>
			</table>
		</form>

运行如下：