精通CSS+DIV网页样式与布局--设置表单和表格
表格和表单是网页中非常重要的两个元素，在上篇博客中，我们简单的介绍了CSS的页面背景设置，今天小编继续来介绍CSS的相关知识，在我们的CSS中如何设置表格和表单，首先，来看一张思维导图，通过图简单的预览一下该博文主要讲解哪些CSS的基础知识：
首先我们的首先表格中的标记，代码和运行效果如下所示：
<span style="font-size:18px;"><html>
<head>
<title>年度收入</title>
<style>
<!--
table{
caption-side:bottom;
}
-->
</style>
</head>
<body>
<table summary="This table shows the yearly income for years 2004 through 2007" border="1">
<caption>年度收入 2004 - 2007</caption>
<tr>
<th></th>
<th scope="col">2004</th>
<th scope="col">2005</th>
<th scope="col">2006</th>
<th scope="col">2007</th>
</tr>
<tr>
<th scope="row">拨款</th>
<td>11,980</td>
<td>12,650</td>
<td>9,700</td>
<td>10,600</td>
</tr>
<tr>
<th scope="row">捐款</th>
<td>4,780</td>
<td>4,989</td>
<td>6,700</td>
<td>6,590</td>
</tr>
<tr>
<th scope="row">投资</th>
<td>8,000</td>
<td>8,100</td>
<td>8,760</td>
<td>8,490</td>
</tr>
<tr>
<th scope="row">募捐</th>
<td>3,200</td>
<td>3,120</td>
<td>3,700</td>
<td>4,210</td>
</tr>
<tr>
<th scope="row">销售</th>
<td>28,400</td>
<td>27,100</td>
<td>27,950</td>
<td>29,050</td>
</tr>
<tr>
<th scope="row">杂费</th>
<td>2,100</td>
<td>1,900</td>
<td>1,300</td>
<td>1,760</td>
</tr>
<tr>
<th scope="row">总计</th>
<td>58,460</td>
<td>57,859</td>
<td>58,110</td>
<td>60,700</td>
</tr>
</table>
</body>
</html></span>
运行效果如下所示：
这是一个年度输入的表格，正文部分首先是一个table标记开始表示的是整个表格，一个caption表示的一个表格的标题，tr表示一个表格的行，而th表示的是一个表格的比较重要的第一行，后面th表示表格的竖着的比较重要的那个行，td表格一个一个的单元格，运行效果如上图所示。这些标记：tr、th、td都是组成表格不可缺少的元素。刚才的表格非常淡雅，我们仅仅只是为了表示表格的标记，那么CSS是如何控制表格的颜色的呢？看我们接下来的例子代码和运行效果：
<span style="font-size:18px;"><html>
<head>
<title>年度收入</title>
<style>
<!--
body{
background-color:#ebf5ff; /* 页面背景色 */
margin:0px; padding:4px;
text-align:center; /* 居中对齐（IE有效） */
}
.datalist{
color:#0046a6; /* 表格文字颜色 */
background-color:#d2e8ff; /* 表格背景色 */
font-family:Arial; /* 表格字体 */
}
.datalist caption{
font-size:18px; /* 标题文字大小 */
font-weight:bold; /* 标题文字粗体 */
}
.datalist th{
color:#003e7e; /* 行、列名称颜色 */
background-color:#7bb3ff; /* 行、列名称的背景色 */
}
-->
</style>
</head>
<body>
<table summary="This table shows the yearly income for years 2004 through 2007" border="1" class="datalist">
<caption>年度收入 2004 - 2007</caption>
<tr>
<th></th>
<th scope="col">2004</th>
<th scope="col">2005</th>
<th scope="col">2006</th>
<th scope="col">2007</th>
</tr>
<tr>
<th scope="row">拨款</th>
<td>11,980</td>
<td>12,650</td>
<td>9,700</td>
<td>10,600</td>
</tr>
<tr>
<th scope="row">捐款</th>
<td>4,780</td>
<td>4,989</td>
<td>6,700</td>
<td>6,590</td>
</tr>
<tr>
<th scope="row">投资</th>
<td>8,000</td>
<td>8,100</td>
<td>8,760</td>
<td>8,490</td>
</tr>
<tr>
<th scope="row">募捐</th>
<td>3,200</td>
<td>3,120</td>
<td>3,700</td>
<td>4,210</td>
</tr>
<tr>
<th scope="row">销售</th>
<td>28,400</td>
<td>27,100</td>
<td>27,950</td>
<td>29,050</td>
</tr>
<tr>
<th scope="row">杂费</th>
<td>2,100</td>
<td>1,900</td>
<td>1,300</td>
<td>1,760</td>
</tr>
<tr>
<th scope="row">总计</th>
<td>58,460</td>
<td>57,859</td>
<td>58,110</td>
<td>60,700</td>
</tr>
</table>
</body>
</html></span>
运行效果如下：
分析上面的代码我们可以看出，在table这里用一个class=“datalist”来将整个表格的CSS定义出来，body设置了背景颜色以及对齐方式；dataList设置了表格文字颜色、表格背景色以及表格字体；datalist caption设置了标题，就看到了我们上述的效果，对于大量的数据，表格有非常多的行和非常多的列，如果表格的每一行都采用相同的颜色，不便于数据的查找。而隔行变色就能解决这个问题，看下面的例子代码和运行效果：
<span style="font-size:18px;"><html>
<head>
<title>Member List</title>
<style>
<!--
.datalist{
border:1px solid #0058a3; /* 表格边框 */
font-family:Arial;
border-collapse:collapse; /* 边框重叠 */
background-color:#eaf5ff; /* 表格背景色 */
font-size:14px;
}
.datalist caption{
padding-bottom:5px;
font:bold 1.4em;
text-align:left;
}
.datalist th{
border:1px solid #0058a3; /* 行名称边框 */
background-color:#4bacff; /* 行名称背景色 */
color:#FFFFFF; /* 行名称颜色 */
font-weight:bold;
padding-top:4px; padding-bottom:4px;
padding-left:12px; padding-right:12px;
text-align:center;
}
.datalist td{
border:1px solid #0058a3; /* 单元格边框 */
text-align:left;
padding-top:4px; padding-bottom:4px;
padding-left:10px; padding-right:10px;
}
.datalist tr.altrow{
background-color:#c7e5ff; /* 隔行变色 */
}
-->
</style>
</head>
<body>
<table class="datalist" summary="list of members in EE Studay">
<caption>Member List</caption>
<tr>
<th scope="col">Name</th>
<th scope="col">Class</th>
<th scope="col">Birthday</th>
<th scope="col">Constellation</th>
<th scope="col">Mobile</th>
</tr>
<tr> <!-- 奇数行 -->
<td>isaac</td>
<td>W13</td>
<td>Jun 24th</td>
<td>Cancer</td>
<td>1118159</td>
</tr>
<tr class="altrow"> <!-- 偶数行 -->
<td>girlwing</td>
<td>W210</td>
<td>Sep 16th</td>
<td>Virgo</td>
<td>1307994</td>
</tr>
<tr> <!-- 奇数行 -->
<td>tastestory</td>
<td>W15</td>
<td>Nov 29th</td>
<td>Sagittarius</td>
<td>1095245</td>
</tr>
<tr class="altrow"> <!-- 偶数行 -->
<td>lovehate</td>
<td>W47</td>
<td>Sep 5th</td>
<td>Virgo</td>
<td>6098017</td>
</tr>
<tr> <!-- 奇数行 -->
<td>slepox</td>
<td>W19</td>
<td>Nov 18th</td>
<td>Scorpio</td>
<td>0658635</td>
</tr>
<tr class="altrow"> <!-- 偶数行 -->
<td>smartlau</td>
<td>W19</td>
<td>Dec 30th</td>
<td>Capricorn</td>
<td>0006621</td>
</tr>
<tr> <!-- 奇数行 -->
<td>whaler</td>
<td>W19</td>
<td>Jan 18th</td>
<td>Capricorn</td>
<td>1851918</td>
</tr>
<tr class="altrow"> <!-- 偶数行 -->
<td>shenhuanyan</td>
<td>W25</td>
<td>Jan 31th</td>
<td>Aquarius</td>
<td>0621827</td>
</tr>
<tr> <!-- 奇数行 -->
<td>tuonene</td>
<td>W210</td>
<td>Nov 26th</td>
<td>Sagittarius</td>
<td>0091704</td>
</tr>
<tr class="altrow"> <!-- 偶数行 -->
<td>ArthurRivers</td>
<td>W91</td>
<td>Feb 26th</td>
<td>Pisces</td>
<td>0468357</td>
</tr>
<tr> <!-- 奇数行 -->
<td>reconzansp</td>
<td>W09</td>
<td>Oct 13th</td>
<td>Libra</td>
<td>3643041</td>
</tr>
<tr class="altrow"> <!-- 偶数行 -->
<td>linear</td>
<td>W86</td>
<td>Aug 18th</td>
<td>Leo</td>
<td>6398341</td>
</tr>
<tr> <!-- 奇数行 -->
<td>laopiao</td>
<td>W41</td>
<td>May 17th</td>
<td>Taurus</td>
<td>1254004</td>
</tr>
<tr class="altrow"> <!-- 偶数行 -->
<td>dovecho</td>
<td>W19</td>
<td>Dec 9th</td>
<td>Sagittarius</td>
<td>1892013</td>
</tr>
<tr> <!-- 奇数行 -->
<td>shanghen</td>
<td>W42</td>
<td>May 24th</td>
<td>Gemini</td>
<td>1544254</td>
</tr>
<tr class="altrow"> <!-- 偶数行 -->
<td>venessawj</td>
<td>W45</td>
<td>Apr 1st</td>
<td>Aries</td>
<td>1523753</td>
</tr>
<tr> <!-- 奇数行 -->
<td>lightyear</td>
<td>W311</td>
<td>Mar 23th</td>
<td>Aries</td>
<td>1002908</td>
</tr>
</table>
</body>
</html></span>
运行效果如下：
分析一下上面的代码，正文部分把奇数行和偶数行都写上了，属性值大家都可以看出来，值得一提的是这里的altrow,如果设置了这个的属性，那么他将覆盖其他颜色，而是用自己的颜色，这就实现了隔行变色的效果。那么接下来我们再看看CSS是如何控制表单的呢？例子代码和运行效果如下所示：
<span style="font-size:18px;"><html>
<head>
<title>表单</title>
<style>
<!--
form {
border: 1px dotted #AAAAAA;
padding: 3px 6px 3px 6px;
margin:0px;
font:14px Arial;
}
input {
color: #00008B;
background-color: #ADD8E6;
border: 1px solid #00008B;
}
select {
width: 80px;
color: #00008B;
background-color: #ADD8E6;
border: 1px solid #00008B;
}
textarea {
width: 200px;
height: 40px;
color: #00008B;
background-color: #ADD8E6;
border: 1px solid #00008B;
}
-->
</style>
</head>
<body>
<form method="post">
<p>请输入您的姓名:<br><input type="text" name="name" id="name"></p>
<p>请选择你最喜欢的颜色:<br>
<select name="color" id="color">
<option value="red">红</option>
<option value="green">绿</option>
<option value="blue">蓝</option>
<option value="yellow">黄</option>
<option value="cyan">青</option>
<option value="purple">紫</option>
</select></p>
<p>请问你的性别:<br>
<input type="radio" name="sex" id="male" value="male">男<br>
<input type="radio" name="sex" id="female" value="female">女</p>
<p>你喜欢做些什么:<br>
<input type="checkbox" name="hobby" id="book" value="book">看书
<input type="checkbox" name="hobby" id="net" value="net">上网
<input type="checkbox" name="hobby" id="sleep" value="sleep">睡觉</p>
<p>我要留言:<br><textarea name="comments" id="comments" cols="30" rows="4"></textarea></p>
<p><input type="submit" name="btnSubmit" id="btnSubmit" value="Submit"></p>
</form>
</body>
</html></span>
运行效果如下所示：
分析一下上面例子，正文部分是一个表单，他以form标志开始，其中里边有输入框，有下拉菜单，有单选项，有复选框，有文字的输入框，有按钮，运行效果如上图所示，我们接下来看像文字一样的按钮，我们来看一下例子代码和运行效果：
<span style="font-size:18px;"><html>
<head>
<title>像文字一样的按钮</title>
<style>
<!--
body{
background-color:#daeeff; /* 页面背景色 */
}
form{
margin:0px; padding:0px;
font:14px;
}
input{
font:14px Arial;
}
.txt{
border-bottom:1px solid #005aa7; /* 下划线效果 */
color:#005aa7;
border-top:0px; border-left:0px;
border-right:0px;
background-color:transparent; /* 背景色透明 */
}
.btn{
background-color:transparent; /* 背景色透明 */
border:0px; /* 边框取消 */
}
-->
</style>
</head>
<body>
<form method="post">
请输入您的信息: <input type="text" name="name" id="name" class="txt">
<input type="submit" name="btnSubmit" id="btnSubmit" value="Submit>>" class="btn">
</form>
</body>
</html></span>
运行效果如下所示：
分析一下上面的例子，在上面的例子中，我们把border-bottom设置为1px，其她的border-top、border-left、border-right边框都设置为了0.然后设置一个颜色和背景色就实现了像文字一样的按钮。而这个按钮，我们讲四个边框都设置为0，而背景色设置为透明来实现像文字一样的按钮；通过这个我们可以看到，巧妙的使用CSS，能带给我们很多惊喜。Excel表格是在office软件中非常受大家欢迎的一个软件，而在网页中我们来模拟。在我们的CSS中，我们可以像在office里边的excel一样随意的输入东西，而不再有繁琐的什么输入框。下面我们来看一下例子代码和运行效果：
<html>
<head>
<title>直接输入的Excel表格</title>
<style>
<!--
table.formdata{
border:1px solid #5F6F7E;
border-collapse:collapse;
font-family:Arial;
}
table.formdata caption{
text-align:left;
padding-bottom:6px;
}
table.formdata th{
border:1px solid #5F6F7E;
background-color:#E2E2E2;
color:#000000px;
text-align:left;
font-weight:normal;
padding:2px 8px 2px 6px;
margin:0px;
}
table.formdata td{
margin:0px;
padding:0px;
border:1px solid #ABABAB; /* 单元格边框 */
}
table.formdata input{
width:100px;
padding:1px 3px 1px 3px;
margin:0px;
border:none; /* 输入框不要边框 */
font-family:Arial;
}
.btn{
border:1px solid #0083f2;
font-family:Arial;
}
-->
</style>
</head>
<body>
<form method="post">
<table class="formdata">
<caption>公司销售统计表 2004～2007</caption>
<tr>
<th></th>
<th scope="col">2004</th>
<th scope="col">2005</th>
<th scope="col">2006</th>
<th scope="col">2007</th>
</tr>
<tr>
<th scope="row">硬盘(Hard Disk)</th>
<td><input type="text" name="harddisk2004" id="harddisk2004"></td>
<td><input type="text" name="harddisk2005" id="harddisk2005"></td>
<td><input type="text" name="harddisk2006" id="harddisk2006"></td>
<td><input type="text" name="harddisk2007" id="harddisk2007"></td>
</tr>
<tr>
<th scope="row">主板(Mainboard)</th>
<td><input type="text" name="mainboard2004" id="mainboard2004"></td>
<td><input type="text" name="mainboard2005" id="mainboard2005"></td>
<td><input type="text" name="mainboard2006" id="mainboard2006"></td>
<td><input type="text" name="mainboard2007" id="mainboard2007"></td>
</tr>
<tr>
<th scope="row">内存条(Memory Disk)</th>
<td><input type="text" name="memory2004" id="memory2004"></td>
<td><input type="text" name="memory2005" id="memory2005"></td>
<td><input type="text" name="memory2006" id="memory2006"></td>
<td><input type="text" name="memory2007" id="memory2007"></td>
</tr>
<tr>
<th scope="row">机箱(Case)</th>
<td><input type="text" name="case2004" id="case2004"></td>
<td><input type="text" name="case2005" id="case2005"></td>
<td><input type="text" name="case2006" id="case2006"></td>
<td><input type="text" name="case2007" id="case2007"></td>
</tr>
<tr>
<th scope="row">电源(Power)</th>
<td><input type="text" name="power2004" id="power2004"></td>
<td><input type="text" name="power2005" id="power2005"></td>
<td><input type="text" name="power2006" id="power2006"></td>
<td><input type="text" name="power2007" id="power2007"></td>
</tr>
<tr>
<th scope="row">CPU风扇(CPU Fan)</th>
<td><input type="text" name="cpufan2004" id="cpufan2004"></td>
<td><input type="text" name="cpufan2005" id="cpufan2005"></td>
<td><input type="text" name="cpufan2006" id="cpufan2006"></td>
<td><input type="text" name="cpufan2007" id="cpufan2007"></td>
</tr>
<tr>
<th scope="row">总计(Total)</th>
<td><input type="text" name="total2004" id="total2004"></td>
<td><input type="text" name="total2005" id="total2005"></td>
<td><input type="text" name="total2006" id="total2006"></td>
<td><input type="text" name="total2007" id="total2007"></td>
</tr>
</table>
<p><input type="submit" name="btnSubmit" id="btnSubmit" value="Add Data" class="btn">
<input type="reset" value="Reset All" class="btn"></p>
</form>
</body>
</html>
运行效果如下所示：
小编寄语：该博文，小编主要简单的总结了CSS中关于如何设置表格和表单样式的相关知识点，主要讲解了六个方面的小知识，包括表格中的标记，表格中的颜色，隔行变色，表单中的元素，文字按钮，小试牛刀也就是模仿office做了一个可以编写的Excel表格，其中有一个小例子，就是模仿office中的Excel做一个可以编辑的表格，首先正文部分是用一个表格来进行搭建，而将表单嵌套在表格里边，每一项都设置一个id，一个name。最后是一个按钮；我们看CSS代码，在表格中，我们将td单元格他的边框设置，而对于input这个文本框，我们将他的border设置为none，那么这样所实现的效果就是输入的边框被取消掉了，而真正取而代之的是表格的边框，从而实现了这么一个小技巧。通过这个实例，我们可以看到，巧妙的设置CSS，能达到很多你意想不到的效果。BS学习，未完待续......
精通CSS+DIV网页样式与布局--设置表单和表格的更多相关文章
- 系列文章--精通CSS.DIV网页样式与布局学习
精通CSS.DIV网页样式与布局(八)——滤镜的使用 精通CSS.DIV网页样式与布局(七)——制作实用菜单 精通CSS.DIV网页样式与布局(六)——页面和浏览器元素 精通CSS.DIV网页样式与布 ...
- 精通CSS+DIV网页样式与布局--图片效果
提到图片效果,小伙伴们可能会想到美图秀秀,ps等,这些软件都是款非常不错的照片处理软件,包括常用的:黑白,增强,高斯,高对比,夜视,老照片和铅笔画等等.不管你是否是专业的 照片拍摄人员,我们都可以通过 ...
- 精通CSS+DIV网页样式与布局--初探CSS
CSS英文名Cascading Style Sheet,中文名字叫层叠样式表,是用于控制页面样式并允许将样式信息与网页内容分离的一种标记性语言,DIV+CSS是WEB设计标准,它是一种网页的布局方法. ...
- 精通CSS+DIV网页样式与布局--页面和浏览器元素
在页面和浏览器中,除了文字.图片.表格.表单等,还有很多各种各样的元素,在上篇博文中,小编主要简单的介绍了一下在CSS中如何设置表格和表单,今天小编主要简单介绍一下丰富的超链接特效.鼠标特效.页面滚动 ...
- 精通CSS+DIV网页样式与布局--页面背景
上篇博客,我们主要简单的总结了CSS的图片效果,我们这回来讲讲CSS如何对网页的背景进行设置,网页的背景是整个网页的重要组成部分,她直接决定了整个网页的风格和色调.这篇博客简单的总结一下如何用CSS来 ...
- 精通CSS+DIV网页样式与布局--制作实用菜单
在上篇博文中,小编中主要的简单总结了一下CSS中关于如何设置页面和浏览器元素,今天小编继续将来介绍CSS的相关基础知识,这篇博文,小编主要简单的总结一下在CSS中如何制作网页中的菜单,这部分的内容包括 ...
- 精通CSS+DIV网页样式与布局--CSS段落效果
在上一篇博文中,小编主要详细的介绍了CSS是如何控制文字的显示效果,随着需求的不断变更,那么我们如何对段落进行相关操作,以达到我们想要的效果呢,接下来,为了需要,小编继续来完善CSS对段落的控制的显示 ...
- 精通CSS+DIV网页样式与布局--滤镜的使用
在上篇博客中,小编主要简单的介绍了使用CSS,如何制作实用菜单,今天我们继续来总结有关CSS的基础知识,今天小编主要简单的来介绍一下CSS中关于滤镜的使用,首先,小编先来简单的介绍一下滤镜,我们这次来 ...
- 精通CSS+DIV网页样式与布局--CSS文字效果
上篇文章,小编简单的介绍了一下CSS的一些基本语法,学习内容不是很复杂,都是CSS的一些入门知识,但是万丈高楼平地起,搭好地基,高楼大厦不在话下,学习任何课程,都必须从基础开始,一步一个脚印,踏实坚定 ...
随机推荐
- Linux下安装 mysql 5.7
安装环境:系统是 centos6.5 1.下载 下载地址:https://dev.mysql.com/downloads/file/?id=467556 下载版本:我这里选择的57.17,通用版,li ...
- 罗列Linux发行版的基础目录名称，命令法则和功能
罗列Linux发行版的基础目录名称命名法则及功用规定 目录描述 /主层次 的根,也是整个文件系统层次结构的根目录 /bin存放在单用户模式可用的必要命令二进制文件,所有用户都可用,如 cat.ls.c ...
- 我与android的缘分
android的开始 本人是一名大三的学生,大一大二主要学习的是php后台开发,在大一的时候做过一些小的网站系统,也参加过一些大学生计算机相关的比赛.这次开始着手于安卓开发,也是一时的兴起.因为跟我们 ...
- Promise--优雅的异步回调解决方案
当一个接口需要依赖另一个接口的请求数据时,通常有两种解决方式,一个是将请求数据的接口设为同步,之后调另一个接口,另一个是在请求数据接口的成功回调里调另一个接口. 但是:当一个接口需要依赖很多个接口的请 ...
- python while条件和if判断的总练习
输出123456 89的数字 num =1 while num < 11: if num == 7: pass else: print(num) num = num + 1 输出1-100的奇数 ...
- Linux系统基础优化
一.关闭防火墙iptables: (1)关闭 /etc/init.d/iptables stop (2)检查 ...
- sublime安装配置
http://www.sublimetext.com.cn/ 打华东师范大学校赛的时候,学长谈论到这个编辑器.自定义背景多行多光标同时编辑酷炫爆了.感觉这是一个万能的文本编辑器.通过配置可以写多种语言 ...
- 阅读源码(III)
往期系列: <由阅读源码想到> <由阅读源码想到 | 下篇> Medium上有一篇文章Why You Don't Deserve That Dream Developer Jo ...
- A discussion of Dead Connection Detection, Resource Limits, V$SESSION, V$PROCESS and OS processes
A discussion of Dead Connection Detection, Resource Limits, V$SESSION, V$PROCESS and OS processes (文 ...
- Zookeeper核心工作机制（zookeeper特性、zookeeper数据结构、节点类型）
10.1 zookeeper特性 1.Zookeeper:一个leader,多个follower组成的集群. 2.全局数据一致:每个server保存一份相同的数据副本,client无论连接到哪个ser ...