今天给大家分享的是使用html和css 实现一个漂亮的表格样式，在实际的项目中，也会常遇到制作表格的需求，好看的表格自然能更吸引人，下面我们就来具体看看怎样实现吧。

    css怎么实现表格样式？

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

    前言：

    不过，表格还是有用的：

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

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

    一：表格标签讲解

    二：纯HTML效果

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

    html：

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

    三：用CSS修改表格样式

    css：

    有兴趣的可以继续看看：

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

    border-collapse

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

    :nth-child()

    :nth-child()是伪类

伪类是选择器的一种

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

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

（）内的参数：

    :first-child()

    :first-child()是伪类

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

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

    :hover

    :hover是伪类

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

    即我通过这个伪类，实现了我鼠标悬停在表格主体的某个地方时，整行变色    关于css实现好看的表格样式就介绍到这了，有需要的朋友可以参考上述代码，希望大家阅读完这篇文章能有所收获，想要了解更多css表格样式的实现，请关注群英网络其它相关文章。