html、css 实现一个漂亮的表格

最终效果：利用html、css制作一个美观、大方的表格，而且很简单，容易上手。

前言：

在css出现之前，网页通常使用表格布局；
如今，时代变了，表格不再适用于网页布局，
因为表格的渲染速度过慢
浏览器要将表格渲染完，才会显示

不过，表格还是有用的：

对于开发者来说，一般在后台管理系统中使用到表格
对于初学者来说，表格特别容易上手，并且制作出精美的效果

网站通常分为前台、后台两部分

前台：面向用户

后台：面向管理员（对界面要求不高，对功能性要求高）

如今，h5的时代正在来临，我们需要明确一个观点，HTML只负责网站的骨架，html标签元素是有语义化的（给搜索引擎看的）；而网站的样式是靠css来负责的

一：表格标签讲解

表格（table）
table标签下有这么四个子标签：caption、thead、tbody、tfoot（可写可不写）
表格标题（caption）
表头（thead）
有子元素 tr
表格主体（tbody）
有子元素 tr
表尾（tfoot）
有子元素 tr
表格是一行一行元素组成的，表格行（tr）
有子元素 th 和 td
表格被行、列划分为多个单元，标题单元格（th）、单元格（td）
习惯上，th 出现在thead内

二：纯HTML效果

确实丑，但是往后面看，加了css后，丑小鸭就变白天鹅了

html：

代码又长又无趣，我就不把它全部显示出来了（tbody标签折叠的内容就是10个tr标签，每个tr标签内部有5个td标签）

表格的单元格合并
td标签的两个属性：colspan、rowspan
跨列：<td colspan='5'></td>，如上，合并一行中的5列单元格
跨行：<td rowspan='2'></td>，合并一列中的2行单元格

三：用CSS修改表格样式

css：

table{width: 100%;border-collapse: collapse;
}table caption{font-size: 2em;font-weight: bold;margin: 1em 0;
}th,td{border: 1px solid #999;text-align: center;padding: 20px 0;
}table thead tr{background-color: #008c8c;color: #fff;
}table tbody tr:nth-child(odd){background-color: #eee;
}table tbody tr:hover{background-color: #ccc;
}table tbody tr td:first-child{color: #f40;
}table tfoot tr td{text-align: right;padding-right: 20px;
}

有兴趣的可以继续看看：

四：上述CSS中几个有意思的知识点

border-collapse

border-collapse是table标签的一个属性，有两个取值：

seperate 边框之间分离
collapse 两两相临边框合并

:nth-child()

:nth-child()是伪类

伪类是选择器的一种

table tbody tr:nth-child(odd)

意思：必须是tr元素，必须是table tbody下的第奇数个子元素

正是用这个伪类，我实现了表格中表格主体内的奇数行和偶数行的背景颜色不同

（）内的参数：

odd或者2n+1：第奇数个
even或者2n：第偶数个
6n：第6、12、18、24、… 、6n个
5：第5个

:first-child()

:first-child()是伪类

table tbody tr td:first-child

意思：选中table tbody tr下，第一个子元素并且必须是td元素

利用这个伪类，我实现了将表格主体的第一列全部单元的背景颜色改了

:hover

:hover是伪类

table tbody tr:hover

意思：选中鼠标悬停的table tbody下tr标签

即我通过这个伪类，实现了我鼠标悬停在表格主体的某个地方时，整行变色

html、css 实现一个漂亮的表格相关推荐

用HTML+CSS做一个漂亮简单的个人网页~个人相册介绍个人主页模板(6个页面) ~学生HTML个人网页作业作品~
用HTML+CSS做一个漂亮简单的个人网页 ~ 个人相册介绍个人主页模板(6个页面) 学生HTML个人网页作业作品临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作 ...
用HTML+CSS做一个漂亮简单的个人网页~个人相册介绍个人主页模板(6个页面) ~学生HTML个人网页作业作品~...
用HTML+CSS做一个漂亮简单的个人网页 ~ 个人相册介绍个人主页模板(6个页面) 学生HTML个人网页作业作品临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作 ...
html如何制作一个漂亮的表格？+ 列表制作 + 表单制作（干货！直接收代码）
https://blog.csdn.net/hanhanwanghaha宝藏女孩欢迎您的关注! 欢迎关注微信公众号:宝藏女孩的成长日记如有转载,请注明出处(如不注明,盗者必究) 目录 html如何 ...
如何用JAVA制作一个漂亮的表格
如何用JAVA制作一个漂亮的表格表格图片: 选中一行时高亮显示,且字体变为红色: 在表格中添加数据: 代码如下: import java.awt.BorderLayout; import java. ...
用HTML和CSS实现一个漂亮的个人博客页面！
文章目录网站结构社交网站个人信息页面实现代码 html CSS代码图片包网站结构社交网站的个人信息页面主要由div.element嵌套三个<div>标签构成了页面的三个模块. ...
表格下拉_【职场充电】要说制作一个漂亮的表格，高手都爱WPS
点击蓝字关注我们 Subscribe for More 表格的默认样式千篇一律,难免会造成视觉疲劳,为了让表格更加美观,可以在创建表格之后,对表格进行格式设置,包括文字方向.对齐方式.内置样式和自 ...
用HTML+CSS做一个漂亮简单的个人网页（第二篇）
时隔三年我把之前给我妹写的毕业论文的网站页面写出来一下哈供各位小伙伴参考参考哈不接受批评反驳哈哈哈哈哈哈哈都是我自己胡乱搭的图片和文字可自行更改,按照自己的审美喜好来哈! 先看页面的图片哈首 ...
[Demo]用简单的html，css做一个漂亮的网页！
下面是实现效果: 预览地址:https://jh-leong.github.io/Dmeo/ife_1/index.html 代码如下: html <!DOCTYPE html> < ...
PhpExcel 写一个漂亮的表格
文章不长,文章不长,文章不长本表格是模仿橙心优选团长面单来做的先上表格思路确定总共有多少列,需要确定表头要合并多少单元格,可以多预留 1~2 列,如果用不到,最后把宽度设置为 0 剩下的就是合 ...

html、css 实现一个漂亮的表格

html、css 实现一个漂亮的表格相关推荐

最新文章

热门文章