⑧HTML+CSS 表格和表单的基本设置

最新推荐文章于 2023-02-24 23:36:57 发布
最新推荐文章于 2023-02-24 23:36:57 发布
阅读量418 收藏 4
点赞数 1
分类专栏： # HTML和CSS 文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45613931/article/details/105270031
版权

表格和表单

本人是个新手，写下博客用于自我复习、自我总结。
如有错误之处，请各位大佬指出。
学习资料来源于：尚硅谷

表格

• 在Web的历史中，HTML的表格发挥了极大的作用。最初创建表格就是为了以表格的形式显示数据，后来表格变成了一个极受欢迎的布局工具。
• 但是有了CSS以后，CSS在布局网页方面实际上会更出色，所以现在我们使用表格的作用只有一个，就是用来表示格式化的数据。
• HTML中的表格可以很复杂，但是通常情况下我们不需要创建过于复杂的表格。

table、tr、th、td标签

• 使用table标签创建一个表格。
•tr表示表格中的一行。
• tr中可以编写一个或多个th或td。
• th表示表头。
• td表示表格中的一个单元格。

caption、thead、tbody、tfoot标签 ※

• caption表示表格的标题。
• thead表示表格的头部。
• tbody表示表格的主体。
• tfoot表示表格的底部。

例：

<!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>长表格</title>
</head>
<body>
    <table border="2" width='50%' align="center">
        <!-- 
            可以将一个表格分成三个部分：
                头部 thead
                主体 tbody
                底部 tfoot
                th 表示头部的单元格
         -->
        <thead>
            <tr>
                <th>日期</th>
                <th>收入</th>
                <th>支出</th>
                <th>合计</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>2000.1.1</td>
                <td>500</td>
                <td>200</td>
                <td>300</td>
            </tr>
            <tr>
                <td>2000.1.1</td>
                <td>500</td>
                <td>200</td>
                <td>300</td>
            </tr>
            <tr>
                <td>2000.1.1</td>
                <td>500</td>
                <td>200</td>
                <td>300</td>
            </tr>
            <tr>
                <td>2000.1.1</td>
                <td>500</td>
                <td>200</td>
                <td>300</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td></td>
                <td></td>
                <td>合计</td>
                <td>1200</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

效果图：
在这里插入图片描述

合并单元格 ※

• 合并单元格指将两个或两个以上的单元格合并为一个单元格。
• 合并单元格可以通过在th或td中设置属性来完成。
• 横向合并 colspan
• 纵向合并 rowspan

例：

<!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>表格</title>
</head>
<body>
    <!-- 
        在现实生活中，我们经常需要使用表格来表示一些格式化数据。
        同样在网页中我们也需要使用表格，我们通过table标签来创建一个表格
     -->
    <table border="1" width='50%' align="center">
        <!-- 在table中使用tr表示表格中的一行，有几个tr就有几行 -->
        <tr>
            <!-- 在tr中使用td表示一个单元格，有几个td就有几个单元格 -->
            <td>A1</td>
            <td>B1</td>
            <td>C1</td>
            <td>D1</td>
        </tr>
        <tr>
            <td>A2</td>
            <td>B2</td>
            <td>C2</td>
            <!-- rowspan 纵向的合并单元格 -->
            <td rowspan="2">D2</td>
        </tr>
        <tr>
            <td>A3</td>
            <td>B3</td>
            <td>C3</td>
        </tr>
        <tr>
            <td>A4</td>
            <td>B4</td>
            <!-- 
                colspan 横向的合并单元格
             -->
            <td colspan="2">C4</td>
        </tr>
    </table>
</body>
</html>

效果图：
在这里插入图片描述

表格的样式 ※

• 之前学习的很多属性都可以用来设置表格的样式，比如color可以用来设置文本的颜色。padding可以设置内容和表格边框的距离。
• text-align：设置文本的水平对齐。
• vertical-align：设置文本的垂直对齐。
– 可选值：top、baseline、middle、bottom
• border-spacing：边框间距
• border-collapse：合并边框
– collapse：合并边框
– separate：不合并边框

例：

