CSS之表格与表单

最新推荐文章于 2024-10-09 19:30:02 发布
最新推荐文章于 2024-10-09 19:30:02 发布
阅读量1k 收藏 10
点赞数 4
分类专栏： web前端 文章标签： css html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_68276272/article/details/128057296
版权

表格与表单

一、表格标签

<table>:表格的最外层容器
<tr>:定义表格行
<th>:定义表头
<td>:定义表格单元
<caption>:定义表格标题
注：之间是有嵌套关系的，要符合嵌套规范
    语义化标签：<tHead>,<tBody>,<tFoot>
    注：在一个table中，tBody是可以出现多次的，tHead和tBody只能出现一次

基本的表格格式：（实现效果）
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img{width:100px;height:100px}
    </style>
</head>
<body>
    <table>
        <caption>天气预报</caption>
        <tHead>
            <tr>
                <th>日期</th>
                <th>天气情况</th>
                <th>出行情况</th>
            </tr>
        </tHead>
        <tBody>
            <tr>
                <td>2019年1月1日</td>
                <td><img src="./tianqi1.png" alt=""></td>
                <td>天气晴朗，适合出行</td>
            </tr>
            <tr>
                <td>2019年1月2日</td>
                <td><img src="./tianqi2.png" alt=""></td>
                <td>有雨、出门请带伞</td>
            </tr>
    </tBody>
    </table>
</body>
</html>

二、表格属性

border：表格边框
cellpadding：单元格内的空间
cellspacing：单元格之间的空间
rowspan：合并行
colspan：合并列
align：左右对齐方式  left,center,right
valign：上下对齐方式 top,middle,bottom

实现效果：
请添加图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img{width:60px;height:60px}
    </style>
</head>
<body>
    <table border="1px" cellpadding="30px" cellspacing="30px">
        <caption>天气预报</caption>
        <tHead>
            <tr align="right">
                <!-- 列进行合并 -->
                <th colspan="2">日期</th>
                <th>天气情况</th>
                <th>出行情况</th>
            </tr>
        </tHead>
        <tBody>
            <tr>
                <!-- 行进行合并 -->
                <td rowspan="2" valign="top">2019年1月1日</td>
                <td>白天</td>
                <td><img src="./tianqi1.png" alt=""></td>
                <td>天气晴朗，适合出行</td>
            </tr>
            <tr>
                <td>夜晚</td>
                <td><img src="./tianqi2.png" alt=""></td>
                <td>天气晴朗，适合出行</td>
            </tr>
            <tr>
                <td rowspan="2" valign="bottom">2019年1月2日</td>
                <td>白天</td>
                <td><img src="./tianqi1.png" alt=""></td>
                <td>有雨、出门请带伞</td>
            </tr>
            <tr>
                <td>夜晚</td>
                <td><img src="./tianqi2.png" alt=""></td>
                <td>有雨、出门请带伞</td>
            </tr>
    </tBody>
    </table>
</body>
</html>

三、表单标签

<form>：表单的最外层容器
<input>：标签用于手机用户信息，根据不同的type属性值，展示不同的控件，如输入框、密码框、复选框等。

请添加图片描述
实现效果：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img{width:60px;height:60px}
    </style>
</head>
<body>
    <table border="1px" cellpadding="30px" cellspacing="30px">
        <caption>天气预报</caption>
        <tHead>
            <tr align="right">
                <!-- 列进行合并 -->
                <th colspan="2">日期</th>
                <th>天气情况</th>
                <th>出行情况</th>
            </tr>
        </tHead>
        <tBody>
            <tr>
                <!-- 行进行合并 -->
                <td rowspan="2" valign="top">2019年1月1日</td>
                <td>白天</td>
                <td><img src="./tianqi1.png" alt=""></td>
                <td>天气晴朗，适合出行</td>
            </tr>
            <tr>
                <td>夜晚</td>
                <td><img src="./tianqi2.png" alt=""></td>
                <td>天气晴朗，适合出行</td>
            </tr>
            <tr>
                <td rowspan="2" valign="bottom">2019年1月2日</td>
                <td>白天</td>
                <td><img src="./tianqi1.png" alt=""></td>
                <td>有雨、出门请带伞</td>
            </tr>
            <tr>
                <td>夜晚</td>
                <td><img src="./tianqi2.png" alt=""></td>
                <td>有雨、出门请带伞</td>
            </tr>
    </tBody>
    </table>
</body>
</html>

四、表单相关标签

