web前端:table表格和div

   日期:2020-08-26     浏览:98    评论:0    
核心提示:Table表格表格的组成部分:标题、表头、主体、表尾Table:定义一个表格Caption:定义表格的标题Thead:表头部分Tbody:定义表格的主体(数据)部分·Tfoot:定义表尾,一般显示汇总信息Tr 定义一行Th td 来定义数据项(单元格) th 一般用于表头,有加粗的样式。Td 一般用于主体部分,没有加粗的样式Td rowspan和colspan 分别定义了单元格的行的行数,跨列的列数。Cellpadding:数据与表格之间的距离Cellspacing:表格与表格之间

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

和其他的元素在一行上
宽度、高度、行高、内外边距都可以设置的
 
打赏
 本文转载自:网络 
所有权利归属于原作者,如文章来源标示错误或侵犯了您的权利请联系微信13520258486
更多>最近资讯中心
更多>最新资讯中心
0相关评论

推荐图文
推荐资讯中心
点击排行
最新信息
新手指南
采购商服务
供应商服务
交易安全
关注我们
手机网站:
新浪微博:
微信关注:

13520258486

周一至周五 9:00-18:00
(其他时间联系在线客服)

24小时在线客服