前端学习笔记74-表格的样式

最新推荐文章于 2024-04-19 20:39:07 发布

小欣CZX

最新推荐文章于 2024-04-19 20:39:07 发布

阅读量1k

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/weixin_45034895/article/details/116501969

版权

小白前端学习专栏收录该内容

100 篇文章 7 订阅

订阅专栏

前端学习笔记74-表格的样式

宽度
边框
- border-spacing
- border-collapse
颜色相间
td元素

宽度

首先，table是块元素，但是它有点不同，它的宽度是被内容撑开的，剩下的为margin。
当然，这个宽度是可以设置的。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table{
            width: 50%;
        }
    </style>

</head>

<body>
    <table>
        <tr>
            <td>学号</td>
            <td>姓名</td>
            <td>性别</td>
            <td>年龄</td>
            <td>地址</td>
        </tr>
        <tr>
            <td>1</td>
            <td>孙悟空</td>
            <td>男</td>
            <td>18</td>
            <td>花果山</td>
        </tr>
        <tr>
            <td>2</td>
            <td>猪八戒</td>
            <td>男</td>
            <td>28</td>
            <td>高老庄</td>
        </tr>
        <tr>
            <td>3</td>
            <td>沙和尚</td>
            <td>男</td>
            <td>38</td>
            <td>流沙河</td>
        </tr>
        <tr>
            <td>4</td>
            <td>唐僧</td>
            <td>男</td>
            <td>16</td>
            <td>女儿国</td>
        </tr>
    </table>
</body>

</html>

在这里插入图片描述
这里我设置50%。

边框

看代码，

    <style>
        table{
            width: 50%;
            border: 1px solid black;
        }
    </style>

在这里插入图片描述
这里只有外面的边框，内部没有，如果想内部有边框，要咋办？

        table{
            width: 50%;
            border: 1px solid black;
        }
        td{
            border:1px solid black;
        }

在这里插入图片描述
那么问题又来了，由于我们设置的是td的边框，所以每个格子间有缝隙。如果我想设置这个缝隙，咋办？

border-spacing

这个是设置边框之间的距离的。

    <style>
        table{
            width: 50%;
            border: 1px solid black;
            border-spacing: 0px;
        }
        td{
            border:1px solid black;
        }
    </style>

在这里插入图片描述
虽然我设置为0后边框重叠了，但是这个边框放大后实际有2px，如何得到一个1px的无间隙边框呢？

border-collapse

        table{
            width: 50%;
            border: 1px solid black;
            border-collapse: collapse;
        }
        td{
            border:1px solid black;
        }

在这里插入图片描述
设置了这个之后，前面的border-spacing就没用了。

如果我们表格很长很宽，那么在看表格时，很难确定是否为同一行的数据，有一种方法就是不同行颜色不一样，要咋做？

颜色相间

        tr:nth-child(2n+1){
            background-color: #bfa;
        }

在这里插入图片描述
如果这里，我的写法改一下，代码如下，

        table>tr:nth-child(2n+1){
            background-color: #bfa;
        }

在这里插入图片描述
tr为table子元素，为啥这么写没变色？

再改一下，

        tbody>tr:nth-child(2n+1){
            background-color: #bfa;
        }

在这里插入图片描述
这是啥情况，代码中根本没有用到tbody，为啥style中写tbody反而有效？

原因：如果我们没写tbody，而是直接使用tr，则浏览器会自动创建一个tbody，并且将tr全都放到tbody中。所以tr全都是tbody的子元素，而table的子元素中没有tr。

td元素

td中的东西默认是垂直居中的，可以用vertical-align和text-align修改。

        td{
            border:1px solid black;
            height: 100px;
            vertical-align: middle;
            text-align: center;
        }

在这里插入图片描述
这里td可以用这两个样式修改位置的特点，可以用于其他地方。
比如，我想把下面代码中的box2移动到box1中间，怎么做？

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        .box1{
            width: 300px;
            height: 300px;
            background-color: orange;



        }

        .box2{
            width: 100px;
            height: 100px;
            background-color: yellow;

        }
    </style>

</head>

<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
    
</body>

</html>

在这里插入图片描述
这里可以将box1设置为单元格。

        .box1{
            width: 300px;
            height: 300px;
            background-color: orange;
            display:table-cell ;
            text-align: center;
            vertical-align: middle;
        }

在这里插入图片描述
从结果可以看到，水平居中没有用，只有垂直居中有用，所以水平居中还是得用margin。

        .box1{
            width: 300px;
            height: 300px;
            background-color: orange;
            display:table-cell ;
            vertical-align: middle;
        }

        .box2{
            width: 100px;
            height: 100px;
            background-color: yellow;
            margin: 0 auto;
        }

在这里插入图片描述

小欣CZX

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
1
评论
前端学习笔记74-表格的样式

前端学习笔记74-表格的样式宽度边框border-spacingborder-collapse颜色相间td元素宽度首先，table是块元素，但是它有点不同，它的宽度是被内容撑开的，剩下的为margin。当然，这个宽度是可以设置的。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" con
复制链接

扫一扫