使用 Colspan 和 Rowspan 合并表格单元格
在这一步中,你将学习如何使用 colspan
和 rowspan
属性水平或垂直合并表格单元格。这些属性允许你通过合并多个单元格来创建更复杂和灵活的表格布局。
打开 WebIDE,在 ~/project
目录下创建一个名为 event_schedule.html
的新文件。我们将创建一个会议日程表格,演示单元格的合并。
touch ~/project/event_schedule.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Conference Event Schedule</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>Time</th>
<th>Room A</th>
<th>Room B</th>
</tr>
</thead>
<tbody>
<tr>
<td>9:00 AM</td>
<td rowspan="2">Keynote Speech</td>
<td>Workshop 1</td>
</tr>
<tr>
<td>10:00 AM</td>
<td>Workshop 2</td>
</tr>
<tr>
<td>11:00 AM</td>
<td colspan="2">Lunch Break</td>
</tr>
<tr>
<td>12:00 PM</td>
<td>Panel Discussion</td>
<td>Networking Session</td>
</tr>
</tbody>
</table>
</body>
</html>
关于 colspan
和 rowspan
的关键点:
colspan
:水平合并跨列的单元格
示例:<td colspan="2">
将单元格跨 2 列
rowspan
:垂直合并跨行的单元格
示例:<td rowspan="2">
将单元格跨 2 行
使用这些属性时,需移除其他行中对应的单元格
在此示例中:
"Keynote Speech" 在 Room A 中跨 2 行
"Lunch Break" 跨 2 列,覆盖两个房间
其他单元格保持标准的单单元格布局
在网页浏览器中显示的示例输出将展示一个包含合并单元格的表格,使日程更加紧凑和有条理。