介绍在HTML中，Table节点由于其层层嵌套的节点结构，一度名声很臭，且一度被呼吁用DIV+CSS取而代之。
但在实际项目开发中，一碰到规整的数据显示， ...
变化多端–多种纯CSS的HTML表格设计
慢游
于 2015-08-0320:00:47 发布
30039
收藏
19
分类专栏：
CSS
文章标签：
css
html
版权声明：本文为博主原创文章，遵循CC4.0BY-SA版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/eengel/article/details/47261125
版权
CSS
专栏收录该内容
2篇文章
0订阅
订阅专栏
介绍
在HTML中，Table节点由于其层层嵌套的节点结构，一度名声很臭，且一度被呼吁用DIV+CSS取而代之。
但在实际项目开发中，一碰到规整的数据显示，不知不觉又会用起它。
可见其生命力之顽强。
这儿就探讨下几种不同的通过CSS实现的Table设计。
通过JavaScript渲染的效果不在此文讨论范围。
表格最终渲染效果在Firefox36.0或者Safari8.0.7下实现。
很可惜不是所有效果都能同时在两个浏览器中出现。
要说明的是，本文大部分内容可以说是对于DudleyStorey的博文”CSSDesignPatternsForHTML5Tables”中表格实现的一些整理，偷懒的原因，使用的样例表格也是来自其中。
有兴趣的童鞋可以逛逛他的博客，或者看看他出的书”ProCSS3Animation”（不知道有没有中译本？）。
当然根据思路后面也增加了一些本人的实现。
表格的HTML代码
没有特别研究过下面使用的HTML元素及属性是否符合HTML5规范，但设置doctype为支持HTML5的形式。
AmericanFilmInstitute’sTopFiveFilms
| Position
|
Movie
|
YearofRelease
|
| 1
|
CitizenKane
|
1941
|
| 2
|
TheGodfather
|
1972
|
| 3
|
Casablanca
|
1942
|
| 4
|
RagingBull
|
1980
|
| 5
|
Singin’InTheRain
|
1952
|
1. 传统网格状表格
效果
CSS代码
table{
border-collapse:collapse;
font-family:Futura,Arial,sans-serif;
}
caption{
font-size:larger;
margin:1emauto;
}
th,td{
padding:.65em;
}
th{
background:#555nonerepeatscroll00;
border:1pxsolid#777;
color:#fff;
}
td{
border:1pxsolid#777;
}
说明
几个要注意的地方：
-当渲染网格状表格时，往往说明对每个格子要加上边框。
因此对于, |
，都要加上border属性。
可想而知，如果这样的话，每个格子之间会出现两条边框。
而我们又希望它们之间的边框只有一条，因此需要设置的border-collapse属性为collapse。
-表头和表格内容不一样，需要单独渲染。
这儿通过设置的background、color属性改变了表头的背景色和文字颜色。
2. 斑马条纹表格
效果
CSS代码
在上面CSS基础上增加以下代码：
tbodytr:nth-child(odd){
background:#ccc;
}
说明
带有条纹的表格也非常经典。
当表格行数较多时，这样的表格比传统网格状表格更能看得清楚。
这个效果就是通过在 |
上调用CSS选择器nth-child(odd)完成的。
这儿的传入参数可以是一个表达式（an+b），或者build-in的函数，比如odd表示奇数(2n+1)，而even是偶数（2n）。
3. 圆角表格
效果
CSS代码
table{
border-collapse:collapse;
font-family:Futura,Arial,sans-serif;
}
caption{
font-size:larger;
margin:1emauto;
}
th,td{
padding:.65em;
}
th{
background:#555nonerepeatscroll00;
/*border:1pxsolid#777;*/
color:#fff;
}
td{
/*border:1pxsolid#777;*/
}
tbodytr:nth-child(odd){
background:#ccc;
}
th:first-child{
border-radius:9px000;
}
th:last-child{
border-radius:09px00;
}
tr:last-childtd:first-child{
border-radius:0009px;
}
tr:last-childtd:last-child{
border-radius:009px0;
}
说明
从最后面几个CSS来看，圆角主要通过border-radius属性实现。
选择的正是表格四个角上的四个/ |
元素。
不幸的是，在Firefox中只出现了上面两个圆角效果。
Safari中则都渲染出来了。
而border-radius属性和border属性并不捆绑，因此要做圆角时，需要将原来的网格线取消。
4. 线型表格
效果
CSS代码
table{
border-collapse:collapse;
font-family:Futura,Arial,sans-serif;
}
caption{
font-size:larger;
margin:1emauto;
}
th,td{
padding:.65em;
}
th,td{
border-bottom:1pxsolid#ddd;
border-top:1pxsolid#ddd;
text-align:center;
}
说明
这也是非常常用的一种表格设计，多用在展示科学结果上。
很多科学论文中往往会用这样的设计方式：简洁、明了。
实现的原理也很简单，将原来 |
/ |
上的border属性拆分开来，通过border-top和border-bottom只渲染上下的网格线。
当然为了格子之间不出现两条线，每个格子的线还要连到一起，务必设置的border-collapse属性为collapse。
5. 表格行上的立体悬停效果
效果
CSS代码
在上面CSS基础上增加以下代码：
tbodytr:hover{
background:linear-gradient(#fff,#aaa);
font-size:17px;
}
说明
总的来说，表格是一种二维呈现，HTML中产生的表格看起来就像和纸上画的一样。
但其实它也能实现一些立体的效果，就像这儿展示的，当鼠标悬停在某一行上时，该行突出在渐变的灰色背景上，字体微微变大，有一种被放大的效果。
这是通过在上加上hover选择器，并设置了background属性值为inear-gradient(#fff,#aaa)，并增加了font-size。
慢游
关注
关注
10
点赞
踩
2
评论
19
收藏
打赏
扫一扫，分享内容
点击复制链接
专栏目录
CSS表格样式设计
11-29
用示例方式展示如何用CSS进行表格样式设计
html表格设计（分列，设置边框）
最新发布
weixin_44074105的博客
04-14
652
先放一段代码，展示效果，再详细解释。
姓名
RhettButler<
评论 2
您还未登录，请先
登录
后发表或查看评论
HTML设计表格的相关知识
sumishiwo的博客
12-12
142
HTML表格设计
一、基本要点：
（1）表格由标签来定义
（2）... ：表示表格的行
（3）... | ：表示表格的列
（4）border：边框属性，显示带有边框的表格（在table标签中使用）
（5）width：表格宽度（在table标签中使用）
（6）height：表格高度（在table标签中使用）
（7）bgcolor：为整个表格或仅为一个单元格设置背景颜色
（8）
HTML表格设计
mamengna的博客
11-22
340
课程表
课程表&.
pythonxlsx样式谷歌开源样式_一个不错的table样式
weixin_39966130的博客
03-01
67
CSSTables/*CSSDocument*/body{font:normal11pxauto"TrebuchetMS",Verdana,Arial,Helvetica,sans-serif;color:#4f6b72;background:#E6EAE9;}a{color:#c75f3e;}#mytable{width:700px;padding:0;...
Html制作表格
qq_41815332的博客
03-13
4128
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
开发工具与关键技术：table
作者：伊利奶盒
撰写时间：2022年3月10日
表格在网页中可以更好的划分所需的内容，比如一个软件的下载地址，通过表格划分可以清楚的告诉使用者新版本增加了什么新功能，以及新版本和旧版本相对应的下载链接，又或者一个游戏的下载页面，通过表格可以清楚的告诉玩家支撑该游戏运行所需的最低配置和推荐配置具体是什么。
知道
HTML设计表格
zxh996的博客
07-02
289
HTML设计表格前言一、HTML中表格元素的认识二、表格案例1.案例代码及效果图2.案例代码分析总结
前言
前端的学习中HTML中的表格相信大家也了解了，这是一块简单而又易乱的知识点，所以我为大家简单的梳理了一下知识点，仅供参考学习。
一、HTML中表格元素的认识
二、表格案例
1.案例代码及效果图
代码如下（示例）：
我的课表
之后的两种都是用css实现的，这里先说一种
//边框什么的自己写吧
table{
//主要用到的就是这个属性，这个属性可以让边框重叠，就是让两个边框加一起没那么宽了
//实际上并不好使，因为涉及到重叠问题，坑就不说了
border-col
纯CSS美化HTML的Table
weixin_30301183的博客
05-30
1465
今天发觉一个很好的表格CSS代码：http://veerle-v2.duoh.com/blog/comments/a_css_styled_table
整体的CSS代码：
body{
font:normal11pxauto"TrebuchetMS",Verdana,Arial,Helvetica,sans-serif;
color:...
【HTML】简单的表格设计
weixin_45500506的博客
08-09
539
表格设计
其中再往表格里深入的标签为 |
|
(tableRow)代表行， | (tableData)代表具体到某一个单元格。
为了设计好看的表格，我们常用td标签里的colspan(跨列)，rowspan(跨行)来进行改变。
有了这些基础知识能很快设计一个简单的表格。
但是如果设计不规则表格该如何设计呢？最近我做到练习题就遇到这样一个表格。
总结了一种自己实用的手工过程来设计表格。
htmltable专业样式,html简单的table样式
weixin_30562025的博客
06-20
433
12345html简单的table样式67/*gridtable*/8table.gridtable{9font-family:verdana,arial,sans-serif;10font-size:11px;11color:#333333;12border-width:1px;13border-color:#666666;14bor...
html,table常用样式
11-30
html,table常用样式，适用于对htm样式美观有要求的项目
html表格制作
少油少盐不要辣
07-06
6094
利用table、tr、td等标签，来制作常见的表格。
2
3table.gridtable{
4f...
HTML中设计表格
qiangzhogshou的博客
09-26
3831
、、| 、 |
标签：
...
html简单的table样式
热门推荐
z_qifa的博客
07-03
2万+
效果预览：
代码：
1DOCTYPEhtml>
2html>
3head>
4metacharset="utf-8">
5title>html简单的table样式title>
6styletype="text/css">
7/*gridtable*/
8table.grid
好看的php表格样式,CSS_CSS实现的清爽、漂亮的表格样式分享，效果：
实现代码：复制代码-phpStudy...
weixin_30937427的博客
03-09
219
CSS实现的清爽、漂亮的表格样式分享效果：实现代码：复制代码代码如下:CSS实现的清爽、漂亮的表格样式-jb5t1.net/*CSSDocument*/body{font:normal11pxauto"TrebuchetMS",Verdana,Arial,Helvetica,sans-serif;color:#4f6b72;background:#E6EAE9;...
html+css:非常漂亮的4款html表格设计
weixin_30325793的博客
11-07
1万+
1.单像素边框CSS表格
这是一个很常用的表格样式。
源代码：
table.gridtable{
font-family:verdana,a...
“相关推荐”对你有帮助么？
非常没帮助
没帮助
一般
有帮助
非常有帮助
提交
©️2022CSDN
皮肤主题：大白
设计师：CSDN官方博客
返回首页
慢游
CSDN认证博客专家
CSDN认证企业博客
码龄14年
暂无认证
81
原创
4万+
周排名
60万+
总排名
50万+
访问
等级
5172
积分
135
粉丝
56
获赞
47
评论
128
收藏
私信
关注
热门文章
Highcharts中更新series的5种方法
39418
变化多端–多种纯CSS的HTML表格设计
30038
两种方法在Django框架中支持后台返回包含中文的JSON/数组格式
24819
在MacbookPro上为TensorFlow设置GPU
21890
在JAVAservlet中返回不同类型的AJAXresponse
20631
分类专栏
WebApplicationFramework
11篇
Dojo
32篇
JavaScript
19篇
Perl
1篇
Browser
6篇
HCI&UI&UE
5篇
Statistics
15篇
Paper
3篇
Plan
2篇
Struts
4篇
CSS
2篇
D3
7篇
Database
1篇
Bayes
MachineLearning
6篇
Python
TensorFlow
2篇
Visualization
Highcharts
1篇
SQL
最新评论
Highcharts中更新series的5种方法
薛李淑月:
varchart=$('#container').highcharts();
用D3.js进行医疗数据可视化（五）饼图(PieChart)
qq_46530178:
我也想做一个按年份动态变化的饼图
用D3.js进行医疗数据可视化（五）饼图(PieChart)
qq_46530178:
可以请教一下数据源怎么弄吗？
Highcharts中更新series的5种方法
邯郸魏县鸭梨:
学习了牛牛牛妞妞
也谈分离JavaScript和HTML
qq_32236925:
学习了，感谢您的分享。
您愿意向朋友推荐“博客详情页”吗？
强烈不推荐
不推荐
一般般
推荐
强烈推荐
提交
最新文章
用SQL进行多值列拆分成二值列的一个实现
Highcharts中更新series的5种方法
在MacbookPro上安装支持GPU的TensorFlow
2017年8篇
2016年7篇
2015年8篇
2014年3篇
2013年16篇
2012年6篇
2011年45篇
目录
目录
分类专栏
WebApplicationFramework
11篇
Dojo
32篇
JavaScript
19篇
Perl
1篇
Browser
6篇
HCI&UI&UE
5篇
Statistics
15篇
Paper
3篇
Plan
2篇
Struts
4篇
CSS
2篇
D3
7篇
Database
1篇
Bayes
MachineLearning
6篇
Python
TensorFlow
2篇
Visualization
Highcharts
1篇
SQL
目录
打赏作者
慢游
你的鼓励将是我创作的最大动力
¥2
¥4
¥6
¥10
¥20
输入1-500的整数
余额支付
(余额：--)
扫码支付
扫码支付：¥2
获取中
扫码支付
您的余额不足，请更换扫码支付或充值
打赏作者
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额
0
抵扣说明：
1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、C币套餐、付费专栏及课程。
余额充值
|
|
