【Web前端】“从零开始的HTML 表格”

六、跨行和跨列的表格单元格

在某些情况下，可能需要单元格跨越多行或多列。在 HTML 中，我们使用 ​​rowspan​​ 和 ​​colspan​​​ 属性来实现。

1、跨行 (rowspan)

使用 ​​rowspan​​​ 属性可以让一个单元格跨越多个行。例如：

 姓名 
 年龄 
 职业 


 张三 
30
 软件工程师 


31
 项目经理 

解释 ：

​​rowspan="2"​​​ 属性让“张三”的单元格跨越了两行，因此在第二行再次显示的细节中，这个单元格不再重复。

2、跨列 (colspan)

同样地，​​colspan​​​ 属性可以让单元格跨越多个列。例如：

 个人信息 
 职业 


 张三 
30
 软件工程师 

解释 ：

​​colspan="2"​​​ 属性让“个人信息”的单元格跨越了两列，这通常用于合并表头信息。

七、表格内的标签

在表格单元格中，我们可以嵌套使用各种 HTML 标签，例如段落标签（​​

​）、链接标签（​​​​）、图像标签（​​​​​）等，从而丰富表格的内容。

 网站 
 描述 


Google
 一个强大的搜索引擎。

解释 ：

在表格中使用链接标签 ​​​​​，可以将某个单元格的内容变成一个可点击的链接，增强用户互动性。

八、单元格边距 (Cell padding)

​​cellpadding​​​ 属性用于设置单元格内数据与单元格边框之间的空间，即单元格的内边距。这样可以提高表格的可读性。

 姓名 
 年龄 


 张三 
30

解释 ：

​​cellpadding="10"​​​ 的作用是为每个单元格内部数据与单元格边框之间留出 10 像素的间隔，使得内容看起来更加舒适。

九、单元格间距 (Cell spacing)

​​cellspacing​​​ 属性用于设置单元格之间的间距，调整单元格之间的空白距离。

 产品 
 价格 


 电视 
1200.00

解释 ：

​​cellspacing="5"​​​ 表示在单元格之间留有 5 像素的空间，使得表格的整体视觉效果更为分明。

十、表格颜色

可以通过 CSS 来设置表格及单元格的背景颜色。这样可以提高表格的可视化效果。示例：

 标题 
 内容 

十一、嵌套表格

有时需要在表格单元格中嵌套另一个表格。这可以用于展示更复杂的数据。

 主表格单元格 



 嵌套表格单元格 1
 嵌套表格单元格 2

题目：创建一个学校课程表

请根据以下要求，使用 HTML 代码创建一个课程表。

课程表要求：

表格结构 ：

• 表格应该有 5 列：时间、周一、周二、周三、周四。
• 表头使用 ​​ ​​ 标签，并使用 ​​
  ​​ 和 ​​
  ​​ 标签分别标识表头和表体。

• 表格应列出“时间”在第一列，后面是每周各天的课程安排。

课程内容 ：

• 在“时间”列中填写：
• 08:00 - 09:00
• 09:00 - 10:00
• 10:00 - 11:00
• 11:00 - 12:00
• 13:00 - 14:00
• 14:00 - 15:00
• 15:00 - 16:00
• 各日的课程安排可以随意填写，可以使用跨行和跨列单元格（如等课程在两个时间段上课）。

样式设置 ：

• 给表格添加边框，使用 CSS 设置边框的颜色和样式。
• 表格头部的背景颜色为浅蓝色，字体为加粗。
• 单元格内容居中。
• 表格应有 10 像素的内边距，单元格之间的间距为 5 像素。

表格嵌套 ：

• 在“周一”的某个课程单元格中，嵌套一个表格，显示该课程的教师和教室信息。

---

示例 HTML 代码模板：

 时间 
 周一 
 周二 
 周三 
 周四 




08:00 - 09:00
 数学 
 英语 
 物理 
 化学 


09:00 - 10:00
 美术 
 生物 
 


10:00 - 11:00
 历史 
 
 音乐 
 体育 


11:00 - 12:00
 地理 
 科学 


13:00 - 14:00




 教师：张老师 


 教室：101



 信息技术 
 体育 
 文言文 


14:00 - 15:00
 数学 
 科学 
 社会 
 物理 


15:00 - 16:00
 英语 
 地理 

效果预览:



注意事项：

• 请确保使用合理的 HTML 结构和 CSS 属性，以达到视觉上的美观和易读性。
• 可以根据需要调整课程内容和时间。
• 测试代码在浏览器中渲染效果，确保样式和结构符合预期。

---

扩展：



如上图的表格：tr 是行数，td 是单元格数，th 是标题性质的 td

确定 tr 和 td（th 同 td）的方法:

1、从上到下，最细分到几行便是几个 tr

2、如上是三种基本单元格形式。A 是基本单元格，其余的变种都是基本单元格合并而成。B 是合并上下单元格组合而成，

C 是合并左右单元格。合并后的 B 种单元格算到第二行第一个单元格中，C 种单元格算到第四行第一个单元格中（按上表

从上到下从左到右算），所以第一行 6 个 td，第二行 6 个 td，第三行 5 个 td，第四行 1 个，第五行 6 个 td，第六行 5 个 td。

合并后用 colspan 和 rowspan 来标示 B 和 C 变种单元格是横向还是纵向吃了几个单元格 (算他自己）

3、第四种变种单元格是又横向又纵向合并，这个时候同时标示 rowspan 和 colspan（空格隔开）

合并后的单元格归属原则都是左上原则，即下归上，右归左，越往左上角越优先

---

如有表述错误及欠缺之处敬请批评指正。