HTML 表格基础

2024-03-01 09:55| 来源: 网络整理| 查看: 265

有时我们希望单元格跨越多行或多列。以下是一个简单的例子，显示了一些常见动物的名字。在某些情况下，我们要显示动物名称旁边的男性和女性的名字。有时候我们又不需要，那不需要的情况下，我们希望写着动物的名字的单元格的宽度可以是两个单元格的宽度 (因为写着名字的行会有两列，而没有写名字的行只有一列，行的宽度是不一样的)。

一开始的标记写法是这样的：

html Animals Hippopotamus Horse Mare Stallion Crocodile Chicken Hen Rooster table { border-collapse: collapse; } td, th { border: 1px solid black; padding: 10px 20px; }

但是输出的结果不是我们想要的：

我们需要一个方法，让 "Animals"、"Hippopotamus" 和 "Crocodile" 的单元格的宽度变为两个单元格， "Horse" 和 "Chicken" 的高度变为两行 (因为要拥有一个男性名字和女性名字，可以先看效果图)。幸好，表格中的标题和单元格有 colspan 和 rowspan 属性，这两个属性可以帮助我们实现这些效果。这两个属性接受一个没有单位的数字值，数字决定了它们的宽度或高度是几个单元格。比如，colspan="2" 使一个单元格的宽度是两个单元格。

让我们使用 colspan 和 rowspan 来改进现有的表格。

首先，把 animals-table.html 和 minimal-table.css 文件复制到你的本地环境，HTML 文件中包含了你刚才看到的动物示例的数据。接着，使用 colspan 让 "Animals"、"Hippopotamus" 和 "Crocodile" 占 2 个单元格的宽度。最后，使用 rowspan 让 "Horse" 和 "Chicken" 占 2 个单元格的高度。保存后，用浏览器打开你写的 HTML 文件，看看改进的地方。

备注：你也可以在 GitHub 上找到完成的版本 animals-table-fixed.html (see it live also).

【本文地址】

HTML 表格基础

HTML 表格基础

今日新闻

推荐新闻