html table

作者：一岁就很帅发布日期:2025-09-23 浏览:82

<!DOCTYPE html>
<html>
<head>
    <title>HTML Table Example</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        table, th, td {
            border: 1px solid black;
        }
        th, td {
            padding: 15px;
            text-align: left;
        }
    </style>
</head>
<body>

<h2>HTML Table</h2>

<table>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
    </tr>
    <tr>
        <td>Row 1, Cell 1</td>
        <td>Row 1, Cell 2</td>
        <td>Row 1, Cell 3</td>
    </tr>
    <tr>
        <td>Row 2, Cell 1</td>
        <td>Row 2, Cell 2</td>
        <td>Row 2, Cell 3</td>
    </tr>
</table>

</body>
</html>

解释说明：

<table>: 定义一个表格。
<tr>: 表示表格中的一行（Table Row）。
<th>: 表示表格的表头单元格（Table Header），通常用于显示列标题，文本默认是加粗且居中的。
<td>: 表示表格中的标准单元格（Table Data），用于存放实际数据。
border-collapse: collapse;: 将表格边框合并为单一的边框，而不是默认的双线边框。
padding: 设置单元格内内容与边框之间的间距。
text-align: left;: 设置单元格内的文本对齐方式为左对齐。

这个示例展示了如何创建一个简单的 HTML 表格，并通过 CSS 样式来美化表格的外观。

上一篇：html 空格

下一篇：html标签