<textarea>：多行文本框
<select>,<option>：下拉菜单
label：辅助表单
还有一些常见的属性：
    checked,disabled,name,for...

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


       <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="http://www.baidu.com"><!-- action是数据要提交的位置 -->
        <h2>下拉菜单</h2>
        <select>
            <!-- 添加请选择提示，但是在提示后不能再选中请选择选项 -->
            <option selected disabled>请选择</option>
            <option>北京</option>
            <option>上海</option>
            <option>杭州</option>
        </select>
        <h2></h2>
        <!-- size设置显示项数 -->
        <select size="2">
            <option>北京</option>
            <option>上海</option>
            <option>杭州</option>
        </select>
        <h2></h2>
        <!-- multiple实现多选，鼠标划过实现多选，而上一种不可以 -->
        <select multiple>
            <option>北京</option>
            <option>上海</option>
            <option>杭州</option>
        </select>
        <h2></h2>
        <input type="file" multiple>

        <h2></h2>
        <!-- 刚开始时只能点击按钮选中，点击字是不能选中的，作用范围有点小-->
        <!-- 使用label后可以调节，for与ID是一一对应关系-->
        <input type="radio" name="gender" id="man"><label for="man">男</label>
        <input type="radio" name="gender" id="woman"><label for="woman">女</label>
    </form>
</body>
</html>

五、表格表单组合实例

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="">
        <table border="1" cellpadding="30">
            <tBody>
                <tr align="center">
                    <td rowspan="4">总体信息</td>
                    <td colspan="2">用户注册</td>
                </tr>
                <tr align="right">
                    <td>用户名：</td>
                    <td><input type="text" placeholder="请输入用户名"></td>
                </tr>
                <tr align="right">
                    <td>密码：</td>
                    <td><input type="password" placeholder="请输入密码"></td>
                </tr>
                <tr align="center">
                    <td colspan="2">
                        <input type="submit">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <input type="reset">
                    </td>
                </tr>
        </tBody>
        </table>
    </form>