<!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>表格的样式</title>
    <style>
        table{
            width: 50%;
            border: 1px solid black;
            margin: 0 auto;

            /* border-spacing: 指定边框之间的距离 */
            /* border-spacing: 0px; */

            /* border-collapse: collapse; 设置边框的合并 */
            border-collapse: collapse;
        }

        td{
            border: 1px solid black;
            height: 100px;
            /* 默认情况下元素在td中是垂直居中的 可以通过 vertical-align 来修改*/
            vertical-align:middle;
            text-align: center; 
        }

        /* 
                如果表格中没有使用tbody而是直接使用tr，
                那么浏览器会自动创建一个tbody，并且将tr全都放到tbody中
                tr不是table的子元素
         */
        tbody > tr:nth-child(odd){
            background-color: #bfa;
        }
    </style>
</head>

<body>
    <table>
        <tr>
            <td>学号</td>
            <td>姓名</td>
            <td>性别</td>
            <td>年龄</td>
            <td>地址</td>
        </tr>
        <tr>
            <td>1</td>
            <td>孙悟空</td>
            <td>男</td>
            <td>18</td>
            <td>花果山</td>
        </tr>
        <tr>
            <td>2</td>
            <td>猪八戒</td>
            <td>男</td>
            <td>28</td>
            <td>高老庄</td>
        </tr>
        <tr>
            <td>3</td>
            <td>沙和尚</td>
            <td>男</td>
            <td>38</td>
            <td>流沙河</td>
        </tr>
        <tr>
            <td>4</td>
            <td>唐僧</td>
            <td>男</td>
            <td>16</td>
            <td>女儿国</td>
        </tr>
        <tr>
                <td>1</td>
                <td>孙悟空</td>
                <td>男</td>
                <td>18</td>
                <td>花果山</td>
            </tr>
            <tr>
                <td>2</td>
                <td>猪八戒</td>
                <td>男</td>
                <td>28</td>
                <td>高老庄</td>
            </tr>
            <tr>
                <td>3</td>
                <td>沙和尚</td>
                <td>男</td>
                <td>38</td>
                <td>流沙河</td>
            </tr>
            <tr>
                <td>4</td>
                <td>唐僧</td>
                <td>男</td>
                <td>16</td>
                <td>女儿国</td>
            </tr>
            <tr>
                    <td>1</td>
                    <td>孙悟空</td>
                    <td>男</td>
                    <td>18</td>
                    <td>花果山</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>猪八戒</td>
                    <td>男</td>
                    <td>28</td>
                    <td>高老庄</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>沙和尚</td>
                    <td>男</td>
                    <td>38</td>
                    <td>流沙河</td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>唐僧</td>
                    <td>男</td>
                    <td>16</td>
                    <td>女儿国</td>
                </tr>
    </table>
</body>

</html>

效果图：
在这里插入图片描述

表单 ※

• 现实生活中的表单是用来提交信息的，比如：办理银行卡填写的申请表、找工作填
写的简历、入学时填写的个人信息表。这些都是表单的一种。
• 网页中的表单是用来向服务器提交信息的，我们最常用到的表单就是baidu的搜索框在这里插入图片描述
• 表单可以将用户填写的信息提交的服务器
在这里插入图片描述

表单项 ※

在这里插入图片描述

input ※

• input是我们使用的最多的表单项，它可以根据不同的type属性呈现不同的状态。
• type属性可选值：
– text：文本框
– password：密码框
– submit：提交按钮
– radio：单选按钮
– checkbox：多选框
– reset ：重置按钮

select、option

•select用于创建一个下拉列表。
• option表示下拉列表中的列表项。
• optgroup用于为列表项分组。

textarea

• textarea用来创建一个文本域，实际效果和文本框类似，只是可以输入多行数据。
• 可用属性：
– cols：文本域的列数
– rows：文本域的行数

fieldset、legend、label

• fieldset用来为表单项进行分组。
• legend用于指定每组的名字。
• label标签用来为表单项定义描述文字。

例 ※

<!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>target</title>
</head>
<body>
    <h1>您的数据已经收到！</h1>
