css基础样式----表格控件学习

表格：<table></table>  表行：<tr></tr>  单元格：<td></td>

常用属性：

1.    border 设置表格边框样式

2.    width/height  设置表格的宽度和高度

3.    cellpadding 单元格边框与内容之间的间距

4.    cellspacing 单元格之间的间距

5.    align:left|center|right 规定表格相对周围元素的对齐方式

6.    <tr> align/valign

7.    <td>元素：align/valign/width/height/colspan/rowspan

表格复杂应用：

       <table>

              <caption>表格标题</caption>

              <thead></thead>

              <tbody></tbody>

              <tfoot></tfoot>

</table>

不规则表格示例：

思考：

1.    设置表格边框

我们可以看出上面的表格中边框设计不美观。

1）<style>

     table{border:1px solid red}

     table td{border:1px solid red}

    </style>

但这样会导致双边框，边框会变粗。

2）对table中的td设置左与上边框，对table设置右和下边框。

 

2.    表格奇偶行变色

两种方式：

1） 纯css代码

   /*奇数行*/

         table tbody tr:nth-child(odd) td { background-color: #ffffff; }

         /*偶数行*/

         table tbody tr:nth-child(even) td { background-color: #efefef; }

2） 通过jquery和css的方式

首先在css中定义奇偶行的样式，

.odd { background-color: #ffffff; }

.even { background-color: #efefef; }

 

然后通过jQuery将样式添加到table中。

<script type="text/javascript">

    $(function(){

        $("#table01tbody tr:odd").addClass("odd");//odd为偶数行

        $("#table01tbody tr:even").addClass("even")//even为偶数行

    })

</script>