Html+CSS | 1段CSS让表格更漂亮 建议收藏

html-css022

Html+CSS | 1段CSS让表格更漂亮 建议收藏,第1张

使用border-collapse: collapse去掉表格线间的空白。

使用:nth-child(even)选择表格中的偶数行,进行修改背景色,如果选择奇数行,使用odd选择奇数。

使用:last-of-type选择最后一个元素进行画表格底线

使用colspan进行行合并

使用rowspan进行列合并

使用表格美化页面是很多年前以前流行的做法,现在网页都在使用div+css来美化页面。

使用表格美化页面也就是利用表格的结构固定不同的网页元素,让网页元素按照预想的设计有序地排列,达到美观的效果。

比如制作一个类似百度知道这样布局的页面,用表格大致可以如此设计

大体搭建之后,可以再利用表格的对齐、单元格的拆分、合并、表格嵌套等功能细致设计每个网页元素的位置,然后可以在表格插入图片、表单、文字等等,可以通过修改表格边框、网页背景色、表格背景色、图片、文字颜色、字体等等综合在一起进行网页美化。

table自带的border属行显得很生硬。建议请将table的cellspacing设置为1,然后给table设置一个背景,给所有的td设置白色背景,这样td和td之间空出来的一像素就会显示为table背景的颜色形成一种边框效果,宽度和颜色可以随意控制,甚至能使用图片。满意请采纳,谢谢!