HTML 表格基础 |
您所在的位置:网站首页 › 怎样弄表格标题内容 › HTML 表格基础 |
有时我们希望单元格跨越多行或多列。以下是一个简单的例子,显示了一些常见动物的名字。在某些情况下,我们要显示动物名称旁边的男性和女性的名字。有时候我们又不需要,那不需要的情况下,我们希望写着动物的名字的单元格的宽度可以是两个单元格的宽度 (因为写着名字的行会有两列,而没有写名字的行只有一列,行的宽度是不一样的)。 一开始的标记写法是这样的: 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). |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |