CSS16.表格

最新推荐文章于 2023-10-09 09:49:31 发布

时光无错孤独难谈

最新推荐文章于 2023-10-09 09:49:31 发布

阅读量101

点赞数

分类专栏： html5 && css

本文链接：https://blog.csdn.net/qq_43745403/article/details/104311699

版权

html5 && css 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <style type="text/css">
            table{
                /* 宽度 */
                width: 300px;
                /* 居中 */
                margin: 0 auto;
                /* 边框 */
                border: black 1px solid;
                /* 
                    table和td边框之间默认有距离
                    通过border-spacing属性可以设置这个距离
                 */
                 border-spacing: 0px;
                /* 
                    border-collapse可用来设置边框合并
                 */
                 border-collapse: collapse;
            }
            td , th{
                border: 1px solid black;
            }
            /* 鼠标移动变色 */
            tr:hover{
                background-color: yellow;
            }
            /* 隔行变色 */
            tr:nth-child(odd){
                /* even偶数行，odd奇数行 */
                background-color: pink;
            }

        
        </style>


    </head>
        
    <body>
        <!-- 
            table(块元素)创建表格
            用tr表示一行
            在tr中用td创建一个单元格
            几行几个tr,几个格子几个td
        -->
        <!-- rowspan纵向合并单元格 数字几就合并几个 -->
        <!-- <td rowspan="2">A3</td> -->
        <!-- colspan横向合并单元格 -->
        <!-- <table border="200" width="40%" align="center"> -->


         <table width="40%" align="center">
            <tr>
                <!--  
                    可以使用th标签表示表头的内容
                    用法和td一样，但是有些特殊效果
                -->
                <th>学号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>地址</th>
            </tr>
            <tr>
                <td>1</td>
                <td>唐僧</td>
                <td>男</td>
                <td>大唐</td>
            <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>

时光无错孤独难谈

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS16.表格

<!DOCTYPE html><html> <head> <meta charset="UTF-8"/> <style type="text/css"> table{ /* 宽度 */ width: 300px...
复制链接

扫一扫