前端：表单以及BFC详解

最新推荐文章于 2024-06-02 23:26:49 发布

朱加浩 Samon

最新推荐文章于 2024-06-02 23:26:49 发布

阅读量150

点赞数 2

文章标签： html5 前端 css

本文链接：https://blog.csdn.net/ZJH_are/article/details/125790972

版权

表格的创建:之前表格是用来布局的,现在只用来展示数据
表格中的计算属性:像生活中的安检在每个单元格中进行检索内容,内容较多就会分配更多的空间给到当前单元格

一:表格创建的标签
1.table 表示表格
2.tr 表示表格中的行
3.td 表示表格中的列(单元格)

二:表格中的HTML属性
1.width/height/border
2.bordercolor/bgcolor
3.设置对齐方式
- 水平方向对齐 align:left、right、center
- table、tr、td都可以控制水平对齐方式
- 垂直方向对齐 valign:top、bottom、middle
- table设置没有效果、tr、td控制行和列的垂直方向
4.设置单元格的间距显示(父级)
- cellspacing 单元格与单元格之间的间距
- cellpadding 单元格与内容之间的间距
5.表格中的行列合并(重点、难点)
- 列合并 colspan
- 行合并 rowspan
- span属性:表示选择几个属性值需要设置数字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!-- 创建一行一列的表格 -->
    <table width="500" height="200" border="1" cellspacing="0">
        <tr align="center">
            <td>姓名</td>
            <td colspan="2">性别/年龄</td>
            <!-- <td>年龄</td> -->
        </tr>
        <tr align="center">
            <td>志强</td>
            <td>不详</td>
            <td rowspan="2">18</td>
        </tr>
        <tr align="center">
            <td>少杰</td>
            <td>不详</td>
            <!-- <td>18</td> -->
        </tr>
    </table>
</body>
</html>

效果图：

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- <style>
        table{
            color: red
        }
    </style> -->
</head>
<body text="red">
    <table width="635" height="362" border="1" cellspacing="0" bordercolor="red">
        <tr align="center">
            <td width="110">会员姓名</td>
            <td></td>
            <td width="110">出生日期</td>
            <td></td>
        </tr>
        <tr align="center">
            <td>身份证号</td>
            <td colspan="3"></td>
        </tr>
        <tr align="center">
            <td>通信地址</td>
            <td colspan="3"></td>
        </tr>
        <tr align="center">
            <td>联系电话</td>
            <td colspan="3"></td>
        </tr>
        <tr align="center">
            <td>会员卡号</td>
            <td colspan="3"></td>
        </tr>
    </table>
</body>
</html>

表格中的HTML标签
1.表格的标题 caption 要写在table的里面
2.表格的列标题 th(作用和td是一样的) 默认加粗和居中显示
3.表格的列分组:可以选择到几列分为一组进行设置宽度
- 第一种可以使用单标签 <col span width>
- 第二种可以使用双标签 <colgroup span width></colgroup>
- 注意:表格列分组的时候只能使用span和width属性
4.表格的行分组
- thead 表格的头部
- tbody 表格的主体
- tfoot 表格的底部
- tbody默认有一个,设置无数个,thead和tfoot只能有一个并且是成对出现
5.分割线 rules="groups/rows/cols/all/none"
- all 表示所有的线都有
- groups 表示根据行列分组

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <table width="500" height="200" border="1" cellspacing="0" rules="none">
        <caption>班级靓仔的信息</caption>
        <colgroup span="2" width="100"></colgroup>
        <thead>
            <tr align="center">
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody>
            <tr align="center">
                <td>志强</td>
                <td>不详</td>
                <td>18</td>
            </tr>
            <tr align="center">
                <td>少杰</td>
                <td>不详</td>
                <td>18</td>
            </tr>
        </tbody>
        <tfoot>
            <tr align="center">
                <td>总计</td>
                <td>分类</td>
                <td>平均</td>
            </tr>
        </tfoot>
    </table>
</body>

表格中CSS的相关属性
1.单元格与单元格之间的间距(cellspacing)
- 属性:border-spacing
- 属性值:数值加单位(0可以不用设置单位)

2.合并相邻单元格的边框
- 属性:border-collapse(合并)
- 属性值:collapse(常用)/separate(分开)

3.单元格无内容时候显示方式
- 属性:empty-cells
- 属性值:show(显示)/hide(隐藏)

