HTML超文本标记语言中table标签示例

下课别走

已于 2023-04-08 13:41:07 修改

阅读量310

点赞数

分类专栏： Html 文章标签： html

于 2020-09-22 21:40:26 首次发布

本文链接：https://blog.youkuaiyun.com/qq_42862167/article/details/108741824

版权

Html 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了HTML中table标签的使用，包括两个实际示例，展示了如何创建和展示表格内容。通过实例一和实例二，读者可以理解table、tr、td等元素的用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实例一：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格</title>
</head>
<body>
    <table align="center" cellspacing=0 border=1dx>
        <tr align="center">
            <td colspan="6">采购表</td>
        </tr>
        <tr align="center">
            <td>部门</td>
            <td width=100dx></td>
            <td>设备名称</td>
            <td width=100dx></td>
            <td>采购量</td>
            <td width=100dx></td>
        </tr>
        <tr align="center">
            <td>现部门设备数</td>
            <td></td>
            <td>现集团设备总数</td>
            <td colspan="3"></td>
        </tr>
        <tr align="center">
            <td>采购原因</td>
            <td colspan="5"></td>
        </tr>
        <tr align="center">
            <td>部门负责人签名</td>
            <td colspan="2"></td>
            <td>日期</td>
            <td colspan="2"></td>
        </tr>
        <tr align="center">
            <td>采购部门审批</td>
            <td colspan="2"></td>
            <td>日期</td>
            <td colspan="2"></td>
        </tr>
        <tr align="center">
            <td>总经理审批</td>
            <td colspan="2"></td>
            <td>日期</td>
            <td colspan="2"></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>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        
        table{
            border-collapse: collapse;
            width: 440px;
            height: 340px;
        }

        table caption{
            margin: 15px 0 15px 0;
            font-weight: bolder;
            font-size: 17px;
        }

        table tfoot th{
            text-align: left;
            font-weight: 500;
        }
    </style>
</head>
<body>
    <table border="1">
        <caption>前端与移动开发学员学习情况</caption>
        <thead>
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>成绩</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>小姐姐</td>
                <td>女</td>
                <td>100</td>
            </tr>
            <tr>
                <td>2</td>
                <td>小哥哥</td>
                <td>男</td>
                <td>100</td>
            </tr>
            <tr>
                <td>3</td>
                <td>大姐姐</td>
                <td>女</td>
                <td>100</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th colspan="2">总成绩</th>
                <!-- <th></th> -->
                <th colspan="2">300</th>
                <!-- <th></th> -->
            </tr>
        </tfoot>
    </table>
</body>
</html>

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