表格

概述

在网页设计中，表格（Table）是一种用于展示结构化数据的元素。表格通常用于显示二维数据，如时间表、价格表、统计数据等。HTML 提供了丰富的标签和属性来创建和定制表格。

表格的基本结构

一个基本的 HTML 表格由以下几个部分组成：

<table>：定义表格的开始和结束。
<tr>：定义表格的行（Table Row）。
<th>：定义表格的表头单元格（Table Header Cell）。
<td>：定义表格的数据单元格（Table Data Cell）。

示例代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基本表格示例</title>
</head>
<body>
    <h2>学生成绩表</h2>
    <table border="1">
        <tr>
            <th>姓名</th>
            <th>数学</th>
            <th>英语</th>
            <th>总分</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>90</td>
            <td>85</td>
            <td>175</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>88</td>
            <td>92</td>
            <td>180</td>
        </tr>
    </table>
</body>
</html>

解释

<table>：定义了一个表格。
<tr>：定义了表格的行。
<th>：定义了表头单元格，通常用于列标题。
<td>：定义了数据单元格，用于显示具体的数据。

表格的属性

HTML 提供了多种属性来定制表格的外观和行为。以下是一些常用的属性：

border：设置表格边框的宽度。
width：设置表格的宽度。
height：设置表格的高度。
cellspacing：设置单元格之间的间距。
cellpadding：设置单元格内容与边框之间的间距。

示例代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格属性示例</title>
</head>
<body>
    <h2>学生成绩表（带属性）</h2>
    <table border="1" width="50%" cellspacing="5" cellpadding="10">
        <tr>
            <th>姓名</th>
            <th>数学</th>
            <th>英语</th>
            <th>总分</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>90</td>
            <td>85</td>
            <td>175</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>88</td>
            <td>92</td>
            <td>180</td>
        </tr>
    </table>
</body>
</html>

解释

border="1"：设置表格边框的宽度为 1 像素。
width="50%"：设置表格的宽度为浏览器窗口宽度的 50%。
cellspacing="5"：设置单元格之间的间距为 5 像素。
cellpadding="10"：设置单元格内容与边框之间的间距为 10 像素。

表格的跨行和跨列

在某些情况下，你可能需要一个单元格跨越多行或多列。HTML 提供了 rowspan 和 colspan 属性来实现这一点。

rowspan：设置单元格跨越多行。
colspan：设置单元格跨越多列。

示例代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>跨行和跨列示例</title>
</head>
<body>
    <h2>学生成绩表（跨行和跨列）</h2>
    <table border="1">
        <tr>
            <th>姓名</th>
            <th>数学</th>
            <th>英语</th>
            <th>总分</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>90</td>
            <td>85</td>
            <td rowspan="2">总分</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>88</td>
            <td>92</td>
        </tr>
        <tr>
            <td colspan="4">总结：平均分</td>
        </tr>
    </table>
</body>
</html>

解释

rowspan="2"：使“总分”单元格跨越多行，覆盖了张三和李四的总分。
colspan="4"：使“总结：平均分”单元格跨越多列，覆盖了整个表格的宽度。

实践练习

练习 1：创建一个简单的课程表

创建一个包含课程名称、时间、教室的课程表。使用表格的基本结构和属性。

练习 2：创建一个跨行和跨列的表格

创建一个包含学生姓名、科目、成绩的表格，并使用 rowspan 和 colspan 属性来展示总分和平均分。

练习 3：使用 CSS 美化表格

使用内联样式或内部样式表来美化你的表格，例如改变背景颜色、字体样式、边框样式等。

总结

表格是 HTML 中用于展示结构化数据的重要元素。通过掌握表格的基本结构、属性和跨行跨列的技巧，你可以创建出功能强大且美观的表格。希望本教程能帮助你更好地理解和使用 HTML 表格。

← Previous: 链接和导航：构建高效的Web应用 Next: 内联样式：HTML中的CSS应用 →