html表格代码大全

作者：—上花′Ing 发布日期:2025-10-30 浏览:90

<!-- HTML表格代码示例 -->

<!DOCTYPE html>
<html>
<head>
    <title>HTML 表格代码大全</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid black;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>

<h2>基本表格</h2>
<table>
    <tr>
        <th>表头1</th>
        <th>表头2</th>
        <th>表头3</th>
    </tr>
    <tr>
        <td>数据1</td>
        <td>数据2</td>
        <td>数据3</td>
    </tr>
    <tr>
        <td>数据4</td>
        <td>数据5</td>
        <td>数据6</td>
    </tr>
</table>

<h2>带标题的表格</h2>
<table>
    <caption>这是一个带标题的表格</caption>
    <tr>
        <th>表头1</th>
        <th>表头2</th>
        <th>表头3</th>
    </tr>
    <tr>
        <td>数据1</td>
        <td>数据2</td>
        <td>数据3</td>
    </tr>
    <tr>
        <td>数据4</td>
        <td>数据5</td>
        <td>数据6</td>
    </tr>
</table>

<h2>跨行和跨列的表格</h2>
<table>
    <tr>
        <th rowspan="2">跨行</th>
        <th colspan="2">跨列</th>
    </tr>
    <tr>
        <td>数据1</td>
        <td>数据2</td>
    </tr>
    <tr>
        <td>数据3</td>
        <td>数据4</td>
        <td>数据5</td>
    </tr>
</table>

</body>
</html>

解释说明

基本表格:
- 使用 <table> 标签创建表格。
- 使用 <tr> 标签定义表格中的行。
- 使用 <th> 标签定义表头单元格，<td> 标签定义普通单元格。
带标题的表格:
- 使用 <caption> 标签为表格添加标题，放置在 <table> 标签内部的第一个子元素位置。
跨行和跨列的表格:
- 使用 rowspan 属性使单元格跨越多行。
- 使用 colspan 属性使单元格跨越多列。

这些示例展示了如何创建不同类型的 HTML 表格，并通过 CSS 进行简单的样式设置。

上一篇：html下拉菜单

下一篇：html转义字符