HTML表格样式及布局（table）

「已注销」

已于 2022-12-20 17:01:16 修改

阅读量650

点赞数

分类专栏：前端代码分享文章标签： html css css3

于 2022-12-20 16:43:51 首次发布

本文链接：https://blog.csdn.net/2201_75652841/article/details/128386899

版权

前端同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

代码分享

4 篇文章 0 订阅

订阅专栏

CSS

 <style>
        table {
            text-align: center;
            width: 40%;
            margin: 100px auto;

            border: 1px solid #eee;
            border-collapse: collapse;
        }

        .table-bordered tr th {
            border: 1px solid #eee;
        }

        td {
            border: 1px solid #eee;
        }
    </style>

HTML

  <table class="table table-bordered table-striped">
        <tr>
            <th colspan="5">
                班级统计表
            </th>
        </tr>
        <tr>
            <th>序号</th>
            <th>
                姓名</th>
            <th>班级</th>
            <th>学号</th>
            <th>性别</th>

        </tr>
        <tr>
            <td>1</td>
            <td>yue</td>
            <td>3班</td>
            <td>000001</td>
            <td>女</td>
        </tr>
        <tr>
            <td>2</td>
            <td>yue</td>
            <td>3班</td>
            <td>000001</td>
            <td>女</td>
        </tr>
        <tr>
            <td>3</td>
            <td>yue</td>
            <td>3班</td>
            <td>000001</td>
            <td>女</td>
        </tr>
        <tr>
            <td>4</td>
            <td>yue</td>
            <td>3班</td>
            <td>000001</td>
            <td>女</td>
        </tr>
    </table>