Table.html

最新推荐文章于 2025-12-31 14:00:00 发布

原创最新推荐文章于 2025-12-31 14:00:00 发布 · 147 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端

前端专栏收录该内容

31 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Table</title>
</head>
<body>
    <!--边框为1像素-->
    <table border="1">
        <!--表格结构可省略-->
        <thead>
            <tr>
                <th>成绩表</th>
                <th>科目A</th>
                <th>科目B</th>
                <th>总分</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>考生x</td>
                <td>98</td>
                <td>100</td>
                <td>198</td>
            </tr>
            <tr>
                <td>考生y</td>
                <td>97</td>
                <td>99</td>
                <td>196</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>均分</td>
                <td>97.5</td>
                <td>99.5</td>
                <td>197</td>
            </tr>
        </tfoot>
    </table>

    <table border="1">
        <tr>
            <th>成绩表</th>
            <th>科目A</th>
            <th>科目B</th>
            <th>总分</th>
        </tr>
        <tr>
            <td>考生x</td>
            <td>98</td>
            <td>100</td>
            <td>198</td>
        </tr>
        <tr>
            <td>考生y</td>
            <td>97</td>
            <td>99</td>
            <td>196</td>
        </tr>
        <tr>
            <td>No.1</td>
            <!--colspan为跨列合并，rowspan为跨行合并，但不能进行跨结构标签合并-->
            <!--跨列合并三个单元格-->
            <td colspan="3">考生x</td>
        </tr>
    </table>
</body>
</html>