HTMLCSS学习笔记（十七）——表格、表单知识补充

最新推荐文章于 2024-11-09 17:11:29 发布
最新推荐文章于 2024-11-09 17:11:29 发布
阅读量152 收藏
点赞数
分类专栏： HTML\CSS 文章标签： html5 html css3 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45268602/article/details/108037842
版权

表格补充

  1. 数据行分组
<thead></thead><!-- 表头 -->
<tbody></tbody><!-- 表体 一个表格可以有多个表体 -->
<tfoot></tfoot><!-- 表尾 -->
  1. 数据列分组
<colgroup span="value"></colgroup>
	<!--span属性为把几列分为一组-->
  1. 列标题
`<th></th>`
  1. 表格标题
<caption></caption>

表格CSS补充

  1. 单元格间距：border-spacing:value;
    说明：单元格间距(该属性必须给table添加) 表示单元格边框之间的距离， 不可取负值

  2. 合并相邻单元格边框：border-collapse:separate/collapse;
    说明：合并相邻单元格边框 (该属性必须给table添加) separate(边框分开)默认值； collapse(边框合并)

  3. 无内容时单元格的设置：empty-cells:show/hide;
    说明：定义当单元格无内容时，是否显示该单元格的边框区域；show：显示 ；hide：隐藏；

  4. 显示单元格行和列的算法(加快运行的速度)： table-layout:auto/fixed;

一个demo了解表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        table tr td{
            width: 100px;
        }
        caption{
            color: black;
            font-weight: bold;
        }
        thead{
            color: red;
        }
        tbody{
            color: green;
            background: burlywood;
        }
        tfoot{
            color: blue;
        }
        colgroup{
            background: brown;
        }

    </style>
</head>
<body>
    <table border="1">
        <caption>
            表格标题
        </caption>
        <colgroup span="2">
        </colgroup>
        <thead>
            <tr>
                <th>表头</th>
                <th>表头</th>
                <th>表头</th>
                <th>表头</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>表格</td>
                <td>表格</td>
                <td>表格</td>
                <td>表格</td>
            </tr>
            <tr>
                <td>表格</td>
                <td>表格</td>
                <td>表格</td>
                <td>表格</td>
            </tr>
        </tbody>
        <tbody>
            <tr>
                <td>表格</td>
                <td>表格</td>
                <td>表格</td>
                <td>表格</td>
            </tr>
            <tr>
                <td>表格</td>
                <td>表格</td>
                <td>表格</td>
                <td>表格</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>表格</td>
                <td>表格</td>
                <td>表格</td>
                <td>表格</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

在这里插入图片描述

表格练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .table_1{
            border:1px solid #00f;
            width: 800px;
            border-collapse: collapse;
        }
        /* tr{
            border-bottom: 1px solid #000;
        } */
        .table_1 thead{
            background: #0047E1;
            color: #fff;
        }
        .table_1 tbody{
            text-align: center;
        }
        .table_1 tbody .td_h{
            text-align: left;
            background: #7E9DE5 !important;
        }
        /* 偶数行 */
        .table_1 tbody tr:nth-child(even){
            background: #fff;
        }
        /* 奇数行 */
        .table_1 tbody tr:nth-child(odd){
            background: #FEF0F5;
        }

        .table_2{
            border:1px solid #00f;
            width: 800px;
            /* border-collapse: collapse; */
            border-spacing: 10px;
            /* empty-cells: show; */
            empty-cells: hide;
        }
        
        .table_2 td{
            border: 1px solid #0f0;
            background: #f00;
        }
        .table_2 thead{
            background: #0047E1;
            color: #fff;
        }
        .table_2 tbody{
            text-align: center;
        }
        .table_2 tbody .td_h{
            text-align: left;
        }


        .table_3{
            border:1px solid #00f;
            width: 400px;
            /* border-collapse: collapse; */
            border-spacing: 10px;
            /* empty-cells: show; */
            empty-cells: hide;
            table-layout: fixed;/*固定列宽*/
        }
        /* tr{
            border-bottom: 1px solid #000;
        } */
        .table_3 td{
            border: 1px solid #0f0;
            background: #f00;
        }
        .table_3 thead{
            background: #0047E1;
            color: #fff;
        }
        .table_3 tbody{
            text-align: center;
        }
        .table_3 tbody .td_h{
            text-align: left;
        }
    </style>