</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>表单</title>
</head>
<body>
    <!-- 
        表单：
            - 在现实生活中表单用于提交数据
            - 在网页中也可以使用表单，网页中的表单用于将本地的数据提交给远程的服务器
            - 使用form标签来创建一个表单
     -->
    <!-- 
        form的属性
            action 表单要提交的服务器的地址
     -->
    <form action="target.html">
        <!--文本框
           	注意：数据要提交到服务器中，必须要为元素指定一个name属性值
        -->
        文本框 <input type="text" name="username">
        <br><br>
        <!--密码框-->
        密码框 <input type="password" name="password">
        <br><br>

        <!--单选按钮
                - 像这种选择框，必须要指定一个value属性，value属性最终会作为用户的填写的值传递给服务器
                - checked 可以将单选按钮设置为默认选中
           -->
        单选按钮 <input type="radio" name="hello" value="a">
        <input type="radio" name="hello" value="b" checked>
        <br><br>

        <!--多选框 -->
        多选框 <input type="checkbox" name="test" value="1">
        <input type="checkbox" name="test" value="2">
        <input type="checkbox" name="test" value="3" checked>

        <br><br>

        <!-- 下拉列表 -->
        <select name="haha">
            <option value="i">选项一</option>
            <option selected value="ii">选项二</option>
            <option value="iii">选项三</option>
        </select>

        <br><br>
        <!--提交按钮-->
        <input type="submit" value="注册">
    </form>
</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>表单</title>
</head>
<body>
    <form action="target.html">
	<!-- 
    autocomplete="off" 关闭自动补全
    readonly 将表单项设置为只读，数据会提交
    disabled 将表单项设置为禁用，数据不会提交
    autofocus 设置表单项自动获取焦点
 	-->
        <input type="text" name="username" value="hello" readonly>
        <br><br>
        <input type="text" name="username" autofocus>
        <br><br>
        <input type="text" name="b">

        <br><br>

        <input type="submit">
        <!-- 重置按钮 -->
        <input type="reset">
        <!-- 普通的按钮 -->
        <input type="button" value="按钮">

        <br><br>
        
        <button type="submit">提交</button>
        <button type="reset">重置</button>
        <button type="button">按钮</button>
    </form>
</body>
</html>

在这里插入图片描述

