表格基础
本课属于 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 个单元格 |
在这个示例中,我们有一个包含两行两列的表格。第一行包含表头单元格,后续行包含普通数据单元格。这种结构创建了一个简单的网格布局,易于阅读和理解。
挑战
简单创建一个 HTML 文档,其中包含一个具有以下结构的表:
- 使用
<table>标签定义表。 - 创建一个表格行(
<tr>)作为表头,其中包含两个表头单元格(<th>)。第一个表头单元格应写为Name,第二个应写为Age。 - 创建一个包含两个数据单元格(
<td>)的表格行(<tr>)。第一个单元格应写为John,第二个应写为30。 - 再创建一个包含两个数据单元格(
<td>)的表格行(<tr>)。第一个单元格应写为Jane,第二个应写为25。
亲手试试
<!DOCTYPE html>
<html>
<body>
<!-- 在这里编写代码 -->
</body>
</html>这节课包含一个小测验。开始学习即可作答,并记录你的进度。
基础知识中的所有课
自己练习: Web 在线编辑器