</head>
<body>
    
    <table class="table_1">
        <caption>
            2007年全国非邮发报刊联合征订目录
        </caption>
        <thead>
            <tr>
                <th>代号</th>
                <th>刊名</th>
                <th>刊期</th>
                <th>出版地</th>
                <th>年定价</th>
                <th>CH号</th>
            </tr>
        </thead>
        <tbody>
            <tr class="td_h">
                <td colspan="6">
                    A马列主义毛泽东思想
                </td>
            </tr>
            <tr>
                <td>0001</td>
                <td>马克思主义研究</td>
                <td>月刊</td>
                <td>北京</td>
                <td>144.0</td>
                <td>11-3911</td>
            </tr>
            <tr>
                <td>0002</td>
                <td>马克思主义研究</td>
                <td>月刊</td>
                <td>北京</td>
                <td>144.0</td>
                <td>11-3911</td>
            </tr>
            <tr>
                <td>0003</td>
                <td>马克思主义研究</td>
                <td>月刊</td>
                <td>北京</td>
                <td>144.0</td>
                <td>11-3911</td>
            </tr>
            <tr>
                <td>0004</td>
                <td>马克思主义研究</td>
                <td>月刊</td>
                <td>北京</td>
                <td>144.0</td>
                <td>11-3911</td>
            </tr>
        </tbody>
        <tbody>
            <tr class="td_h">
                <td colspan="6">
                    B哲学.美学.心理学.宗教
                </td>
            </tr>
            <tr>
                <td>0004</td>
                <td>马克思主义研究</td>
                <td>月刊</td>
                <td>北京</td>
                <td>144.0</td>
                <td>11-3911</td>
            </tr>
            <tr>
                <td>0004</td>
                <td>马克思主义研究</td>
                <td>月刊</td>
                <td>北京</td>
                <td>144.0</td>
                <td>11-3911</td>
            </tr>
            <tr>
                <td>0004</td>
                <td>马克思主义研究</td>
                <td>月刊</td>
                <td>北京</td>
                <td>144.0</td>
                <td>11-3911</td>
            </tr>
            <tr>
                <td>0004</td>
                <td>马克思主义研究</td>
                <td>月刊</td>
                <td>北京</td>
                <td>144.0</td>
                <td>11-3911</td>
            </tr>
            <tr>
                <td>0004</td>
                <td>马克思主义研究</td>
                <td>月刊</td>
                <td>北京</td>
                <td>144.0</td>
                <td>11-3911</td>
            </tr>
        </tbody>
    </table>


    <table class="table_2">
        <caption>
            2007年全国非邮发报刊联合征订目录
        </caption>
        <thead>
            <tr>
                <th>代号</th>
                <th>刊名</th>
                <th>刊期</th>
                <th>出版地</th>
                <th>年定价</th>
                <th>CH号</th>
            </tr>
        </thead>
        <tbody>
            <tr class="td_h">
                <td colspan="6">
                    A马列主义毛泽东思想
                </td>
            </tr>
            <tr>
                <td></td>
                <td>马克思主义研究</td>
                <td>&nbsp;</td>
                <td>北京</td>
                <td>144.0</td>
                <td>11-3911</td>
            </tr>
            <tr>
                <td>0002</td>
                <td></td>
                <td>月刊</td>
                <td>北京</td>
                <td>144.0</td>
                <td>11-3911</td>
            </tr>
            <tr>
                <td>0003</td>
                <td>马克思主义研究</td>
                <td></td>
                <td>北京</td>
                <td>144.0</td>
                <td>11-3911</td>
            </tr>
            <tr>
                <td>0004</td>
                <td>马克思主义研究</td>
                <td>月刊</td>
                <td></td>
                <td>144.0</td>
                <td>11-3911</td>
            </tr>
        </tbody>
        <tbody>
            <tr class="td_h">
                <td colspan="6">
                    B哲学.美学.心理学.宗教
                </td>
            </tr>
            <tr>
                <td>0004</td>
                <td>马克思主义研究</td>
                <td>月刊</td>
                <td>北京</td>
                <td>144.0</td>
                <td>11-3911</td>
            </tr>
            <tr>
                <td>0004</td>
                <td>马克思主义研究</td>
                <td>月刊</td>
                <td>北京</td>
                <td>144.0</td>
                <td>11-3911</td>
            </tr>
            <tr>
                <td>0004</td>
                <td>马克思主义研究</td>
                <td>月刊</td>
                <td>北京</td>
                <td>144.0</td>
                <td>11-3911</td>
            </tr>
            <tr>
                <td>0004</td>
                <td>马克思主义研究</td>
                <td>月刊</td>
                <td>北京</td>
                <td>144.0</td>
                <td>11-3911</td>
            </tr>
            <tr>
                <td>0004</td>
                <td>马克思主义研究</td>
                <td>月刊</td>
                <td>北京</td>
                <td>144.0</td>
                <td>11-3911</td>
            </tr>
        </tbody>
    </table>


    <table class="table_3">
        <caption>
            2007年全国非邮发报刊联合征订目录
        </caption>
        <thead>
            <tr>
                <th>代号</th>
                <th>刊名</th>
                <th>刊期</th>
                <th>出版地</th>
                <th>年定价</th>
                <th>CH号</th>
            </tr>
        </thead>
        <tbody>
            <tr class="td_h">
                <td colspan="6">
                    A马列主义毛泽东思想
                </td>
            </tr>
            <tr>
                <td>0001</td>
                <td>马克思主义研究马克思主义研究马克思主义研究</td>
                <td>月刊</td>
                <td>北京</td>
                <td>144.0</td>
                <td>11-3911</td>
            </tr>
            <tr>
                <td>0001</td>
                <td>马克思主义研究</td>
                <td>月刊</td>
                <td>北京</td>
                <td>144.0</td>
                <td>11-3911</td>
            </tr>
            <tr>
                <td>0001</td>
                <td>马克思主义研究</td>
                <td>月刊</td>
                <td>北京</td>
                <td>144.0</td>
                <td>11-3911</td>
            </tr>
            <tr>
                <td>0001</td>
                <td>马克思主义研究</td>
                <td>月刊</td>
                <td>北京</td>
                <td>144.0</td>
                <td>11-3911</td>
            </tr>
        </tbody>
        <tbody>
            <tr class="td_h">
                <td colspan="6">
                    B哲学.美学.心理学.宗教
                </td>
            </tr>
            <tr>
                <td>0004</td>
                <td>马克思主义研究</td>
                <td>月刊</td>
                <td>北京</td>
                <td>144.0</td>
                <td>11-3911</td>
            </tr>
            <tr>
                <td>0004</td>
                <td>马克思主义研究</td>
                <td>月刊</td>
                <td>北京</td>
                <td>144.0</td>
                <td>11-3911</td>
            </tr>
            <tr>
                <td>0004</td>
                <td>马克思主义研究</td>
                <td>月刊</td>
                <td>北京</td>
                <td>144.0</td>
                <td>11-3911</td>
            </tr>
            <tr>
                <td>0004</td>
                <td>马克思主义研究</td>
                <td>月刊</td>
                <td>北京</td>
                <td>144.0</td>
                <td>11-3911</td>
            </tr>
            <tr>
                <td>0004</td>
                <td>马克思主义研究</td>
                <td>月刊</td>
                <td>北京</td>
                <td>144.0</td>
                <td>11-3911</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

