html：table表格

十秒耿直拆包选手

已于 2025-05-02 20:58:27 修改

阅读量235

点赞数 2

分类专栏：前端Web 文章标签： html 前端

于 2025-05-02 20:37:39 首次发布

本文链接：https://blog.csdn.net/weiweiqiao/article/details/147671992

版权

前端Web 专栏收录该内容

3 篇文章

订阅专栏

表格代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    
    <!-- 标准表格。 -->
    <table border="5"
           cellspacing="0">
        
        <tr align="center">
            <th>序号</th>
            <th>品牌LOGO</th>
            <th>品牌名称</th>
            <th>企业名称</th>
        </tr>
        
        <tr align="center">
            <td>1</td>
            <td>Oracle</td>
            <td>MySQL</td>
            <td>Oracle</td>
        </tr>
        
        <tr>
            <td>2</td>
            <td><img src="../../img/JavaFX-01.jpg"></td>
            <td>JavaFX</td>
            <td>Oracle</td>
        </tr>
    </table>

    <!-- 带表格踢脚。 -->
    <table border="2">
        
        <caption>四年级五班名单</caption>
        
        <thead>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </thead>
        
        <tbody>
        
            <tr>
                <td>张三</td>
                <td>18</td>
                <td>男</td>
            </tr>
        
            <tr align="right">
                <td>李四</td>
                <td>19</td>
                <td>女</td>
            </tr>
        </tbody>
        
        <tfoot>
            <td colspan="3">版权所有</td>
        </tfoot>
    </table>
    <br>
    
    <!-- 带表头；合并项。 -->
    <table border="2">
        <caption>合并单元格</caption>
        <tbody>
            <tr>
                <td>单元格1</td>
                <td colspan="3">单元格2、3、4</td>
                <td>单元格5</td>
            </tr>
            <tr>
                <td>单元格6</td>
                <td>单元格7</td>
                <td>单元格8</td>
                <td>单元格9</td>
                <td>单元格10</td>
            </tr>
            <tr>
                <td>单元格11</td>
                <td>单元格12</td>
                <td rowspan="2">单元格13、18</td>
                <td>单元格14</td>
                <td>单元格15<td>
            </tr>
            <tr>
                <td>单元格16</td>
                <td>单元格17</td>
                <!-- <td>单元格18</td> -->
                <td>单元格19</td>
                <td>单元格20</td>
            </tr>
        </tbody>
    </table>
</body>
</html>