Day 26

2月5日，可能是因为最近没怎么吃饭，或者吃饭不规律，胃经常疼，希望别落下病根。

表格数据操作
1.Table 元素

（1）一般元素：table、tr（table row）、td（table data）、th（table head）。

（2）结构化元素：caption、thead、tbody、tfoot。

（3）元素说明：table的head、body、foot可把表格分组显示，头部信息放在thead中，body放在tbody中，末尾总结信息放在tfoot中。例如：

<table>
    <caption>
        迟到人员统计
    </caption>
    <thead>
        <tr>
            <th>姓名</th>
            <th>迟到次数</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>张三</td>
            <td>2</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="2">总人数： 33</td>
        </tr>
    </tfoot>
</table>
迟到人员统计
姓名 迟到次数
张三 2
总人数： 33 
（4）table边框border间隙设置：border-collapse（值包含collapse、separate、inherit）边框间隙是否可见、border-spacing单元格与单元格之间border的空隙宽度。例如下面的样式设置border间隙可见，间隙宽度为5px：

table{
    border-collapse: separate;
    border-spacing: 5px;
    border: 1px solid red;
}

 （5）如何显示行分割线：首先要设置border间隙border-collapse为collapse，然后设置th和td的border-bottom。样式代码如下：

table{
    border-collapse: collapse;
}

td, th{
    border-bottom: 1px solid #cecfd5;
}

tfoot tr:last-child td{
    border-bottom: none;
}
 

（6）交替行背景设置：通过伪类选择器:nth-child()方法以及参数even和odd选中奇数或偶数行可实现奇偶行交替显示。样式代码如下：

table{
    border-collapse: collapse;
}

thead{
    background: #395870;
    color: #fff;
}
tbody tr:nth-child(even){
    background: #f0f0f2;
}

（7）border-collapse属性说明：建议设置值为separate，如果不设置为separate，带边框的body和foot比head宽一些。所以一般都建议设置border-collapse为separate并且border-spacing为0。下面代码实现带边框的交替行背景：

table{
    border-collapse: separate;
    border-spacing: 0;
}

thead{
    background: #395870;
    color: #fff;
}

th, td{
    padding: 10px 15px;
}

td{
    border-bottom: 1px solid #cecfd5;
    border-right: 1px solid #cecfd5;
}

 td:first-child{
     border-left: 1px solid #cecfd5;
 }

tbody tr:nth-child(even){
    background: #f0f0f2;
}

2.本文对齐

（1）对齐属性：通过text-align、vertical-align设置单元格对象方式。

（2）对齐规则：name和desc等文本信息一般左对齐，而数字类型一般右对齐。

3.选择器

（1）:first-child、:last-child:例如p:first-child{}选择父元素中第一个子元素并且这个元素名称是p。last-child同理。

（2）:nth-child(even/odd):选择奇、偶元素。在表格交替设置背景色中用的比较多，例如: tbody tr:nth-child(even)表示赛选tbody中tr是偶数行的tr。

（3）:first-of-type、last-of-type、only-of-type：和first-child或者last-child相似，分别表示选择包含父类的第一个元素、选择包含父类的最后一个元素、选择父元素只有一个元素的元素。例如下面代码表示赛选tr下只有一个td元素的所有所有td元素：

tbody td:only-of-type {
    padding-left: 0;
    padding-right: 0;
}

（4）:first-child和:first-of-type区别：first-child筛选的元素必须是父元素的第一个元素，而first-of-type筛选的元素可以不用是父元素的第一个元素，只要被父元素包含即可筛选到。下面的代码中first-child值筛选到第一个div下的p元素，而first-of-type两个div下的p元素都筛选到了。

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <style type="text/css">
             p:first-child{
                 color: red;
             }
            p:first-of-type{
                color: blue;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div>
                <p>111</p>
            </div>
            <div>
                <span>
                </span>
                <p>222</p>
            </div>
        </div>
    </body>
</html>
posted @ 2025-02-06 23:35  阿伟·  阅读(22)  评论(0)    收藏  举报