leiyanting

导航

 
前端基础---表格(二)
                 * table和td边框之间默认有一个距离
                 *  通过border-spacing属性可以设置这个距离
                 * border-collapse可以用来设置表格的边框合并
                 * 如果设置了边框合并，则border-spacing自动失效
　　
<!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;
                /*设置背景样式*/
                /*background-color: #bfa;*/
            }
            
            /*
             * 设置边框
             */
            td , th{
                border: 1px solid black;
            }
            
            /*
             * 设置隔行变色
             */
            tr:nth-child(even){
                background-color: #bfa;
            }
            
            /*
             * 鼠标移入到tr以后，改变颜色
             */
            tr:hover{
                background-color: #ff0;
            }
            
            
        </style>
    </head>
    <body>
        <!--
            table是一个块元素
        -->
        
        <table>
            <tr>
                <!--
                    可以使用th标签来表示表头中的内容，
                        它的用法和td一样，不同的是它会有一些默认效果
                -->
                <th>学号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>住址</th>
            </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>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>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>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>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>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>
        </table>
        
    </body>
</html>

 

posted on 2021-07-02 19:01  leiyanting  阅读(48)  评论(0)    收藏  举报
 
博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3