712 字
3 分钟阅读
html – 表格

简介

html表格

代码演示

<html>
    <head>
        <title>html 表格</title>
    </head>
    <style>
        table {
            /* border-collapse: 控制表格边框是否合并 */
            /*  separate: 表格边框不合并 */ 
            /*  collapse: 表格边框合并 */ 
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid black;
            padding: 5px;
            text-align: center;
        }
        thead {
            background-color: gray;
        }
    </style>
    <body>
        <!-- table 标签:表格标签 -->
        <!-- thead 标签:定义表头 可选 -->
        <!-- tbody 标签:定义表格内容 可选 -->
        <!-- tr 标签:定义表格行 可以包裹多个td -->
        <!-- td 标签:定义表格单元格 -->
        <table>
            <thead>
                <tr>
                    <td>编号</td>
                    <td>姓名</td>
                    <td>性别</td>
                    <td>年龄</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>张三</td>
                    <td>男</td>
                    <td>18</td>
                    <td>
                        <a href="#">修改</a>
                        <a href="#">删除</a>
                    </td>
                </tr>
                <tr> 
                    <td>2</td>
                    <td>张三</td>
                    <td>男</td>
                    <td>18</td>
                    <td>
                        <a href="#">修改</a>
                        <a href="#">删除</a>
                    </td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

效果

CSS 样式

border-collapse:控制表格边框是否合并

1 条评论

  1. html – CSS – 追求的个人博客 2026年1月29日

    […] 表格 跳转 […]

发表评论

您的邮箱地址不会被公开。 必填项已用 * 标注