表格样式

2022-07-05 09:07:21 阅读：150 来源： 互联网

标签：表格样式 align 元素 tr tbody table border

<!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%;
            border:1px solid black;
            margin:0 auto;

            /* border-spacing 指定边框之间的距离 */
            border-spacing:2px;
            /* 设置collapse之后border-spacing就没用了 */

            /* 设置边框的合并 */
            border-collapse:collapse;
        }

        td{
            border:1px solid black;
            /* 默认情况下元素在td中是垂直居中的，
                可以通过vertical-align来修改
            */
            height:100px;
            /* top bottom middle */
            vertical-align: bottom;
            text-align: center;
        }

        /* 
            如果表格中没有使用tbody而是直接使用tr,
                那么浏览器会自动创建一个tbody, 并且将tr全都放到tbody中
            tbody > tr
            table   tr   tr不是table的子元素，而是后代元素
         */
        /* 2n+1或者odd */
        tr:nth-child(2n+1){
            background-color: #bfa;
        }

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

            /* 将元素设置为单元格td */
            display:table-cell;
            /* 使元素垂直居中 */
            vertical-align:middle;
        }

        .box2{
            width:100px;
            height:100px;
            background-color: yellow;
            /* 使元素水平居中,还是得用margin
               使文字水平居中，可以使用text-align：center;
             */
            margin:0 auto;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>

    <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>

标签：表格,样式,align,元素,tr,tbody,table,border
来源： https://www.cnblogs.com/sherryyuan/p/16445105.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

表格样式