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">
<title>阶段项目</title>
</head>
<body>
<form>
<table border="1" cellspacing="0" cellpadding="10" align="center" width="1000px">
<caption><h2>新员工入职登记表</h2></caption>
<thead>
<tr>
<th>姓名</th>
<td></td>
<th>性别</th>
<td>
<input type="radio" name="q">男
<input type="radio" name="q">女<br>
</td>
<th>出生日期</th>
<td></td>
<td rowspan="5" align="center"><input type="file" ></td>
</tr>
<tr>
<th>曾用名</th>
<td></td>
<th>体重</th>
<td></td>
<th>身高</th>
<td></td>
</tr>
<tr>
<th>民族</th>
<td align="center">
<select>
<option>汉</option>
<option>回</option>
<option>苗</option>
</select>
</td>
<th>籍贯</th>
<td></td>
<th>婚姻状况</th>
<td><input type="radio" name="sex">已婚
<input type="radio" name="sex">未婚<br></td>
</tr><tr>
<th>政治面貌</th>
<td><input type="radio" name="w">党员
<input type="radio" name="w">团员</td>
<th>健康状况</th>
<td></td>
<th>血型</th>
<td>
<input type="radio" name="a">A
<input type="radio" name="a">B
<input type="radio" name="a">AB
</td>
</tr>
<tr>
<th>身份证号码</th>
<td colspan="5"></td>
</tr>
</thead>
</table>
</form>
</body>
</html>
div
定义一个分块
在新的一行显示,块级标签
块级标签 与 行内标签的区别块级标签占满行 行内标签会按照从左到右的顺序依次排列
块级标签
h1-h6、p、ul、ol、li、div、table、dl、form
行内标签
span、a、br、label、i、em
行内块标签
img、input
块级元素的特点:display ;block
从新的一行开始,后面的元素会另起一行(霸道)
元素的宽度、高度、行高、内外边距都可以设置的
如果不设置元素的宽度,是它父容器的100%,除非你给他设置宽度
行内元素的特点:display:inline
和其他的元素在一行上
不能设置元素的宽度、高度、行高、内外边距
元素的宽度是他包含文字或者图片的宽度,不能改变
行内块元素的特点:display:inline-block
和其他的元素在一行上
宽度、高度、行高、内外边距都可以设置的
原创:https://www.panoramacn.com
源码网提供WordPress源码,帝国CMS源码discuz源码,微信小程序,小说源码,杰奇源码,thinkphp源码,ecshop模板源码,微擎模板源码,dede源码,织梦源码等。专业搭建小说网站,小说程序,杰奇系列,微信小说系列,app系列小说
免责声明,若由于商用引起版权纠纷,一切责任均由使用者承担。
您必须遵守我们的协议,如果您下载了该资源行为将被视为对《免责声明》全部内容的认可-> 联系客服 投诉资源www.panoramacn.com资源全部来自互联网收集,仅供用于学习和交流,请勿用于商业用途。如有侵权、不妥之处,请联系站长并出示版权证明以便删除。 敬请谅解! 侵权删帖/违法举报/投稿等事物联系邮箱:2640602276@qq.com未经允许不得转载:书荒源码源码网每日更新网站源码模板! » web前端:table表格和div
关注我们小说电影免费看关注我们,获取更多的全网素材资源,有趣有料!120000+人已关注
评论抢沙发