正文

[19/06/08-星期六] CSS基础_表格&表单

IP云
IP云V管理员/7 阅读
07/24
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

一、表格

如生活中的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 /> <!--下拉列表 select
name:需要指定给select
value：需要指定给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>

[19/06/08-星期六] CSS基础_表格&表单的更多相关文章

  1. &lbrack;19&sol;06&sol;09-星期日&rsqb; CSS基础&lowbar;示例

    一.图片格式&Hack(尽量不要使用) IE6对图片png-24的透明效果不支持,IE6中背景会发灰,可以使用png-8来代替.但是使用png-8代替之后清晰度会有所下降. 使用js来解决该问 ...

  2. &lbrack;19&sol;06&sol;05-星期三&rsqb; CSS基础&lowbar;样式表的位置&lpar;内联、内部、外部样式&rpar;、块元素&lpar;div&rpar;、内联元素&lpar;span&rpar;、常用的选择器

    一.概念 CSS(Cascading Style Sheets,层叠样式表) 可以用来为网页创建样式表,通过样式表可以对网页进行装饰. 所谓层叠,就是可以将整个网页想象成是一层一层的结构,层次高的将会 ...

  3. 22----2013&period;06&period;29---HTML--html介绍&period;超链接和图片&comma;表格&comma;表单&comma;表单标签&comma;meta&comma;复习当天内容

    01 HTML HTML :Hypertext Markup Language   超文本标记语言(类似于 裸奔的人.) 作用:向用户展示信息. CSS: Cascading 层叠样式表(类似于 人的 ...

  4. Bootstrap框架&lpar;基础篇&rpar;之列表&comma;表格&comma;表单

    继续上篇的基础部分延伸,主要说一下列表,表格,表单相关Bootstrap框架变化以及基础知识. 1.列表篇 除了HTML提供的三种基本列表样式: 无序列表 <ul> <li>… ...

  5. css表格表单和统筹

    css:表格表单和统筹 学习目标 1.表单标签及属性高级 2.表格标签及属性高级 3.CSS统筹 4.BFC概念和应用场景 一.表单标签及属性高级 回顾: 表单的作用:用来收集用户的信息的; 表单的组 ...

  6. 范仁义html&plus;css课程---7、表单

    范仁义html+css课程---7.表单 一.总结 一句话总结: 表单标签的话主要掌握form标签.input标签(以及input标签的不同的type值).select标签.textarea等标签,及 ...

  7. HTML--绝对路径&comma; 表格&comma;表单&comma; 框架

    URL, URI, URN URL: 统一资源定位符: Uniform Resource Locator URN: 持久可用的资源标准名称 Uniform Resource Name , 比如邮箱 U ...

  8. bootstrap基础学习【表单含按钮】（二）

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. HTML表格表单综合——用户注册表

    今天学习了表格和表单知识,我综合了他们添加了一些拓展知识做了一个用户注册表,以下面代码来整理表格和表单知识: <!DOCTYPE html PUBLIC "-//W3C//DTD XH ...

随机推荐

  1. CSS3&colon;过渡大全

    代码 地址:http://jsbin.com/moquyesumi/edit?html,output <!DOCTYPE HTML> <html> <head> & ...

  2. windows cmd command line 命令

    Reference: 1. http://msdn.microsoft.com/en-us/library/ms977170.aspx(前面有一段VB看不懂没关系) 2. http://csserve ...

  3. Good Bye 2015 A

    Problem A:http://codeforces.com/problemset/problem/611/A A. New Year and Days 题意:某人要在2016年收集糖果,有两种不同 ...

  4. MySQL表损坏预防与修复

    1.       表损坏的原因分析 以下原因是导致mysql 表毁坏的常见原因: 1. 服务器突然断电导致数据文件损坏. 2. 强制关机,没有先关闭mysql 服务. 3. mysqld 进程在写表时 ...

  5. hdu 2460 poj 3694 &lpar;双联通&plus;LCA&rpar;

    在给出的两个点上加一条边,求剩下桥的数量,,不会LCA在线,就用了最普通的,先Tarjan双联通缩点,然后将缩完的图建成一棵树,树的所有边就是桥了,如果在任意两点间加一条边的话,那么从两点到最近公共祖 ...

  6. ASP&period;NET MVC学习中记录下使用JavaScript和CSS层叠样式表的经历

    首先我是想要在ASP.NET MVC 5.0中使用从jQuery之家下载下来的插件. 在下载了许多我觉得好用方便的插件之后,我在VS2017中新建了一个项目叫MVCTest,然后选择MVC模板,等待自 ...

  7. Go数据类型和变量

    一:Go数据类型 1.1 Go语言按照分类有以下几种数据类型 布尔型 布尔型的是一个常量true或者false 数字类型 整型int和浮点型 float32, float64 字符串类型 字符串就是一 ...

  8. Expm 9&lowbar;2 有向图的强连通分量问题

      [问题描述] 给定一个有向图,设计一个算法,求解并输出该图的各个强连通分量. package org.xiu68.exp.exp9; import java.util.ArrayList; imp ...

  9. &lpar;转&rpar;每天一个linux命令（21）：find命令之xargs

    原文:http://www.cnblogs.com/peida/archive/2012/11/15/2770888.html https://blog.csdn.net/ly1358152944/a ...

  10. The directory &&num;39&semi;&sol;home&sol;stone&sol;&period;cache&sol;pip&sol;http&&num;39&semi; or its parent directory is not owned by the current user and the cache has been disabled&period; Please check the permissions and owner of that directory&period; If execu

    使用sudo pip install ......的时候出现下面一段黄色的代码: The directory '/home/stone/.cache/pip/http' or its parent d ...