web前端：table表格和div

最新推荐文章于 2024-08-01 11:11:00 发布

H先森·

最新推荐文章于 2024-08-01 11:11:00 发布

阅读量1.5k

点赞数 4

分类专栏：学习笔记文章标签： html

本文链接：https://blog.csdn.net/llp_1230/article/details/108197946

版权

学习笔记专栏收录该内容

26 篇文章 0 订阅

订阅专栏

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

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

H先森·

关注

4
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

web前端：table表格和div

Table表格

div

块级标签 与 行内标签的区别

块级标签与行内标签的区别