跨行与跨列

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

在 HTML 中，你可以使用 rowspan 和 colspan 属性，让表格单元格跨越多行或多列。这些属性可以合并单元格，从而创建更复杂的表格布局。

colspan 属性用于指定单元格应跨越的列数。将它添加到你想要扩展的单元格的 <td> 或 <th> 标签中。

下面是如何使用 colspan 的示例：

<table border="1">
	<tr>
		<th colspan="2">Name</th>
	</tr>
	<tr>
		<td>John</td>
		<td>Doe</td>
	</tr>
</table>

在这个示例中，文本为“Name”的表头单元格跨越了两列。这适合用来创建覆盖多列的表头。效果如下：

rowspan 属性用于指定一个单元格跨越的行数。你也可以将它添加到要扩展的单元格的 <td> 或 <th> 标签中。

下面是如何使用 rowspan 的示例：

<table border="1">
  <tr>
    <th>Employee</th>
    <th>Shift</th>
  </tr>
  <tr>
    <td rowspan="2">Alex</td>
    <td>Morning</td>
  </tr>
  <tr>
    <td>Evening</td>
  </tr>
</table>

这里使用 rowspan 表示 Alex 上早班和晚班，无需重复写名字。

你可以在同一个表格中同时使用 colspan 和 rowspan 来创建复杂的布局。只要记得相应调整每一行的单元格数量，为跨越多个单元格的单元格留出空间。

挑战

简单

创建一个 HTML 文档，其中包含一个有跨多行和多列单元格的表格。表格应具有以下结构：

一个表格行（<tr>），其中包含一个跨三列的表头单元格（<th>），内容为 "Student Report"。
另一个表格行（<tr>），其中包含一个内容为 "Name" 的表头单元格（<th>）、一个内容为 "Subject" 的表头单元格（<th>），以及一个内容为 "Grade" 的表头单元格（<th>）。
另一个表格行（<tr>），其中包含一个内容为 "John Doe" 的数据单元格（<td>）、一个内容为 "Math" 的数据单元格（<td>），以及一个内容为 "A" 的数据单元格（<td>）。
另一个表格行（<tr>），其中包含一个跨两行且内容为 "Jane Smith" 的数据单元格（<td>）、一个内容为 "Science" 的数据单元格（<td>），以及一个内容为 "B" 的数据单元格（<td>）。
最后一个表格行（<tr>），其中包含一个内容为 "History" 的数据单元格（<td>）和一个内容为 "A" 的数据单元格（<td>）。

亲手试试

<!DOCTYPE html>
<html>
    <body>
        <table border="1">
            <!-- 在这里编写代码 -->
        </table>
    </body>
</html>

自我测试

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

基础知识中的所有课

1HTML 基础

什么是 HTML？HTML 的基本结构标签和元素嵌套标签和闭合标签 HTML 中的注释

4食谱卡片

7个人资料页

10表格

表格基础添加标题跨行与跨列表格回顾

2文本与格式设置

标题段落换行粗体和斜体再次练习粗体和斜体回顾：格式设置

5添加内容

HTML 属性链接新页面链接图片图片属性

8表单和输入，第 1 部分

表单基础文本输入框输入属性密码输入框输入框的标签回顾：基础表单

11活动报名页面

3使用列表

6页面布局

div 元素行内 span 语义化标签 section 和 article 元素布局回顾

9表单和输入，第 2 部分

单选按钮复选框下拉菜单按钮表单中的按钮回顾：表单 #1 回顾：表单 #2

12最终挑战

简单个人资料卡活动邀请卡简单文章页面最喜欢的书籍列表

自己练习： Web 在线编辑器