HTML&CSS基础-表格的样式

　　　　　　　　　　　　　HTML&CSS基础-表格的样式

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　作者：尹正杰

版权声明：原创作品，谢绝转载！否则将追究法律责任。

 

 

一.HTML源代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>表格的样式</title>
        <style type="text/css">
            
            table{
                /*设置表格的宽度*/
                width: 300px;
                /*设置居中*/
                margin: 0 auto;
                 /*设置边框*/
                 /*border: 1px solid black;*/
                 /**
                  *     table的td之间默认有一个距离，通过border-spacing属性可以设置这个像素
                  */
                 /*border-spacing: 0px;*/
                 /**
                  *     border-collapse可以用来设置表格的边框合并，如果设置了该属性，border-spacing会自动失效
                  */
                 border-collapse: collapse;
            }
            
            /**
             *     伪类nth-child的even参数可以选中偶数行，而odd则可以选中奇数行。
             * 
             *     温馨提示:
             *         nth-child属性IE8及以下版本并不支持，若非要达到相同的效果则需要引入JS来搞事情。
             */
            tr:nth-child(even){
                background-color: yellow;
            }
            
            /**
             *     当鼠标移入到tr标签后，会改变颜色
             */
            tr:hover{
                background-color: deeppink;
            }
            
            /*为td标签设置样式*/
            td,th{
                /*设置边框*/
                border: 1px solid black;
            }
        </style>
    </head>
    <body>
        
        <table>
            <!--
                table是块元素
            -->
            <tr>
                <!--
                    可以使用th标签来表示表头的内容，它的用法和td一样，不同的是他会有一些默认效果(居中，加粗)
                -->
                <th>学号</th>
                <th>姓名</td>
                <th>性别</td>
                <th>住址</td>
            </tr>
            
            <tr>
                <td>1</td>
                <td>唐三藏</td>
                <td>男</td>
                <td>东土大唐</td>
            </tr>
                        
            <tr>
                <td>2</td>
                <td>孙悟空</td>
                <td>男</td>
                <td>花果山水帘洞</td>
            </tr>
            
            <tr>
                <td>3</td>
                <td>猪八戒</td>
                <td>男</td>
                <td>高老庄</td>
            </tr>
            
            <tr>
                <td>4</td>
                <td>沙和尚</td>
                <td>男</td>
                <td>流沙河</td>
            </tr>
            
            <tr>
                <td>5</td>
                <td>白龙马</td>
                <td>男</td>
                <td>东海龙宫</td>
            </tr>
            
            <tr>
                <td>6</td>
                <td>哪吒</td>
                <td>男</td>
                <td>陈唐关</td>
            </tr>
            
            <tr>
                <td>7</td>
                <td>如来佛祖</td>
                <td>男</td>
                <td>西方极乐</td>
            </tr>
            
            <tr>
                <td>8</td>
                <td>牛魔王</td>
                <td>男</td>
                <td>铁扇公主洞府</td>
            </tr>
            
            <tr>
                <td>9</td>
                <td>太白金星</td>
                <td>男</td>
                <td>太白金星府</td>
            </tr>
            
            <tr>
                <td>10</td>
                <td>女儿国女王</td>
                <td>女</td>
                <td>女儿国</td>
            </tr>
            
            <tr>
                <td>11</td>
                <td>观音大师</td>
                <td>男</td>
                <td>南海</td>
            </tr>
            
            <tr>
                <td>12</td>
                <td>红孩儿</td>
                <td>男</td>
                <td>红孩儿洞府</td>
            </tr>
        </table>
    </body>
</html>

 

二.浏览器打开以上代码渲染结果

 

 

posted @ 2018-10-19 00:40  尹正杰  阅读(4647)  评论(0)  编辑  收藏  举报