CSS学习笔记(十)对表单和数据表格使用样式
1. 对数据表格应用样式
普通的用表格展现的数据,一般会形成杂乱的布局,会使用户难以阅读
对表格内容用少量垂直和水平填充进行视觉分隔,主要的列标题通过一种精细的重复背景图像区别于数据,颜色交替的行帮助引导用户的实线在每个单元格之间水平移动,同时视觉上不会显得太混乱,为了进一步帮助读者,可以在每一行上应用鼠标停留效果
@ 1 表格特有的元素
#1 summary和caption
caption:他基本上用做表格的标题
summary:可应用于表格的标签,用来描述表格的内容(与image的alt文本相似)
<table id="listTable" summary="音乐排行榜">
<caption>实力歌手</caption>
</table>
#2 thead、tbody和tfoot
thead、tbody和tfoot使开发人员能够将表格划分为逻辑部分,可以将所有列标题放在thead元素中,这样可以对这个特殊区域单独应用样式,如果使用
thead或tfoot元素,那么必须至少使用一个tbody元素
行和列标题应该使用th标记而不是td,但是如果某些内容既是数据又是标题,那么它仍然应该使用td,表格标题可以设置值为row或col的scope属性,定义
他们是行标题还是列标题,它们还可以设置值rowgroup或colgroup,表示他们与多行或多列相关
<thead>
<tr>
<th id="playListHead" scope="col">歌曲名</th>
<th scope="col">艺术家</th>
<th scope="col">专辑</th>
<th scope="col">时间</th>
</tr>
</thead>
#3 col和colgroup
colgroup能够对使用col元素定义的一个或多个列进行分组,但是支持col和colgroup元素的浏览器并不多
<colgroup>
<col id="name"/>
<col id="art"/>
<col id="time"/>
</colgroup>
@2 数据表格标记
将上述所有HTML元素和属性组合,创建出表格的基本轮廓:
<table id="listTable" summary="音乐排行榜">
<caption>实力歌手</caption>
<colgroup>
<col id="name"/>
<col id="art"/>
<col id="time"/>
</colgroup>
<thead>
<tr>
<th id="playListHead" scope="col">歌曲排名</th>
<th scope="col">歌曲名</th>
<th scope="col">艺术家</th>
<th scope="col">专辑</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td>1</td>
<td>十年</td>
<td>陈奕迅</td>
<td>那些年</td>
</tr>
<tr>
<td>2</td>
<td>愿得一人心</td>
<td>李行亮</td>
<td>愿得一人心</td>
</tr>
<tr class="odd">
<td>3</td>
<td>K歌之王</td>
<td>陈奕迅</td>
<td>那些年</td>
</tr>
<tr>
<td>4</td>
<td>知心</td>
<td>李行亮</td>
<td>愿得一人心</td>
</tr>
</tbody>
</table>
@3 对表格应用样式
CSS规范有两个表格边框模型:单独的和叠加的
border-collapse 属性设置表格的边框是否被合并为一个单一的边框,还是象在标准的 HTML 中那样分开显示。
设置表格的宽和边框,通过使用一些垂直和水平填充,在表格单元格周围形成一些空白
table{
border-collapse:collapse;
width:50em;
border:1px solid #666;
}
th,td{
padding:0.1em 1em;
}
@4 添加视觉样式
caption{
font-size:1.2em;
font-weight:bold;
margin:1em 0;
}
col{
border-right:1px solid #ccc;
}
col#albumCol{
border:none;
}
thead{
background:#21aec7 url(images/bar.gif) repeat-x left center;
border-top:1px solid #a5a5a5;
border-bottom:1px solid #a5a5a5;
}
th{
font-weight:normal;
text-align:left;
}
#palyListHead{
text-indent:-1000em;
}
.odd{
background-color:#edf5ff;
}
tr:hover{
background-color:#3d80df;
color:#fff;
}
thead tr:hover{
background-color:transparent;
color:inherit;
}
效果图:
2.简单的表单布局
@1有用的表单元素
HTML提供了许多有用的元素,可以帮助在表单中添加结构和意义,其中第一个元素是filedset元素,filedset元素用于对相关的信息块进行分组
filedset{
border:solid 0 transparent;
}
表单标签:<label>
@2 基本布局
转载于:https://www.cnblogs.com/qixing/archive/2013/01/21/2869813.html
CSS学习笔记(十)对表单和数据表格使用样式相关推荐
- CSS学习笔记(十四) 我们前端是怎么跟设计师沟通的
1.交付 一般设计师给前端的只有psd,没有其它多余的东西,连基本的文档都懒得给.前端期望中的设计能给予的除了psd之外, 还有设计上游岗位传递下来的东西. 比如: 产品原型, 需求文档, 交互文档等 ...
- html图片多热点怎么弄,CSS学习笔记(十五) 使用map标签实现单图多热点
map标签 定义一个客户端图像映射.图像映射(image-map)指带有可点击区域的一幅图像. area元素永远嵌套在map元素内部.area元素可定义图像映射中的区域. img标签中的usemap属 ...
- HTML/CSS学习笔记02【表单标签】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
- 阿ken的HTML、CSS的学习笔记_表单的应用(笔记七)
欢迎光临 你好 我是阿ken 文章目录 7.1_认识表单 7.1.1_表单的构成 7.1.2_创建表单 ( < form> 标记 ) 7.2_表单属性 1. action 属性 2. me ...
- Polyworks脚本开发学习笔记(十九)-将数据对象与参考对象对齐的方法
Polyworks脚本开发学习笔记(十九)-将数据对象与参考对象对齐的方法 把开发手册理了一遍,发现还有几个点没有记录下来,其中一个就是使用点对的粗对齐和使用参考目标的精确对齐.为了把这个学习笔记凑够 ...
- ASP.NET MVC 2 学习笔记二: 表单的灵活提交
ASP.NET MVC 2 学习笔记二: 表单的灵活提交 前面说到有做到公司内部的一个请假系统,用的是ASP.NET MVC 2+Entity Framework.虽然EF(Entity Frame ...
- Python语言入门这一篇就够了-学习笔记(十二万字)
Python语言入门这一篇就够了-学习笔记(十二万字) 友情提示:先关注收藏,再查看,12万字保姆级 Python语言从入门到精通教程. 文章目录 Python语言入门这一篇就够了-学习笔记(十二万字 ...
- 哈工大操作系统学习笔记十——信号量与死锁
哈工大os学习笔记十(信号量与死锁) 文章目录 哈工大os学习笔记十(信号量与死锁) 一. 信号量临界区保护 1.为什么要保护信号量 2.临界区 3.保护信号量的方法 3.1 轮换法 3.2 标记法 ...
- OpenCV学习笔记(十二)——图像分割与提取
在图像处理的过程中,经常需要从图像中将前景对象作为目标图像分割或者提取出来.例如,在视频监控中,观测到的是固定背景下的视频内容,而我们对背景本身并无兴趣,感兴趣的是背景中出现的车辆.行人或者其他对象. ...
最新文章
- VSTS LoadTest使用原则
- mysql sp cursoropen_三个重要的游标sp_cursoropen_MySQL
- Android4.4 framework分析——ActivityManagerService的启动和对Activity的管理
- LOL手游诺手对线技巧,上分率提高60%,战神玩家推荐玩法
- http/https监控获取响应时间(DNS解析时间,RRT时间,服务器处理时间等)
- execl执行linux命令,使用execl运行Linux命令
- DBShop电子商务系统
- 64位Eclipse运行时提示“Failed to load the JNI shared library \Java\jre6\bin\client\jvm.dll”的一个解决方案
- C++复合类型-指针变量
- 网站搜索优化SEO概念与方法
- 会计学原理与财务报表分析
- Android第三方框架之学习高德地图SDK-----①集成环境,获取定位信息,地图显示。
- 尹博学:OceanBase Cloud正式开服,助力全球中小企业数智化升级
- 【构成L1笔记:飞行道具】
- Python期末总结
- vcs+verdi Debug记录
- 从SRCNN到EDSR,总结深度学习端到端超分辨率方法发展历程(转)
- 华为鸿蒙系统强势来袭,华为鸿蒙系统强势来袭,取其精华,去其糟粕!
- 数据库迁移大总结。。(sqlserver2000迁移到-2008-mysql5.0)
- 配置文件DSN ,顺利实现远程!9 步搞定(图文详解)