HTML表格（Table）标签

HTML表格标签使用<table>标记来创建一个表格。这个标记指定了表格的起始位置和结束位置，它可以包含一系列嵌套的标签（如<th>和<td>）来定义表格的行和列。

基本结构

<table>
    <tr>
        <th>列1标题</th>
        <th>列2标题</th>
    </tr>
    <tr>
        <td>行1列1数据</td>
        <td>行1列2数据</td>
    </tr>
    <tr>
        <td>行2列1数据</td>
        <td>行2列2数据</td>
    </tr>
</table>

在这个例子中，<table>标记包含了三个行（<tr>标记），其中第一个行定义包含两个表头单元格（<th>标记），其余两个行包含了数据单元格（<td>标记）。

表格属性

HTML表格标记允许你设置各种属性来控制表格样式和布局。下面是一些常见的属性：

• width：设置表格的宽度。
• border：设置表格的边框宽度。如果该属性设置为0，则表格不会显示边框。
• cellspacing：设置单元格之间的空白（间距）。
• cellpadding：设置单元格内部和其周围的空白（内边距）。

<table width="80%" border="1" cellspacing="0" cellpadding="5">
    ...
</table>

表头单元格

我们可以使用<th>标记来定义表格的列头，以提供更好的可读性和可访问性。

<table>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>23</td>
        <td>男</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>25</td>
        <td>女</td>
    </tr>
</table>

合并单元格

有时候，我们需要把两个或多个单元格合并成一个更大的单元格，这时我们可以使用colspan和rowspan属性。

• colspan：合并指定的单元格列。
• rowspan：合并指定的单元格行。

<table>
    <tr>
        <th colspan="2">产品信息</th>
    </tr>
    <tr>
        <td>产品ID</td>
        <td>001</td>
    </tr>
    <tr>
        <td>产品名称</td>
        <td>电脑</td>
    </tr>
</table>

表格样式

我们可以使用CSS为表格添加样式，如设置背景颜色、边框样式、文本对齐等。

table {
    border-collapse: collapse;
    width: 100%;
}

th, td {
    text-align: left;
    padding: 8px;
}

th {
    background-color: #f0f0f0;
}

tr:nth-child(even) {
    background-color: #f2f2f2;
}

这里的CSS代码设置表格的边框合并（border-collapse: collapse;），并将表头单元格（<th>标记）的背景颜色设置为灰色。

总结

HTML表格标签是一个非常有用的工具，它可以让我们展示数据信息，使其更加整洁优雅。为了让表格更具有可访问性和可读性，我们需要付出很多努力工作，同时利用CSS样式来增强表格的外观。