教你如何用原生css和html搭建一个好看的Table表格

大家在学习标签的时候，可能还没有接触css，所以你做出来的表格可能是这样的：

或者是这样的：

大家有想过自己做一个漂亮的表格吗？我知道大家在做项目的时候大概率会去当下流行的UI框架中找已经封装好的表格来使用，就像layui的表格：

但大家真的考虑过如何写一个好看的表格吗？表格背景色的交替变化大家有考虑过吗？大家亲手实现过吗这可是博主面试字节跳动时候的面试题啊！(虽然失败告终，还是自己太菜)。这些都是非常重要的基础，这篇博文，跟着博主一起做一个好看的表格，拒绝使用框架。

首先当然是先把标签架子写出来，就好比捏泥人一样，必先设置好钢丝骨架，后再用泥贴敷。这块比较简单，使用的一系列标签。

效果是这样的：

很简陋对吧，我们用css来美化一下，首先就是基数行颜色和偶数行颜色不同。实现思路是使用nth-child(2n)和nth-child(2n+1)来为奇数行和偶数行设置对应的背景颜色。话不多说，开始写：

我们看看现在的效果:

现在我们已经实现了基偶行颜色的变换，细心的同学可能发现单元格之间是有一定间隙的，我们使用css的border-spacing来处理，同时我们给表格设置行高以及字体样式：

编译后的css

看效果：

大工告成，当然table标签自己也是有一些控制样式的属性，但我们还是要按照w3c推荐的：使用css3来全局控制样式。

一般常见的需求是这样的：

你会发现表格里的所有内容会整体往右移动一段距离，这会有两种解决办法：