[19/06/08-星期六] CSS基础_表格表单
一、表格
如生活中的Excel表格,用途就是同来表示一些格式化的数据,如课程表、工资条、成绩单。
在网页中也可以创建出不同的表格,在HTML中使用table标签来创建一个表格。table是个块元素。
在表格中使用tr(table-row 行)来表示表格中的一行,在tr中使用td(table data cell ,表格数据元素)来创建单元格,几个td就是几个单元格。
td表示列名(table Header,头部信息,如“姓名”、“年龄”),也是位于一行当中,即tr之间,th就是一个特殊的td。默认居中加粗。
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>表格</title><style type="text/css">table{/*为表格设置样式*/width:300px;margin: 0 auto;border: 1px solid black; /*只是单元格外边有框*/border-spacing: 0;/*table和td边框之间默认有距离,看起来好像双线,这个属性可以设置去掉*/border-collapse: collapse;/*可以用来设置表格的边框合并如果设置了边框合并,border-spacing自动失效,不管你设置的数值有多大。* *//*background-color: #BBFFAA;/*设置table的背景颜色,所有的td和tr都变色*/}td{/*这样看起来好像双线边框*/border: 1px solid black;}th{border: 1px solid black;}tr:nth-child(even){/*使用伪类隔行变色,这里是让偶数行(表头也算在内)变色*/background-color: #BBFFAA;}tr:hover{/*鼠标放在哪行哪行变成黄色*/background-color: yellow;}</style></head><body><!--<table border="" cellspacing="" cellpadding=""> 这里跟css差不多--><table><tr><th>姓名</th> <!--表头--><th>年龄</th><th>性别</th> </tr><tr><td>A1</td> <!--元素--><td>B1</td><!--rowspan 纵向合并单元格也就是行的合并--><td rowspan="2">C1</td> </tr><tr><td>A2</td><td>B2</td></tr><tr><td>A3</td><!--合并B3和C3意味着第3行只有2个单元格想合并需要在B3上加个属性colspan 横向合并单元格也就是列合并,值设置为要合并单元格的个数。--><td colspan="2">B3</td><!-- <td>C3</td> --> </tr><tr><td>A4</td><td>B4</td><td>C4</td></tr><tr><td>A5</td><td>B5</td><td>C5</td></tr><tr><td>A6</td><td>B6</td><td>C6</td></tr></table></body> </html>
【扩展】长表格(如银行流水)
有些时候表格很长,这时将表格分为3部分:表头(thead)、主体(tbody)、底部(tfoot)3个标签。
这3个标签的作用就是区别表格的部分,都是table的子标签。
区分开3部分之后打印时很方便,可以在每一页都加上表头和底部。thead的内容永远会在最上边,tfoot永远在最下边,tbody永远都在中间。
如果表格没有写tbody,浏览器会自动添加tbody,并且把所有的tr都放在tbody中。所以tr并不是table的子元素,通过table>tr子元素选中器无法选中tr.
以前可以用表格来进行页面布局,现在很少用了,它已经被css所取代了。因为它维护很难。
表格是可以相互嵌套的。
使用table可以将父元素和子元素的外边距隔开,阻止他们外边距的重叠。
display:table可以将一个元素设置为表格显示。还可以解决高度塌陷的问题。table也是块元素。
使用.claerfix:after{
content:"";
display:table;
clear:both;
}既可以解决高度塌陷,又可以确保父元素和子元素的垂直外边距不会重叠。在加个 zoom:1 兼容IE6
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>长表格</title></head><body><table><thead><tr><th>日期</th> <th>收入</th> <th>支出</th> <th>合计</th> </tr></thead><tbody><tr><td>181024</td> <td>+500</td> <td>-300</td> <td>+200</td></tr><tr><td>181025</td> <td>+700</td> <td>-600</td> <td>+100</td></tr><tr><td>181026</td> <td>+800</td> <td>-900</td> <td>-100</td></tr><tr><td>181027</td> <td>+600</td> <td>-700</td> <td>-100</td></tr></tbody><tfoot><tr><td></td> <td></td> <td>合计</td> <td>+100</td></tr></tfoot></table></body> </html>
二、表单
网页中的表单就是用来向服务器提交信息的,最常用的表单就是百度的搜索框,输入关键字后将信息提交给百度服务器,然后服务器返回相应的信息。
还有如注册页、登录、发帖等都需要填写表单。使用form标签。必须指定一个action属性,该属性指向一个服务器的地址。
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>表单</title></head><body><form action="26-2 模拟服务器.html" >用户:<input type="text" name="username" /> <br/> <!--文本框,内联元素--><!--如果希望表单项的信息提交给服务器需要加个name属性 name表示提交内容的名字 如username用户填写的信息会附在url后边的以查询字符串的形式发给服务器。如url地址?明值对多个值的提交以&隔开。文本框中也可以指定默认值,不是提示文字。还可以使用label专门选中表单中的提示文字。这样可以用提示文字设置样式该标签还可以指定一个for属性,该属性的值需要对应于一个表单项的id值。当点击邮件是光标直接跳到选择框--><label for="mail">邮件:</label><input id="mail" type="text" name="email" /> <br/>密码:<input type="password" name="pwd" /> <!--密码框--><input type="submit" value="注册"/> <br/><!--提交按钮可以把表单内信息提交给服务器--><!--单选radio(收音机) 和多选按钮 checkbox单选按钮通过name来分组,name相同按钮的是一组,只能选择其一。像这样需要用户选择但是不需要用户填写的表单,必须指定一个value属性,这样被选中的value属性值会最终提交给服务器checked="checked" 默认选中,单选和多选都可以设置默认值。--><input type="radio" name="sex" value="1"/>男<input type="radio" name="sex" value="0" checked="checked"/>女 <br /><input type="checkbox" name="address" value="bj"/>北京<input type="checkbox" name="address" value="sh"/>上海<input type="checkbox" name="address" value="nj"/>南京 <br /><!--下拉列表 selectname:需要指定给selectvalue:需要指定给option默认选中 selected="selected"multiple="multiple" 直接展开,不用下拉。下拉列表变成一个多选的下拉列表。optgroup可以对选项进行分组 label来指定分组的名字。-->省份<select name="sf"><optgroup label="华中地区"><!--这个华中地区是不能选的,就是个名字--><option value="hb">湖北省</option><option value="sx">安徽省</option><option value="hn">河南省</option></optgroup ><optgroup label="华东地区"><option value="ah">浙江省</option><option value="ah">江苏省</option></optgroup> </select> <br /><!--文本域 textarea 创建一个多行的文本框--> 自我介绍<textarea name="intro"></textarea><!--重置按钮点击重置后表单中的内容会变成默认值--><input type="reset" value="重置" /> <br /><!--一个单纯按钮,唯一的作用就是被人点,可以结合js一起用--><input type="button" value="点击一下"/> <br /><!--使用button也可以创建按钮 这种方式更加灵活,可以放个图片交互效果更好--><button type="button">提交</button><!--fillset 作用是为表单项进行分组,将表单项中同一组放在一个fillset中 使用legend这个子标签来指定组的名字--><!--框架集可以引入多个页面,而内联框架只能引入一个,推荐使用框架集使用frameset来创建一个框架集。但它与不能与body出现在同一页面中。使用frame子标签来指定需要引入的页面。<frame src="01.html" />需要在frameset中指定 rows属性 ,让引入的一行一行的排列cols一列一列的排列。这两个属性必须选择其一,需要在属性中指定大小如百分比。可以相互嵌套。--></form></body> </html>
转载于:https://www.cnblogs.com/ID-qingxin/p/11094385.html
[19/06/08-星期六] CSS基础_表格表单相关推荐
- [19/06/05-星期三] CSS基础_样式表的位置(内联、内部、外部样式)、块元素(div)、内联元素(span)、常用的选择器...
一.概念 CSS(Cascading Style Sheets,层叠样式表) 可以用来为网页创建样式表,通过样式表可以对网页进行装饰. 所谓层叠,就是可以将整个网页想象成是一层一层的结构,层次高的将会 ...
- CSS_自适应_表格表单
1.伪元素选择器 追加进来的内容属于行内元素 可以理解成:假的元素选择器===给他创造一个元素/标签 1) 匹配第一行的伪元素选择器 :first-line 这里的冒号可以使用:: : 双冒号和单 ...
- Bootstrap框架(基础篇)之列表,表格,表单
继续上篇的基础部分延伸,主要说一下列表,表格,表单相关Bootstrap框架变化以及基础知识. 1.列表篇 除了HTML提供的三种基本列表样式: 无序列表 <ul><li>-& ...
- 通过CSS,H5,JavaScript实现表格表单的随机选择,和简单的随机点名。
目录 一.表格表单的随机选择 效果展示(表单内容可以根据自己需要进行修改) 1.H5的布局 第一步: 第二步: 2.CSS布局 3.JS的布局 第一步: 第二步: 第三步: 二.简单的随机点名 效果展 ...
- HTML、CSS、表格表单简单代码笔记
学习更多建议菜鸟教程 Target使用 <!DOCTYPE html> <html lang="en"> <head><meta char ...
- 定义列表的特点html,HTML的列表表格表单知识点
无序列表格式 ...
- 前端基础:通过表单元素实践《健康体检单》
前端基础:通过表单元素实践<健康体检单> HTML 表单用于接收不同类型的用户输入,用户提交表单时向服务器传输数据,从而实现用户与Web服务器的交互. 一.项目说明 该项目是进行表格布局表 ...
- 2017-2-15从0开始前端学习笔记(HTML)-图片-表格-表单
2017-2-15从0开始前端学习笔记-图片-表格-表单 标签 图片 图片<img src="#" alt="文本说明 不能加载图片时显示" title= ...
- 【4001】通过html做一个静态页面的表格表单,嘿嘿。
学习目标: [ 1]学习前端第一天掌握 html(主要表单表格相关)入门知识,梳理今天的学习知识点: [ 2]通过已学知识做静态页面表格表单完成效果,效果图如下: 表单不加颜色是这样的,自己看着设计: ...
- 表格表单HTML代码学生登记,html实现用户注册页面(表单+表格)——html小练习...
1 2 3 4 5 表格+表单练习 6 7 8 9 10 11 注册新用户 12 13 14 15 16 17 18 19 20 21 22 23 用户名 24 25 26 27 登陆邮箱 28 29 ...
最新文章
- 大佬告诉你JavaScript面试题大全之基础面试题(附答案)
- js笔记——call,apply,bind使用笔记
- 【正一专栏】世界杯十六强猜想
- 《研磨设计模式》chap9 原型模式Prototype
- Luogu T16048 会议选址
- mysql在同一台机器上实现主从_MySQL 5.7主从搭建(同一台机器)
- matlab 矩阵jocobi迭代_计算方法实验指导书1 -
- 授权windows客户端用户连接Linux mysql命令
- Keil C51 的printf
- linux查找文件内容 linux文件关键字搜索
- 记录一次海康威视录像机重置密码的经历
- tf.expand_dims函数用法详解(搭配代码理解)
- 李开复创业两年记:创新工场的孵化之困
- 在linux上安装微信
- 你的数字生活:如何转变为一个个0和1?
- DLNA(媒体共享)、Airplay(IOS系统的镜像以及共享)、Miracast(屏幕镜像)
- selenium 程序执行完之后,闪退的解决方法
- max9286 四合一_美信推出GMSL四通道解串器MAX9286
- 变换矩阵_平移 缩放 旋转及统一变换
- 支付宝事件溯源:2005年“雅巴“交易再回首
热门文章
- Ubuntu install flash
- Java的GUI窗体出现乱码解决方法
- 二叉树进阶之寻找一棵二叉树中的最大二叉搜索子树
- HG8240电信光猫禁用TR069之修改配置法
- 分区工具parted的详解及常用分区使用方法
- windows下 Mysql 错误1067 Can't open and lock privilege tables: Table 'mysql.user' doesn't exist
- 又一款性能调优神器,真香!
- 牛逼!只需 3 步,Java 也能做图片识别!
- 一个老程序员“伯伯”的独白
- 职场“35岁危机”:这是我看过的最棒建议