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

最新推荐文章于 2024-08-14 12:55:09 发布

索儿呀

最新推荐文章于 2024-08-14 12:55:09 发布

阅读量8.5w

点赞数 148

分类专栏： HTML，CSS，JS 文章标签：表格 html css 美观漂亮

本文链接：https://blog.csdn.net/Zhangguohao666/article/details/103425303

版权

HTML，CSS，JS 专栏收录该内容

8 篇文章 4 订阅

订阅专栏

最终效果：利用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;
}