HTML 表格

HTML 表格用于组织和显示数据。表格包含行（<tr>）、列（<td>）以及表头（<th>）等结构，通常用于显示结构化数据，如电子表格、日程安排、成绩单等。

1. 基本语法

<table>
    <tr>
        <th>表头1</th>
        <th>表头2</th>
    </tr>
    <tr>
        <td>数据1</td>
        <td>数据2</td>
    </tr>
    <tr>
        <td>数据3</td>
        <td>数据4</td>
    </tr>
</table>
  • <table>：定义表格。
  • <tr>：定义表格行。
  • <th>：定义表头单元格，内容通常是粗体且居中的。
  • <td>：定义表格数据单元格，内容通常是常规文本。

示例：

<table border="1">
    <tr>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>25</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>30</td>
    </tr>
</table>
  • 解释：这是一个简单的表格，包含两列：姓名和年龄。

2. 表格的属性

2.1 border 属性

border 属性用于设置表格的边框。如果没有边框，表格不会有可见的边框线。

<table border="1">
    <!-- 表格内容 -->
</table>

2.2 cellspacing 和 cellpadding

  • cellspacing：设置单元格之间的间距。
  • cellpadding：设置单元格内内容与单元格边框之间的内边距。
<table cellspacing="10" cellpadding="5">
    <!-- 表格内容 -->
</table>

2.3 width 和 height

你可以设置表格和单元格的宽度和高度。

<table width="100%" height="200">
    <!-- 表格内容 -->
</table>

3. 表格元素的扩展

3.1 表格合并单元格

使用 colspan 和 rowspan 属性可以合并行或列的单元格。

  • colspan：让单元格跨越多列。
  • rowspan：让单元格跨越多行。

示例：合并列

<table border="1">
    <tr>
        <th colspan="2">姓名和年龄</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>25</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>30</td>
    </tr>
</table>
  • 解释：colspan="2" 表示第一个单元格跨越两列。

示例：合并行

<table border="1">
    <tr>
        <th rowspan="2">姓名</th>
        <th>年龄</th>
    </tr>
    <tr>
        <th>职业</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>25</td>
        <td>工程师</td>
    </tr>
</table>
  • 解释：rowspan="2" 表示第一个单元格跨越两行。

3.2 表格头部和脚本

你可以使用 <thead>、<tbody> 和 <tfoot> 来分组表格的不同部分。这样可以帮助你更好地组织复杂的表格，尤其在表格数据较多时。

  • <thead>：定义表格头部。
  • <tbody>：定义表格主体。
  • <tfoot>：定义表格脚本（一般用于汇总信息）。

示例：

<table border="1">
    <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>职业</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>张三</td>
            <td>25</td>
            <td>工程师</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>30</td>
            <td>医生</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3">总计</td>
        </tr>
    </tfoot>
</table>

4. 表格样式（CSS）

通过 CSS，你可以进一步美化和控制表格的外观。

4.1 设置表格边框

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

th, td {
    border: 1px solid black;
    padding: 8px;
    text-align: left;
}
  • 解释：border-collapse: collapse; 用于合并表格单元格的边框。

4.2 设置行的交替颜色

tr:nth-child(even) {
    background-color: #f2f2f2;
}
  • 解释：使用 nth-child 伪类选择偶数行并为其添加背景颜色。

4.3 设置表格的宽度和对齐方式

table {
    width: 80%;
    margin: 20px auto;
    border: 1px solid black;
    border-collapse: collapse;
}
  • 解释：表格的宽度设置为页面宽度的 80%，并且居中显示。

4.4 悬浮效果

你可以为表格行添加悬浮效果，以便在用户悬停时突出显示某一行。

tr:hover {
    background-color: #ddd;
}
  • 解释：当用户将鼠标悬停在表格行时，该行的背景颜色变为灰色。

5. 总结

  • <table> 用于创建表格。
  • <tr> 创建表格行，<th> 创建表头单元格，<td> 创建表格数据单元格。
  • 使用 colspan 和 rowspan 属性合并单元格。
  • <thead>、<tbody> 和 <tfoot> 用于表格的结构化。
  • 通过 CSS，你可以美化表格，控制布局、样式、颜色等。

通过理解和使用这些基本和进阶的表格操作，你可以在网页中高效地展示和组织数据。如果你需要更多关于表格的示例或帮助，随时告诉我！