css表格
今天写某个平台的前端数据展示 主要使用表格展示 正好复习总结一下css的表格
首先说说thead、tbody、tfoot
<thead></thead>
<tbody></tbody>
<tfoot> </tfoot>
无论前后顺序如何改变， <thead> 内的元素总是在表的最上面， <tfoot> 总在表的最下面
可能会有人分不清 tr th td
tr: table row => 表格中的一行
th: table head => 表格头部
td: table data => 表数据
然后在看例子就很容易理解啦
表结构
<table>
<caption>Book List</caption>
//caption 标签必须紧随 table 标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。
<thead>
<tr>
<th></th> //table head 定义表格内的表头单元格。此th元素内部的文本通常会呈现为粗体
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><td> //table data cell
<td><td>
<td><td>
<td><td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tfoot>
<table>
dome帮助理解
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>table</title>
<style type="text/css">
table {
background-color: #FFF;
border: none;
color: #565;
font: 12px arial;
}
table caption {
font-size: 24px;
border-bottom: 2px solid #B3DE94;
border-top: 2px solid #B3DE94;
}
table,
td,
th {
margin: 0;
padding: 0;
vertical-align: middle;
text-align: left;
}
tbody td,
tbody th {
background-color: #DFC;
border-bottom: 2px solid #B3DE94;
border-top: 3px solid #FFFFFF;
padding: 9px;
}
tfoot td,
tfoot th {
font-weight: bold;
padding: 4px 8px 6px 9px;
text-align: center;
}
thead th {
font-size: 14px;
font-weight: bold;
line-height: 19px;
padding: 0 8px 2px;
text-align: center;
}
tbody tr.odd th,
tbody tr.odd td {
/*odd就是偶数行*/
background-color: #CEA;
border-bottom: 2px solid #67BD2A;
}
tbody tr:hover td,
tbody tr:hover th {
/*tr也有hover样式*/
background-color: #8b7;
color: #fff;
}
</style>
</head>
<body>
<table summary="book list">
<caption>table</caption>
<thead>
<tr>
<th>Title</th>
<th>ID</th>
<th>Country</th>
<th>Price</th>
<th>Download</th>
</tr>
</thead>
<tbody>
<tr>
<th>Tom</th>
<td>1213456</td>
<td>Germany</td>
<td>$3.12</td>
<td>Download</td>
</tr>
<tr class="odd">
<th>Chance</th>
<td>1213457</td>
<td>Germany</td>
<td>$123.34</td>
<td>Download</td>
</tr>
<tr>
<th>John</th>
<td>1213458</td>
<td>Germany</td>
<td>$34.37</td>
<td>Download</td>
</tr>
<tr class="odd">
<th>oKathleen</th>
<td>1213459</td>
<td>Germany</td>
<td>$23.67</td>
<td>Download</td>
</tr>
</tbody>
<tfoot>
<tr class="odd">
<td>tfoot</td>
<td>tfoot</td>
<td>tfoot</td>
<td>tfoot</td>
<td>tfoot</td>
</tr>
</tfoot>
</table>
</body>
</html>
</body>
</html>css表格的更多相关文章
- 第 18 章 CSS 表格与列表
学习要点: 1.表格样式 2.列表样式 3.其他功能 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 表格和列表,通过表格和列表的样式设置,让表格和列表显示更加多元化. 一．表格样式 表格有五 ...
- HTML 学习笔记 CSS(表格)
CSS 表格属性可以帮助您极大的改善表格的外观 表格边框 如需在CSS中设置表格的边框 请使用border属性. 在下面的例子中table th 以及td设置了蓝色边框. table, th, td ...
- Bootstrap css栅格 + 网页中插入代码+css表格
设计达人 http://www.shejidaren.com/30-minimal-app-icons.html CSS栅格: <!DOCTYPE html> <html lang= ...
- 第七十五节，CSS表格与列表
CSS表格与列表 学习要点: 1.表格样式 2.列表样式 3.其他功能 一．表格样式 表格有五种独有样式,样式表如下: 属性 值 ...
- CSS 表格实例
CSS 表格实例CSS 表格属性可以帮助您极大地改善表格的外观.CSS Table 属性属性 描述border-collapse 设置是否把表格边框合并为单一的边框.border-spacing 设置 ...
- CSS表格(未完成)
CSS 表格 使用 CSS 可以使 HTML 表格更美观. 表格边框 指定CSS表格边框,使用border属性. 下面的例子指定了一个表格的Th和TD元素的黑色边框:
- CSS：CSS 表格
ylbtech-CSS:CSS 表格 1.返回顶部 1. CSS 表格 使用 CSS 可以使 HTML 表格更美观. Company Contact Country Alfreds Futterkis ...
- css 表格
1.给元素的display属性添加为以下值 table : <table> table-caption :<caption> table-cell : <td> t ...
- 3月23.CSS表格布局
360表格布局: CSS定义标签: @charset "utf-8";/* CSS Document */.bt1{ border:#309 solid 1px; height:1 ...
- HTML学习笔记 CSS表格及轮廓案例 第八节 （原创）参考使用表
#tb, tb1, tr, th, td { border: 5px solid blue; /*加边框*/ padding: 5px; /*内边距*/ } #tb1 { border-collaps ...
随机推荐
- 【阿里云产品公测】简单粗暴30S完成PTS测试配置附tornado服务器测试结果
作者:阿里云用户morenocjm [阿里云产品公测]简单粗暴 30S完成PTS测试配置(附tornado服务器测试结果) -------------------------------------- ...
- 【Linux】chmod命令
格式chmod 权限 要修改权限的文件linux中的权限如下: -rw------- (600) -- 只有属主有读写权限. -rw-r--r-- (644) -- 只有属主有读写权限:而属组用户和其 ...
- shell定时采集数据到HDFS
上线的网站每天都会产生日志数据.假如有这样的需求:要求在凌晨 24 点开始操作前一天产生的日志文件,准实时上传至 HDFS 集群上. 该如何实现?实现后能否实现周期性上传需求?如何定时? Linux ...
- ul标签在FF中默认只有padding值(即：padding-left:40px)
- Selenium2学习（二）-- 操作浏览器基本方法
前面已经把环境搭建好了,这从这篇开始,正式学习selenium的webdriver框架.我们平常说的 selenium自动化,其实它并不是类似于QTP之类的有GUI界面的可视化工具,我们要学的是web ...
- WAKE-WIN10-SOFT-软件-Matlab配置及工具箱
1Matlab 1,1Matlab下载,安装,配置,,, 1,2 2工具箱 2,1LibSVM 必应:https://www.bing.com/search?q=libsvm&qs=n& ...
- 织梦Dedecms主要文件夹目录及模板文件说明
虽然织梦DedeCMS因为安全问题被人所诟病,但瑕不掩瑜,无论从用户群数量还是时间等各方面,织梦DedeCMS都是国内排名前几的CMS建站程序.如果你想学习CMS的二次开发,织梦DedeCMS是必须需 ...
- March 3 2017 Week 9 Friday
Each time you love, love as deeply as if it were forever. 如果爱,请深爱,就像能到地老天荒. If we can only encounter ...
- angularjs filter详解
过滤器(filter)正如其名,作用就是接收一个输入,通过某个规则进行处理,然后返回处理后的结果. 主要用在数据的格式化上,例如获取一个数组中的子集,对数组中的元素进行排序等. ng内置了一些过滤器, ...
- python 带BOM头utf-8的响应解码
接口响应编码格式为带BOM头utf-8.直接获取响应的text出现乱码. '''dinghanhua2018-11requests text与content,指定响应的encoding''' api ...