</body>
</html>
歪歪勇闯F圈
关注
专栏目录
css 模拟表格斜线
09-27
CSS模拟表格斜线的知识点主要涉及边框、定位以及绝对定位等CSS技术。下面详细说明如何使用CSS来模拟实现表格的对角线效果： 首先，我们知道HTML中的表格（table）是由多个单元格（td、th）组成的，如果要为表格添加...
CSS中的表单
liu0218的博客
08-04 1968
作用：将用户填写的信息发送给服务器，例如账号注册、个人资料修改等等。表单控件等等
CSS-表格表单_BFC
2301_80864686的博客
11-04 1633
（1）盒子垂直方向的距离由margin决定，属于同一个BFC的两个相邻box的margin会发生重叠（应用：防止margin重叠）（3）overflow的值不为visible—单纯的div不是BFC，如果添加了overflow：hidden等就是BFC。（2）float的值不为none—单纯的div不是BFC，如果添加了浮动就是BFC。（3）计算 BFC 的高度时，浮动元素也参与计算（应用：清除内部浮动）（2）BFC的区域不会与浮动的盒子发生重叠（应用：自适应两栏布局）（2）调整单元格与单元格之间的间距。
CSS基础--设置表格样式和表单样式
最新发布
2401_85545586的博客
10-09 650
参数：sparate为默认值表示边框分开不合并，collapse表示边框合并，即如果两个边框相邻则共用同一个边框。用于设置表格的边框是合并成单边框，还是分别有各自的边框。： cursor:pointer可设置鼠标悬停时变手指。CSS--使用CSS修饰页面外观。
CSS表格样式
xiangxiongfly
07-21 1万+
CSS表格样式 caption-side 标题位置 border-collapse 边框合并 border-spacing 边框间距 css样式（推荐使用）
css中table标签详解(一)
热门推荐
weixin_45581836的博客
11-27 1万+
css中table标签详解(一) 什么是table标签，以及table标签的组成？ 不叨叨，直接上代码 <table> <tr> <td></td> </tr> </table> 我们可以看到table标签的组成是由table tr td 构成的. 其中...
HTML+CSS基础——基础标签（表格标签（table、tr、td、th等等））
weixin_66547608的博客
12-29 1931
这是一个包含表格的简单网页。该表格列出了两种不同的主机方案（Home starter hosting和Premium business hosting）以及它们的一些特点。 表格的第一行是表头，包括三列，分别是空白列、Home starter hosting和Premium business hosting。 接下来的行是表格的主体部分，每一行代表一种特点。第一行表示磁盘空间（Disk space），Home starter hosting拥有250MB的磁盘空间，而Premium business h
漂亮的表格css+html
02-11
我们可以使用CSS来改变表格的布局、颜色、边框等属性。例如，为了使表格看起来更清爽，我们可以设置边框为单色，并去除内边距： ```css table { border-collapse: collapse; border-spacing: 0; } th, td { ...
实验三HTML表格与HTML表单优质资料.doc
12-02
HTML 表格与 HTML 表单优质资料 本资源为实验三 HTML 表格与 HTML 表单优质资料，涵盖了 HTML 表格和 HTML 表单的相关知识点。通过本资源，读者可以掌握网页中插入表格数据的标记的用法、不规则表格的创建方法、...
[精选]第8章用CSS设置表格和表单样式.pptx
10-12
CSS 设置表格和表单样式 CSS 是网页设计标准教程中一个非常重要的部分。在第 8 章中，我们将学习如何使用 CSS 设置表格和表单样式。表格是网页上非常常见的元素，在传统的网页设计中，表格除了显示数据外，还常常被...
CSS设置表格和表单样式PPT课件.pptx
10-24
本资源为一份关于 CSS 设置表格和表单样式的 PPT 课件，涵盖了控制表格、表格实例一：隔行变色、CSS 与表单、直接输入的 Excel 表格等内容，旨在帮助学习者更好地理解和掌握 CSS 在设置表格和表单样式方面的应用。
表单和表格
m0_72958052的博客
08-25 240
tr:代表着行 td:设置单元格：th:单元格表头caption:标题cellspacing:设置边框合并cellpadding:设置内容离边框的距离单元格里面内容居中：水平方向：text-align:left/center/right;垂直方向： vertical-align:top/middle/bottomrowspan:合并纵向单元格colspan:合并行向单元格：合并单元格时注意点：合并时多余要删掉；表格的结构标签会改变内容位置；书写位置无关、thead：代表表格前面。...
CSS笔记——表格元素table单元格合并和妙用（利用table-cell实现块级、多行文本元素水平垂直居中）、表单元素form
bqiuer的博客
09-25 5657
HTML中，表格由 table 元素来定义.还有一些用于表格的其他标签，如 caption、thead、tbody、tfoot、th 等。是用于收集用户信息的一组元素。formnovalidate: 定义提交表单数据时是否要忽略表单元素的验证。定义表单元素的值，例如文本框中的默认文本、默认选中的单选框或复选框等。表单元素只读，用户无法修改其值，通常用于展示数据或只读状态的表单元素。禁用表单元素，使其无法接收用户输入，通常用于表单元素不可用的情况。：表单的容器(表单域），用于将表单元素组织在一起。
HTML_CSS学习：表格、表单、框架标签
m0_74972727的博客
03-21 1083
【代码】HTML_CSS学习：表格、表单、框架标签。
CSS table标签
guizi0809的博客
09-07 4324
一、标签定义 一个完整的table包含thead、tbody、tfoot这些语义化标签，方便对表格中的行进行分组，这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。 其中 th(table head) 一般用于定义表头，也可用于定义单元格，文本会默认加粗 tr(table row) 定义表格中的行 td(table data) 定义表格中单元格 <table> <!-- 表头部--> <thead>
CSS基础：table的4个标签的样式详解（6000字长文！附案例）
u013179804的博客
04-19 9464
之前在 HTML 基础部分，我们讲解了表格的结构和写法。简单回顾下。包含等表格部分。和分别包含多个行。行中可以包含或单元格，用来显示表格的标题或数据。本文，我们来给它们增加一些漂亮的样式。图为增加样式前，增加样式后的效果，是不是确实漂亮多了。ok，那我们一起来看看这些表格标签的样式属性吧。
Css之table布局:
SunPeng的博客
11-22 6330
Css之table布局:
CSS（二十一）——CSS表单
m0_62701594的博客
07-29 748
简单示例： 输入框(input) 样式 使用 width 属性来设置输入框的宽度 如果你只想设置指定类型的输入框可以使用以下属性选择器： - 选取文本输入框 - 选择密码的输入框 - 选择数字的输入框使用 padding 属性可以在输入框中添加内边距 置了 属性为 。这样可以确保浏览器呈现出带有指定宽度和高度的输入框是把边框和内边距一起计算进去的。使用 属性可以修改 input 边框的大小或颜色，使用 属性可以给 input 添加圆角 只想添加底部边框可以使用 属性: 输入
CSS——表格与表单的简介
Bonsoir777的博客
07-14 711
本文主要介绍了html中表格与表单的相关知识点
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值