表格设计

最新推荐文章于 2023-03-04 18:59:25 发布

就想糊糊涂涂

最新推荐文章于 2023-03-04 18:59:25 发布

阅读量297

点赞数

分类专栏：前端基础文章标签： css

本文链接：https://blog.csdn.net/qq_45626944/article/details/109366702

版权

前端基础专栏收录该内容

25 篇文章 0 订阅

订阅专栏

简单整理一下今天学习的表格设计

table：表格
tr：行
th：列
td：表头（默认加粗）
border属性：边框，主要属性包括：border-style(线性)、border-width、border-color；
vertical-align:单元格文字位置：top,bottom,right,left;
tr:hover{background-color:red} ：鼠标悬停变化；
padding：内边距
tr:nth-child(oven){background-color:red}：偶数行表格背景颜色设置，ven可改动
源码如下：

<html>
    <head>
        <title>表格效果</title>
        <style>
            
            table{
                border-collapse: collapse;
            }
            table{
                width: 100%
                
            }
           table, th,tr,td{
                border-width: 10px;
                border-color: blue;
                border-style:dashed;
                text-align: center; 
                background-color: aquamarine;
                padding: 50px;
                
            }
            
            
            tr:hover{background-color:pink;}
        </style>
    </head>
    <body>
        <div>
            <table>
                <tr>
                    <th>姓名</th>
                    <th>学号</th>
                </tr>
                
                <tr>
                    <td>xmc</td>
                    <td>2018</td>
                </tr>
                <tr>
                    <td>wjl</td>
                    <td>2019</td>
                </tr>
            </table>
            
        </div>
    </body>
</html>

效果图如下：
在这里插入图片描述

就想糊糊涂涂

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
表格设计

简单整理一下今天学习的表格设计table：表格tr：行th：列td：表头（默认加粗）border属性：边框，主要属性包括：border-style(线性)、border-width、border-color；vertical-align:单元格文字位置：top,bottom,right,left;tr:hover{background-color:red} ：鼠标悬停变化；padding：内边距tr:nth-child(oven){background-color:red}：偶数行表格背景
复制链接

扫一扫

专栏目录