Menu
CoddyTech

表格基础

本课属于 Coddy HTML 学习旅程的“基础知识”单元。第 48 课,共 60 课。

在 HTML 中,表格用于将数据整理成行和列。表格常用于以结构化的形式显示数据,例如日程安排、统计数据,或任何其他可以用网格呈现的信息。要创建表格,可以使用 <table> 标签,以及其他标签,例如用于表示表格行的 <tr>、用于表示表格数据(单元格)的 <td>,以及用于表示表头的 <th>。

下面是 HTML 表格的基本结构:

<table>
	<tr>
		<th>Header 1</th>
		<th>Header 2</th>
	</tr>
	<tr>
		<td>Row 1, Cell 1</td>
		<td>Row 1, Cell 2</td>
	</tr>
	<tr>
		<td>Row 2, Cell 1</td>
		<td>Row 2, Cell 2</td>
	</tr>
</table>
  • <table>:用于定义表格的标签。
  • <tr>:定义表格行的标签。
  • <th>:用于定义表头单元格的标签。表头单元格通常用于显示列标题或行标题,默认以粗体显示。
  • <td>:用于定义表格中普通单元格的标签。

这张表格在浏览器中的呈现效果如下:

表头 1表头 2
第 1 行,第 1 个单元格第 1 行,第 2 个单元格
第 2 行,第 1 个单元格第 2 行,第 2 个单元格

在这个示例中,我们有一个包含两行两列的表格。第一行包含表头单元格,后续行包含普通数据单元格。这种结构创建了一个简单的网格布局,易于阅读和理解。

challenge icon

挑战

简单

创建一个 HTML 文档,其中包含一个具有以下结构的表:

  1. 使用 <table> 标签定义表。
  2. 创建一个表格行(<tr>)作为表头,其中包含两个表头单元格(<th>)。第一个表头单元格应写为 Name,第二个应写为 Age。
  3. 创建一个包含两个数据单元格(<td>)的表格行(<tr>)。第一个单元格应写为 John,第二个应写为 30。
  4. 再创建一个包含两个数据单元格(<td>)的表格行(<tr>)。第一个单元格应写为 Jane,第二个应写为 25。

亲手试试

<!DOCTYPE html>
<html>
    <body>
        <!-- 在这里编写代码 -->
    </body>
</html>
quiz icon自我测试

这节课包含一个小测验。开始学习即可作答,并记录你的进度。

基础知识中的所有课

自己练习: Web 在线编辑器