表格标签三步走

叶不休

已于 2024-03-09 21:11:13 修改

阅读量15

点赞数

分类专栏：前端文章标签： html 前端 css css3 javascript

于 2022-12-13 17:53:46 首次发布

本文链接：https://blog.csdn.net/weixin_58694594/article/details/128290219

版权

前端专栏收录该内容

45 篇文章 0 订阅

订阅专栏

表格不是用来布局的
表格是用来展示数据的

表格基本用法

<!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>
</head>
<body>
    <table>
        <tr>
            <td>姓名</td>
            <td>性别</td>
            <td>年龄</td>
        </tr>

        <tr>
            <td>张三</td>
            <td>男</td>
            <td>18</td>
        </tr>

        <tr>
            <td>李四</td>
            <td>女</td>
            <td>22</td>
        </tr>

        <tr>
            <td>王五</td>
            <td>男</td>
            <td>28</td>
        </tr>
    </table>
</body>
</html>

表头单元格标签

表头单元格也是单元格，常用于表格第一行，突出重要性，表头单元格里面的文字回加粗居中展示

表格属性

<!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>
</head>
<body>
    <!-- 表格的属性要写到table标签里 -->
    <table align="center" border="1" cellpadding="30" cellspacing="0" width="500" height="1000">
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>

        <tr>
            <td>张三</td>
            <td>男</td>
            <td>18</td>
        </tr>

        <tr>
            <td>李四</td>
            <td>女</td>
            <td>22</td>
        </tr>

        <tr>
            <td>王五</td>
            <td>男</td>
            <td>28</td>
        </tr>
    </table>
</body>
</html>

一个小案例---图书排行榜

<!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>
</head>
<body>
    <table align="center" border="1" cellspacing="0" cellpadding="5"  width="500" height="200">
            <tr>
                <th>排名</th>
                <th>关键词</th>
                <th>趋势</th>
                <th>进入搜索</th>
                <th>最近七日</th>
                <th>相关链接</th>
            </tr>
            <!-- 第一行 -->
            <tr>
                <td>1</td>
                <td>鬼吹灯</td>
                <td><img src="/demo/表格/down.jpg"></td>
                <td>345</td>
                <td>123</td>
                <td> <a href="https://licai.cofool.com/">贴吧</a></td>
            </tr>
            <!-- 第二行 -->
            <tr>
                <td>2</td>
                <td>盗墓笔记</td>
                <td><img src="/demo/表格/down.jpg"></td>
                <td>345</td>
                <td>123333</td>
                <td> <a href="https://licai.cofool.com/">贴吧</a></td>
            </tr>

            <tr>
                <td>3</td>
                <td>西游记</td>
                <td><img src="/demo/表格/down.jpg"></td>
                <td>345</td>
                <td>123</td>
                <td> <a href="https://licai.cofool.com/">贴吧</a></td>
            </tr>

            <tr>
                <td>4</td>
                <td>东游记</td>
                <td><img src="/demo/表格/down.jpg"></td>
                <td>34335</td>
                <td>12344</td>
                <td> <a href="https://licai.cofool.com/">贴吧</a></td>
            </tr>

            <tr>
                <td>5</td>
                <td>甄嬛传</td>
                <td><img src="/demo/表格/down.jpg"></td>
                <td>34555</td>
                <td>1234444</td>
                <td> <a href="https://licai.cofool.com/">贴吧</a></td>
            </tr>

            <tr>
                <td>6</td>
                <td>水浒传</td>
                <td><img src="/demo/表格/down.jpg"></td>
                <td>34225</td>
                <td>12111</td>
                <td> <a href="https://licai.cofool.com/">贴吧</a></td>
            </tr>

            <tr>
                <td>7</td>
                <td>三国演义</td>
                <td><img src="/demo/表格/down.jpg"></td>
                <td>343335</td>
                <td>1245563</td>
                <td> <a href="https://licai.cofool.com/">贴吧</a></td>
            </tr>

    </table>
</body>
</html>

效果展示

表格结构标签

合并单元格

<!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>合并单元格</title>
</head>
<body>
    <table  width="500" height="300" border="1" cellspacing="0">
        <tr>
            <td></td>
            <td colspan="2"></td>
            <!-- <td></td> -->
        </tr>
        <tr>
            <td rowspan="2"></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <!-- <td></td> -->
            <td></td>
            <td></td>
        </tr>
    </table>

</body>
</html>