4.表格中的计算属性
- 属性:table-layout
- 属性值:auto(自动)/fixed(固定没有计算属性)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        table{
            width: 500px;
            height: 300px;
            border: 1px solid #000;
            /* border-spacing: 0;
            border-collapse: collapse; */
            /* empty-cells: hide */
            table-layout: fixed
        }
        td{
            border: 1px solid #000
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <td>姓名</td>
            <td>性别</td>
            <td>年龄</td>
        </tr>
        <tr>
            <td>志强你好帅 假的</td>
            <td>不详</td>
            <td>180</td>
        </tr>
        <tr>
            <td></td>
            <td>不详</td>
            <td>18</td>
        </tr>
    </table>
</body>
</html>

案例-表格的制作：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/table.css">
</head>
<body>
    <table class="table1">
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
    <table class="table2">
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
    <table class="table3">
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
    <table class="table4">
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
    <table class="table5">
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
    <table class="table6">
        <tr>
            <td> &nbsp;</td>
            <td>&nbsp; </td>
            <td>&nbsp; </td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td></td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
    </table>
</body>
</html>

案例-坤坤的简历制作：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        table{
            width: 600px;
            height: 700px;
            border: 1px solid #000;
            margin: 100px auto;
            border-spacing: 0;
            border-collapse: collapse
        }
        td{
            border: 1px solid #000;
            text-align: center;
        }
        img{
            display: block
        }
    </style>
</head>
<body>
    <table>
        <colgroup span="4" width="121"></colgroup>
        <tr>
            <td height="55">姓名</td>
            <td>坤坤</td>
            <td>性别</td>
            <td>男</td>
            <td rowspan="3">
                <img src="images/kk.jpg" alt="">
            </td>
        </tr>
        <tr>
            <td height="55">出生年月</td>
            <td>1998年1月</td>
            <td>名族</td>
            <td>汉</td>
        </tr>
        <tr>
            <td height="55">籍贯</td>
            <td></td>
            <td>学历</td>
            <td>本</td>
        </tr>
        <tr>
            <td>毕业院校</td>
            <td>千锋教育</td>
            <td>专业</td>
            <td colspan="2">唱跳rap</td>
            
        </tr>
        <tr>
            <td>政治面貌</td>
            <td>群众</td>
            <td>家庭住址</td>
            <td colspan="2"></td>
        </tr>
        <tr>
            <td>健康状况</td>
            <td>健康</td>
            <td>联系电话</td>
            <td colspan="2"></td>
            
        </tr>
        <tr>
            <td>获得职业证书</td>
            <td colspan="4"></td>
            
        </tr>
        <tr>
            <td>自我评价</td>
            <td  colspan="4"></td>
            
        </tr>
        <tr>
            <td>工作经历</td>
            <td  colspan="4"></td>
            
        </tr>
    </table>
</body>
</html>

表单基础

案例 表单的制作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        fieldset{
            width: 300px;
            height: 400px;
            margin: 0 auto
        }
        legend{
            text-align: center
        }
        textarea{
            width: 290px;
            height: 100px;
            resize: none
        }
    </style>
</head>
<body>
    <form action="">
        <!-- 方框盒子 -->
        <fieldset>
            <legend>志强同学的个人相亲表</legend>
            姓名: <input type="text" placeholder="请输入姓名"> <br>
            密码: <input type="password" placeholder="请输入银行卡密码"> <br>
            性别: 
                <label for="man">
                    <input type="radio" name="sex" id="man">男
                </label>
                <label for="woman">
                    <input type="radio" name="sex" id="woman">女
                </label> <br>
            爱好: <input type="checkbox">唱跳rap
            <input type="checkbox">打篮球
            <input type="checkbox" checked>洗脚
            <input type="checkbox">穿背带裤
            <input type="checkbox" disabled>敲代码 <br>
            <select>
                <option>请选择你的籍贯</option>
                <option>广东</option>
                <option>江西</option>
                <option>湖南</option>
                <option>朝鲜</option>
                <option>香港</option>
            </select> <br>
            <textarea></textarea>
            <input type="file" multiple>
        </fieldset>
    </form>
</body>
</html>

朱加浩 Samon

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端：表单以及BFC详解

表格中的计算属性像生活中的安检在每个单元格中进行检索内容,内容较多就会分配更多的空间给到当前单元格。-table设置没有效果、tr、td控制行和列的垂直方向。-属性值collapse(常用)/separate(分开)-属性值auto(自动)/fixed(固定没有计算属性)-注意表格列分组的时候只能使用span和width属性。2.表格的列标题th(作用和td是一样的)默认加粗和居中显示。-属性border-collapse(合并)-属性值show(显示)/hide(隐藏)...
复制链接

扫一扫