在HTML中,你可以使用 <table> 元素创建表格。表格通常由 <table> 元素包裹,内部包含行(<tr> 元素)和单元格(<td> 元素或表头单元格 <th> 元素)。以下是一个简单的HTML表格示例:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML 表格示例</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
        }

        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }

        th {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>

    <h1>这是一个HTML表格示例</h1>

    <table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>城市</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>小明</td>
                <td>25</td>
                <td>北京</td>
            </tr>
            <tr>
                <td>小红</td>
                <td>22</td>
                <td>上海</td>
            </tr>
            <tr>
                <td>小李</td>
                <td>28</td>
                <td>广州</td>
            </tr>
        </tbody>
    </table>

</body>
</html>

在上面的例子中,<table> 元素包含了 <thead>(表头)和 <tbody>(表体)部分。在表头中,使用 <th> 元素定义表格的列名,而在表体中,使用 <td> 元素定义每行中的数据。

CSS样式用于设置表格的样式,包括边框、填充、背景颜色等。border-collapse: collapse; 用于合并边框,使其看起来更整洁。


转载请注明出处:http://www.zyzy.cn/article/detail/12406/HTML