HTML：表格

最新推荐文章于 2024-09-04 23:24:54 发布

_卷心菜_

最新推荐文章于 2024-09-04 23:24:54 发布

阅读量209

点赞数

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

本文链接：https://blog.csdn.net/Thumb_/article/details/121803290

版权

java Web搭建专栏收录该内容

41 篇文章 0 订阅

订阅专栏

在这里插入图片描述

简单表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
    <!-- 简单表格 -->
    <table>
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>性别</th>
        </tr>
        <tr>
            <td>s48565001</td>
            <td>张三三</td>
            <td>男</td>
        </tr>
    </table>
</body>
</html>

在这里插入图片描述

完整结构表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
    <!-- 完整结构表格 -->
    <table>
        <thead>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>分数</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>s536894001</td>
                <td>张三</td>
                <td>385</td>
            </tr>
            <tr>
                <td>s536894002</td>
                <td>李四</td>
                <td>375</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td></td>
                <td></td>
                <td>760</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

在这里插入图片描述

表格重要属性

在这里插入图片描述

border表格边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
    <!-- 表格重要属性 -->
    <!-- border值的大小表示表格外边框的宽度 -->
    <table border="5">  
        <tr>
            <td>学号</td>
            <td>姓名</td>
            <td>性别</td>
        </tr>
        <tr>
            <td>s125643001</td>
            <td>张三</td>
            <td>男</td>
        </tr>
        <tr>
            <td>s125643002</td>
            <td>小美</td>
            <td>女</td>
        </tr>
    </table>

</body>
</html>

在这里插入图片描述

其他属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
    <!-- 表格重要属性 -->
    <!-- border值的大小表示表格外边框的宽度 -->
    <table border="1", cellspacing="1", align="center">  
        <tbody align="center">
            <tr>
                <td>学号</td>
                <td>姓名</td>
                <td>性别</td>
            </tr>
            <tr>
                <td>s125643001</td>
                <td>张三</td>
                <td rowspan="2">男</td>
            </tr>
            <tr>
                <td>s125643002</td>
                <td>小新</td>
            </tr>
            <tr>
                <td colspan="3">按钮</td>
            </tr>
        </tbody>
    </table>

</body>
</html>