只爭朝夕不負韶華
关注
专栏目录
Html5中表格与表单&CSS基础
qq_63608418的博客
11-17 499
学web前端第3天
html+css知识点复习回顾，复习参考
weixin_55935744的博客
11-28 1230
这里写自定义目录标题一、HTML部分1、两个盒子2、图像标签3、相对路径和绝对路径4、超链接标签5、表格标签6、列表标签7、表单标签8、HTML5新特性二、CSS部分1、CSS选择器2、CSS字体属性3、CSS文本属性4、CSS引入方式5、CSS的元素显示模式6、CSS的背景样式7、CSS三大特性8、盒子模型9、传统网页布局的三种方式10、CSS属性书写顺序（规范代码）11、元素的显示与隐藏12、CSS高级技巧13、CSS3新特性 一、HTML部分 1、两个盒子 <div>、<span&g
HTML5设置表单
xiao1ni1zi的专栏
05-03 1255
表单可以在客户机和服务器之间传递信息，是收集客户信息的最好方式，如通过用户注册，登陆和用户调查等。表单是HTML5中比较重要的标记之一。 1、HTML5常用表单标记 表单用标记来创建。 标记具有antion、method和target属性。 必需的属性 属性 值 描述 DTD 标签的 action 属性" style="color
设置表单
ccccc49813645075的博客
10-18 363
package abc.servlet; import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.Ht...
HTML简单入门 - 表单
qq_52519008的博客
12-24 205
form 常用属性 <form action="提交的后台路径" method="提交方式"> 姓名:<input type="text" name="userName"/><br/> <input type="submit" value="注册"/> </form> 表单作用：用来收集用户信息，对应标签是<form> action:提交的用来接收数据的后台路径 method:设置提交...
轻松解决HTML + CSS各种表格问题
shenmill的博客
08-07 9582
表格那些事：简单复杂的表格样式，高度固定表头固定，横向滚动条等。
HTML5+CSS3基础
nabirt的博客
10-19 1291
记录一下html+css的基础知识
HTML-Label-框架-字符实体-全局属性-CSS基本语法结构
weixin_57218747的博客
04-30 404
HTML-Label-框架-字符实体-全局属性-CSS基本语法结构 1 回顾 1.1 列表 ul ol li dl dt dd 1.2 表格 table caption thead tfoot tbody tr th td 2 表单 2.1 表单总体设置 <!--表单--> <form action="http://www.baidu.com/s" target="_blank"> <!--输入框--> <input type="text" n
VsCode开发html5网页之表单day2（新手向5）
weixin_42515365的博客
08-14 2653
I.VsCode工作区中新建文件夹及文件 我们要新建一个总的文件工作区文件夹Workspace，然后在Workspace下新建文件夹Test1，在Test1下新建demo.html II.demo.html写表单 a. html的基本结构： <!DOCTYPE html> <html> <head> <meta charset=utf-8"> <title></title> </head> <body> 网页
HTML表单3（下拉列表、多行文字输入）—零基础自学网页制作
web前端入门基础进阶教程-htmlcssjs
05-24 1254
带有下拉列表的表单 题目只能有30个字，不能写全，其实今天我们要学习的内容有三个，第一，下拉列表表单，第二，多行文字输入表单，第三，数据集表单。 开始学习吧！ 前天和昨天我们在《HTML表单元素初识1——零基础自学网页制作》和《HTML表单元素初识2——零基础自学网页制作》中基本上把<input/>标签的type属性里不同的值进行了讲解与实践，今天我们来学习其他包含在<form></form>之间的元素。 。 带有下拉列表的表单 我们在一些网站填写注册信息时，经常会遇
HTML、CSS锁定表头（无漂浮感）
03-20
NULL 博文链接：https://fxyc.iteye.com/blog/865232
Html+Css复杂表格的制作
qq_42799562的博客
01-13 1535
今天偶然在项目接触到大量单据信息的展示，突然发现被复杂表头的格式给高搞懵逼了。哈哈哈，通过简单整理，记录一下吧，希望能帮到需要的朋友！其实原理很简单： rowspan 控制行间距、colspan 控制列间距。时间确实是检验真理的唯一标准，在使用的过程中，我发现：其实就是通过 rowspan 来控制下一行的缩进距离， colspan 控制列所占的比例。直接上例子吧，要想有深刻的体会，除了实操，别无选择。这里使用的布局模版是 Layui ,自行前往下载。当然不使用也行，自己定义表格的边距、边框线等等，使表格直.
【HTML】HTML 注册表单案例 ② ( 表格中的内容设置 | 下拉列表 | 输入文本框 | 复选框 | 文本域 | 图片按钮 | 链接 )
最新发布
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
02-24 4401
一、表格中的内容设置 1、设置下拉列表 2、设置输入文本框 3、设置复选框 4、设置文本域 5、设置图片按钮 6、设置链接 二、完整代码示例
html -table 实现复杂表头
热门推荐
技术积累
04-12 2万+
使用html做复杂的表格。复杂表格一般是用到td的两个属性：rowspan 、colspan属性值。在html中&lt;td&gt; 标签定义 HTML 表格中的标准单元格。　　(1)rowspan 属性规定单元格可横跨的行数;　　(2)colspan 属性规定单元格可横跨的列数。&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona...
表单和表格
m0_72958052的博客
08-25 228
tr:代表着行 td:设置单元格：th:单元格表头caption:标题cellspacing:设置边框合并cellpadding:设置内容离边框的距离单元格里面内容居中：水平方向：text-align:left/center/right;垂直方向： vertical-align:top/middle/bottomrowspan:合并纵向单元格colspan:合并行向单元格：合并单元格时注意点：合并时多余要删掉；表格的结构标签会改变内容位置；书写位置无关、thead：代表表格前面。...
web前端学习（八）——HTML5中表格、边框的相关标签设置
★★光亭★★
12-24 2万+
web前端学习（八）——HTML5中表格、边框的相关标签设置
在css的框中打文字,css 边框上如何写入文字？
weixin_35999303的博客
08-03 7247
方法一：1、首先，打开html编辑器，新建html文件，例如：index.html。2、在index.html中的标签中，输入html代码：。文字3、浏览器运行index.html页面，此时实现了边框角落开口显示文字。方法二：这个可以通过相对定位使某元素恰好处在div的边框上的方式来实现1position:relative;下面举例说明1234我是边框上的文字我是边框内的文字设置css样式1234...
JavaScript实现点击（按钮）实现添加css样式
Cybbin1的博客
07-25 4045
弄了很久才知道逻辑。。。。 $('.aaa').click(function(){ $('.album').addClass('disk-cover-animation'); }); 还是兼容的问题 啊！！！！
HTML+CSS创建登录表单
本示例主要展示了如何使用HTML和CSS创建一个简单的登录表单，其中包括用户的基本信息填写。下面将详细解释其中涉及的关键知识点。 首先，HTML部分： 1. `<!DOCTYPE html>`: 这是一个文档类型声明，告诉浏览器当前...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

只爭朝夕不負韶華

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值