表单补充

  • 上传文件框：file

  • 提交多个：multiple=“multiple”

  • <fieldset></fieldset> 表单字段集
    说明：相当于一个方框，在字段集中可以包含文本和其他元素。该元素用于对表单中的元素进行分组并在文档中区别标出文本。fieldset元素可以嵌套，在其内部可以在设置多个fieldset对象。disa bled定义空间禁制可用；

  • <legend align="left/center/right/justify"></legend> 字段集对齐方式
    说明：legend元素可以在fieldset对象绘制的方框内插入一个标题。legend元素必须是fieldset内的唯一个元素。

  • <label for="绑定控件id名"></label>

表单练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        form{
            width: 800px;
            margin: 0 auto;
        }
        fieldset{
            /*border-left: 0;
            border-right: 0;
            border-bottom: 0;*/
            padding-left: 10px;
        }
    </style>
</head>
<body>
    <form action="">
        <fieldset>
            表单字段集
            <fieldset>
                表单字段集
                <legend>标题</legend>
            </fieldset>
            <legend>标题</legend>
        </fieldset>

        <p>
            <label for="">上传图片：</label>
            <input type="image" src="../images/头像.png">
        </p>
        <p>
            <label for="">上传单个文件：</label>
            <input type="file">
        </p>
        <p>
            <label for="">上传多个文件：</label>
            <input type="file" multiple>
        </p>
    </form>
</body>
</html>

在这里插入图片描述

