css表格样式的设计

　CSS中关于表格样式的设计

　　　　将数据以更直观的方式展示给用户，可以更好的增强用户体验，因此，良好的表格设计就显得愈发重要。

　　（一）表格的构成（HTML部分）

　　　　表格的标签构成较多，需要理解和掌握，详细信息可访问本人另一篇博文

　　　http://www.cnblogs.com/zhouyanlife/p/8673422.html

　　（二）表格基本样式设计

　　　　设计表格样式考虑的要素，表格边框，字体大小，背景颜色，内外边距等等。

　　　1、css设计和布局的核心是盒模型，因此在设计表格样式时也要考虑到盒模型，可以利用padding属性将盒子撑开

.tb tr,.tb td{
            border: 1px solid #000;
            padding:20px;    /*此时整个div是最外层的盒子，table是包裹整个表格的盒子，设置每一行每一列的内边距就可以把盒子撑开*/
        }

　　　　2、利用col元素可以设置整列样式

.tb .col1{
            background: #edf931;/*设置整列样式*/
        }
        #col_only{
            background:#1de96a;/*设置整列样式*/
        }

　　　　3、利用css中的:nth-child()选择器，选择性的选择行进行样式设置

/*nth-child()选择器，选择父元素中指定的子元素，可以传入odd,even或者数字*/
        .tb tr:nth-child(even){
            background: red;
        }

　　　　4、设置边框样式，将边框折叠

table.tb{
            border-collapse: collapse;  /*表格边框折叠，大部分表格都是这样*/
            border-spacing: 0;            /*控制单元格之间的距离*/
            text-align: center;         /*让文字居中*/
            color:#333;
        }

　　通过上述的简单设置，就可以设计出简单的样式：

　　　　

　　再将字体大小，颜色，悬浮状态等加以设计，就可以呈现出更加优秀的效果

 

　　 参考：精通css高级web标准解决方案

　　　　　w3cschool  http://www.w3school.com.cn/