什么是表格?(推荐学习:HTML入门教程)
表格是由行和列组成的结构化数据集(表格数据),它能够使你简捷迅速地查找某个表示不同类型数据之间的某种关系的值。比如说,某个人和他的年龄,一天或是一周,当地游泳池的时间表。
表格在人类社会中很常见,而且已经存在很长时间了,下面这张1800年的美国人口普查文件中就可以证明:
html-1.webp
因此,HTML的创建者们提供了一种方法来构建和呈现web上的表格数据,这也就不足为奇了。
表格如何工作?
表格的一个特点就是严格.通过在行和列的标题之间进行视觉关联的方法,就可以让信息能够很简单地被解读出来。
正确完成后,即使是盲人也可以解析HTML表格中的数据,一个成功的HTML表格应该做到无论用户是视力正常还是视力受损,都能提高用户的体验。
你可以在GitHub上找到上面表格的HTML源码;先去看看,你也许会注意到一件事情,那就是这个表格看上去可读性不是很好,那是因为现在这个页面上面的那个表格通过MDN站点添加了一些样式,而GitHub上面的并没有添加。
不要幻想;为了能够让表格在网页上有效,你需要提供一些CSS的样式信息,以及尽可能好的HTML固定结构.在这个模块中,我们将专注于HTML部分;在你完成这里的内容之后,你可以浏览Stylingtables来了解CSS的部分。
虽然在这个模块中我们不会专注于CSS,但是我们提供了一个较小的CSS样式表让你使用,和默认的没有采用任何CSS样式的表相比,表格会更加可读。你可以在stylesheethere获取样式表,以及在HTMLtemplate获取HTML文件来应用样式表,这些会让你在“测试HTML表格”中有一个好的起点。
什么时候你不应该使用HTML表格?
HTML表格应该用于表格数据,这正是HTML表格设计出来的用途.不幸的是,许多人习惯用HTML表格来实现网页布局,e.g.一行包含header,一行包含几列内容,一行包含footer,etc.你可以在我们的AccessibilityLearningModule中的PageLayouts获得更多细节内容和一个示例。
这种做法以前是很常见的,因为以前CSS在不同浏览器上的兼容性比较糟糕;表格布局现在不太普遍,但您可能仍然会在网络的某些角落看到它们。
简单来说,使用表格布局而不使用CSSlayouttechniques是很糟糕的.主要的理由有以下几个:
表格布局减少了视觉受损的用户的可访问性:屏幕阅读器,被盲人所使用,解析存在于HTML页面上的标签,然后为用户读出其中的内容。因为对于布局来说,表格不是一个正确的工具,使用的标记比使用CSS布局技术更复杂,所以屏幕阅读器的输出会让他们的用户感到困惑。
表格会产生很多标签:正如刚才提到的,表格布局通常会比正确的布局技术涉及更复杂的标签结构,这会导致代码变得更难于编写、维护、调试.
表格不能自动响应:当你使用正确的布局容器(比如<header>,<section>,<article>,或是<div>),它们的默认宽度是父元素的100%.而表格的的默认大小是根据其内容而定的。因此,需要采取额外的措施来获取表格布局样式,以便有效地在各种设备上工作。
|