粽子师兄
关注
专栏目录
CSS学习笔记05——CSS布局·定位+装饰
visionchyw的博客
06-16 318
CSS布局·定位+装饰
前端小白的HTML学习笔记——表格、列表和表单（依旧是熟悉的配方）
gettingtop的博客
10-30 241
一.表格 ​ 1.表格主要用来显示、展示数据。 ​ 2.基本组成：<table></table>定义表格标签；<tr></tr>行；<td></td>单元格。<th></th>表头单元格（表格第一行，里面内容居中加粗）。 <thead></thead>定义头部;<tbody><tbody>定义主体（加强语义，方便对表格主体渲染）。 ​ 3.属性
第七章:HTML网页中的表格与表单
小宫主的博客
10-26 3213
目录   1.HTML表格标签: 表格标签 表格语法: 表格样式 2.HTML表单基础 表单标签 表单组成 HTML表单元素 文本域及其标记 密码域 单选按钮： 复选框： 下拉列表： 多行文本域： 分组框： 3.HTML5表单新属性 自动完成属性：autocomplete 自动焦点属性：autofocus 4.HTML5表单输入类型 email类型： ...
html&css学习笔记——CSS2基础
weixin_61182303的博客
11-03 849
的位置，创建一个子元素（必须用 content 属性指定内容）。3.3选择器的优先级(权重)
html&css学习笔记——html4基础
weixin_61182303的博客
10-27 616
学习视频：尚硅谷前端入门html+css零基础教程，零基础前端开发html5+css3视频 P01-56（以下笔记为作者学习并参考尚硅谷相关学习资料整理）
web前端html5+css3学习笔记(5)——表格、表单
m0_52353966的博客
03-19 475
本篇学习表格和表单。本片学习了表格与表单，尤其是表单内标签多，属性多，不要记混了。
自己学习html+css的详细笔记
qq_53366282的博客
05-18 1844
目录 常用符号： 6 有序列表：ol>li 6 无序列表：ul>li 7 自定义列表：dl>dt+dd 7 图片标签： 7 表格： 8 表单from： 8 CSS： 9 CSS优先级： 9 CSS选择器 10 伪类选择器： 10 CSS文本属性 11 1. 字体大小 11 2. 颜色 11 3. 加粗&倾斜 11 4. 水平垂直居中 12 5. 文本间距 12 6. 首行缩进 12 7. 文本修饰 12 8. Transform大小写 13
HTML基础知识（六）——表格与表单
weixin_48683052的博客
10-15 170
一、表格 1、table标签 table布局是通过table标签来作为父容器展现 tr：表格行 table标签属性：border（边框）、cellspacing（单元格距离）、cellspacing（单元格间距） 2、表格标题：caption 3、表头：thead 4、th和td th：一般应用在表格头部分 td：作为表格主体内容部分单元格的表示。 二、表单 1、form标签常用属性 （1）action...
html+css学习笔记
hutongkoudemihu的博客
06-19 1030
HTML+CSS+Javascript=网页HTML:Hyper Text Markup language 超文本标记语言；定义网页中有什么。CSS:Cascading Style Sheets 层叠样式表；定义网页中的东西长什么样子。MarkDown:MD 文档格式标准 [toc]可以加目录w3c 万维网联盟，非盈利性的组织：w3c.org 为互联网提供各种标准XML 可扩展的标记语言：extension markup lanuage,用于定义文档结构的。html HTML是W3C组织定义的语言标准。HT
html基础知识（二）：表格和表单
qq_43479839的博客
06-12 226
一、表格和表单 1.1 表格和表单中的一些基础知识 1.1.1 表格的简单基础代码` <table align="center" border="1" width="500" height="100" cellpadding="0" cellspacing="0" background="img/1.jpg"> <!-- cellpadding="0"...
CSS学习笔记
YuKing_HONG的博客
10-17 1491
个人学习PINK老师课程的笔记。个人笔记写得不好，敬请见谅，如果有问题没关系，那是正常的。记错了欢迎指出了。
Web前端_HTML5（新增type类型）
2301_80241120的博客
11-06 247
【代码】Web前端_HTML5（新增type类型）
HTML5：网页开发的新纪元
chaosweet的博客
11-06 1061
不做下一个谁，只做第一个我！
初识HTML
chestnut_orenge的博客
11-05 952
什么是HTML呢？HTML是超文本标记语言，HTML代码是由“标签”构成的超文本：文本、声音、图片、视频、表格、链接标记：由许许多多的标签组成HTML页面是运行到浏览器上面的。
html checkbox和label 文字不对齐解决办法
天天打码-16年老码农
11-05 342
做用html或bootstrap时，表单元素和文字不对齐现实，不管用什么。
软件测试—HTML
最新发布
qq_73187469的博客
11-09 350
web前端三大核心技术 - HTML 负责网页的架构 - CSS 负责网页的样式、美化 - JS 负责网页的行为
一七五、HTML 不同类型的事件及其说明和示例
梅某某
11-07 839
HTML 事件处理程序是通过 JavaScript 来捕获和响应不同的用户操作、系统事件或浏览器事件。下面是不同类型的事件及其说明和示例。
【Pikachu靶场：XSS系列】xss之过滤，xss之htmlspecialchars，xss之herf输出，xss之js输出通关啦
m0_47484034的博客
11-05 466
【Pikachu靶场：XSS系列】xss之过滤，xss之htmlspecialchars，xss之herf输出，xss之js输出通关啦
前端八股文(一)HTML 持续更新中。。。
DogEgg_001的博客
11-06 670
src：用于js脚本，img、iframe、script等标签加载时会阻塞主线程，将资源内容嵌入到当前标签所在的位置，将其指向的资源下载应用到文档内href：用于链接a、link等标签href指向外部资源所在的位置，和当前元素位置建立链接，将其下载的时候不会阻止其他资源的加载解析。
常见前端代码分析面试题Javascript|html
警警的博客
11-08 579
html\CSS\Javascript
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值