请选择 进入手机版 | 继续访问电脑版
网络

教育改变生活

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 693|回复: 0

【HTML5:第九章 盒模型相关样式】案例-表格

[复制链接]

232

主题

233

帖子

1010

积分

版主

Rank: 7Rank: 7Rank: 7

积分
1010
发表于 2022-1-12 10:59:34 | 显示全部楼层 |阅读模式
<!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>

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

WEB前端

QQ|手机版|小黑屋|金桨网|助学堂  咨询请联系站长。

GMT+8, 2023-2-4 19:36 , Processed in 0.167168 second(s), 22 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表