提供行业解决方案

别再纠结了!尽管把你的烦恼交给我们吧,我们会将问题转化为一整套解决方案提供给你!方案的前期咨询根本不需你花一分钱。还不马上咨询?

提供软件客制服务

或许一套通用软件就能让你从烦恼中解脱出来,那就先到我们的软件产品仓库中选一款吧!我们还可以为你提供现有软件的扩展定制,即客户化定制。

提供软件实施服务

购买软件与汉堡包不同,软件产品和软件实施相结合才能发挥作用!没有良好的软件实施,必败!而采用我们的方案或产品,免费获得软件实施支持。

提供网站建设服务

坚持用心建站! 您只需告知所需要到达的终点,我们将带你一起穿越网站策划、平面设计、页面制作、程序开发和后期维护,享受全程的贴心服务。

提供网站维护服务

何必专门招人负责网站维护呢?你可能反驳招人能兼干其他工作,但是这样就不够专注。而我们提供的网站后期维护更专业,更专注,更划算。

19. HTML 表格

序言

你如何使用 Web 标准来组织大量的数据呢?如果使用数量庞大的嵌套元素,将所有的数据都有序地放入行和方框中,一定会让你伤透脑筋。不过对此有一个好的解决办法,那就是使用表格。

对网页设计师来说,使用表格是将数据组织整理为表格形式的好方式。换句话说,表格、图表及其它信息图表可以帮助你阅读和处理经过整理的大量信息,让你可以对照和比较不同的数据。你在网上随时都可以看到各种表格和图表,如政治选举结果的摘要或比较、体育比赛的统计、价格比较表、尺码表等。

在互联网发展的早期,那时候 CSS 作为一种将表现从 HTML 的结构中分离出来的方法尚未得到运用,网页设计师普遍使用表格来进行页面布局,创建表格和方框等来安排页面内容的摆置。当然这是不正确的做法。使用表格进行页面布局,会使页面充斥着大量的嵌套表格和无用代码,从而导致文档体积膨胀,难于维护且难于修改。即使是现在,你都还能看到这类网站。不过你们一定要记住,应该只将表格用作其本身的用途,即把数据列入表格之中。至于页面布局,则应使用 CSS 来控制。

 

在本篇文章中,我将讲述如何恰当地使用 HTML 表格。本篇文章的内容目录如下:

最基本的表格

我首先以语义化的 HTML 代码编写一个最基本的表格,这个用作示例的表格列入的是,北美的太平洋地区最近火山爆发的比较数据。在我还是一个小孩子时,就喜欢火山,在我们一家人夏季去探访我祖母的旅程中,曾说服我母亲带我去看了几座火山。当时我非常希望亲眼看到某一座太平洋西北部的火山的爆发,不过未能如愿。第一个表格的代码如下所示:

<table>
    <tr>
        <td>Volcano Name</td>
        <td>Location</td>
        <td>Last Major Eruption</td>
        <td>Type of Eruption</td>
    </tr>
    <tr>
        <td>Mt. Lassen</td>
        <td>California</td>
        <td>1914-17</td>
        <td>Explosive Eruption</td>
    </tr>
    <tr>
        <td>Mt. Hood</td>
        <td>Oregon</td>
        <td>1790s</td>
        <td>Pyroclastic flows and Mudflows</td>
    </tr>
    <tr>
        <td>Mt .St. Helens</td>
        <td>Washington</td>
        <td>1980</td>
        <td>Explosive Eruption</td>
    </tr>
</table>

上面的代码渲染后的样子:

Volcano Name Location Last Major Eruption Type of Eruption
Mt. Lassen California 1914-17 Explosive Eruption
Mt. Hood Oregon 1790s Pyroclastic flows and Mudflows
Mt .St. Helens Washington 1980 Explosive Eruption

让我们一项一项地分析一下以上代码中的 HTML 标记:

  • <table></table>:这个 table 元素是必须的,用来告诉浏览器你想以表格方式排列内容。
  • <tr></tr>tr 元素定义表格的一行。这可以让浏览器将 <tr> </tr> 标签之间的所有内容组织到表格的一行中。
  • <td></td>td 元素定义表格的单元格,或者行中各个单独的内容。所使用的 td 单元格的数量应仅为将数据放入单元格所实际需要的数量。不要使用空的 td 单元格来创建空格或填充距,而应该使用 CSS 来创建所需的空格或填充距,这不仅是将 HTML 文档的结构和表现相分离的好方式,同时还可以使那些靠屏幕阅读器,为他们朗读表格中内容的视力受损的用户,更容易理解表格。

请注意,这些基本元素必须像下面那样被嵌套:

<table>
    <tr>
        <td>content</td>
        <td>content</td>
        <td>content</td>
    </tr>
</table>

如果以其它顺序排列这些元素,将导致浏览器以非常奇怪的方式渲染表格,甚至无法渲染表格。

为表格添加一些特性

现在这个基本的表格已创建出来,接下来可以为表格添加一些复杂一点的特性。首先,我将加入标题和表头,使表格里的数据更语义化并更能为屏幕阅读器所易读。加入这些代码后,表格的标记如下所示:

<table>
    <caption>Recent Major Volcanic Eruptions in the Pacific Northwest</caption>
    <tr>
        <th>Volcano Name</th>
        <th>Location</th>
        <th>Last Major Eruption</th>
        <th>Type of Eruption</th>
    </tr>
    <tr>
        <td>Mt. Lassen</td>
        <td>California</td>
        <td>1914-17</td>
        <td>Explosive Eruption</td>
    </tr>
    <tr>
        <td>Mt. Hood</td>
        <td>Oregon</td>
        <td>1790s</td>
        <td>Pyroclastic flows and Mudflows</td>
    </tr>
    <tr>
        <td>Mt. St. Helens</td>
        <td>Washington</td>
        <td>1980</td>
        <td>Explosive Eruption</td>
    </tr>
</table>

上面的代码渲染后的样子:

Recent Major Volcanic Eruptions in the Pacific Northwest
Volcano NameLocationLast Major EruptionType of Eruption
Mt. Lassen California 1914-17 Explosive Eruption
Mt. Hood Oregon 1790s Pyroclastic flows and Mudflows
Mt. St. Helens Washington 1980 Explosive Eruption

所使用的新元素包括:

  • <caption></caption>:使用 caption 元素,可让你为表格加入标题。除非你选择使用 CSS 设置不同的文本对齐方式,绝大多数浏览器会将表格标题居中显示,并将标题行的宽度渲染为和表格一样的宽度。
  • <th></th>th 元素用于表格内的表头单元格。这不仅有助于更为语义化地描述表头内的内容的功能,还有助于各种不同的浏览器和设备更为准确地渲染表头。以上这个示例中显示的是使用 th 元素最为简单的方式。

进一步调整表格的结构

作为调整这个表格的最后一个步骤,我将定义表头部分和表体部分,加入一个表脚,并定义行和列标题的范围。我还将就加入一个描述表格内容的摘要属性,最后写成的标记如下所示:

<table summary="a summary of recent major volcanic eruptions in the Pacific Northwest">
    <caption>Recent Major Volcanic Eruptions in the Pacific Northwest</caption>
    <thead>
        <tr>
            <th scope="col">Volcano Name</th>
            <th scope="col">Location</th>
            <th scope="col">Last Major Eruption</th>
            <th scope="col">Type of Eruption</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td colspan="4">Compiled in 2008 by Ms Jen</td>
        </tr>
    </tfoot>  
    <tbody>
        <tr>
            <th scope="row">Mt. Lassen</th>
            <td>California</td>
            <td>1914-17</td>
            <td>Explosive Eruption</td>
        </tr>
        <tr>
            <th scope="row">Mt. Hood</th>
            <td>Oregon</td>
            <td>1790s</td>
            <td>Pyroclastic flows and Mudflows</td>
        </tr>
        <tr>
            <th scope="row">Mt. St. Helens</th>
            <td>Washington</td>
            <td>1980</td>
            <td>Explosive Eruption</td>
        </tr>
    </tbody>
</table>

以上代码在浏览器中的样子如下:

Recent Major Volcanic Eruptions in the Pacific Northwest
Volcano NameLocationLast Major EruptionType of Eruption
Compiled in 2008 by Ms Jen
Mt. Lassen California 1914-17 Explosive Eruption
Mt. Hood Oregon 1790s Pyroclastic flows and Mudflows
Mt. St. Helens Washington 1980 Explosive Eruption

所添加的新元素/属性如下所示:

  • theadtbodytfoot 元素:这三个元素分别定义表格的表头、表体和表脚。除非你是在为确实是复杂,有很多数据行和数据列的表格写代码,使用这些元素可能显得多余。不过对一个复杂的表格,使用这些元素就是很恰当的,这样不仅可以按代码编写者的意图使用表格来组织内容,而且也可以让浏览器和其它设备更清楚地显示表格的结构。
  • colspanrowspan 属性:使用 colspan 属性,可创建跨度超过一列的表格单元格。在以上示例表格的表脚中,我想让一个表格单元格的跨度为整个表格的宽度,因此我就使用 colspan 属性将表脚的跨度定义为 4列。另外,你也可以为表格单元格添加 rowspan 属性,将单元格的跨度定义为跨越 x 行,例如 <td rowspan="3">
  • summary 属性:该属性用于定义表格内容的摘要,供屏幕阅读器使用(请注意,上面表格被渲染到浏览器时,这个属性不可见)。在万维网联盟过去发布的建议规范(包括 WCAG 1.0 和 HTML 4.0)中,都规定以我上面所述的方式使用 summary 属性。不过在万维网联盟新近发布的规范草案中,未再提及 summary 属性。看来是否可继续使用 summary 属性尚未最后确定,但目前还是可以放心地使用的。毕竟这个 summary 属性具有提供网页可访问性的作用,且也不会造成 HTML 代码出现任何问题。
  • scope 属性:你们可能已经注意到 th 标签中的 scope 属性,实际上我是使用这个属性在数据行中把火山的名称定义为标题,这种做法是完全被允许的。可在 th 元素中添加 scope 属性,以告诉屏幕阅读器 th 元素中包含的内容是一列或一行的标题。scope 属性仅在 th 元素中使用。

使用 CSS 为表格添加样式,使表格更好看

以上这些列出的元素和属性,都是创建好的 HTML 表格必需的元素和属性。现在我已创建出这个示例 HTML 表格的结构,以下我将使用 CSS,为表格添加一些简单的样式,让它显得更好看一些:

body {
	background: #ffffff;
	margin: 0;
	padding: 20px;
	line-height: 1.4em;
	font-family: tahoma, arial, sans-serif;
	font-size: 62.5%;
}

table {
	width: 80%;
	margin: 0;
	background: #FFFFFF;
	border: 1px solid #333333;
	border-collapse: collapse;
}

td, th {
	border-bottom: 1px solid #333333;
	padding: 6px 16px;
	text-align: left;
}

th {
	background: #EEEEEE;
}

caption {
	background: #E0E0E0;
	margin: 0;
	border: 1px solid #333333;
	border-bottom: none;
	padding: 6px 16px;
	font-weight: bold;
}

在加入这些 CSS 代码后,表格最后显示出来的样子如图1所示。你也可以点击这里观看表格在浏览器中显示出来的样子

the final table example

图1:现在表格的外观好看多了

看到了吧,现在表格的外观好看多了。在深入地学习了如何使用 CSS 对表格进行样式化(后面有专文讲述个主题)之后,你可以按照你喜欢的任何方式,为表格添加样式。现在我将简要地向你们讲述以上的 CSS 代码:

  • body:在以上的 CSS 代码中,我加入了用于设置边距和填充距的属性(本示例中我将边距设为0),以及设置背景色(白色)、字号和字族、行高的属性。你们可以点击这里下载示例表格的代码,然后试着对 CSS 文件中的属性做一些改动,看看表格的外观会发生哪些变化。
  • table:使用 CSS 边框声明,添加了边框。为正确地加入边框,我将 border-collapse 属性设置为 collapse,重设了表格内边框的属性值,并让 border-bottom 成为一条横跨整行的直线,而不是在每个单元格的末端被分割开。我将表格的 width 设置为百分比宽度,具体的值为 80%(这样表格宽度在显示时就为屏幕宽度的 80%,且会随着浏览器窗口宽度的变化而相应地变化)。
  • thtd:在这个示例表格中,我使用 CSS 将文字对齐方式设为左对齐,不过你也可以将它们设为居中对齐,甚至还可以为各个 thtd 元素赋予类名称,然后使用 CSS 对每行或每列的样式进行控制(例如,如果要控制行的样式,可以为 tr 元素赋予一个类名称)。我还为 th 元素和 td 元素都添加了一点填充距,使每行内的文字隔得更开一些,以提高易读性。在 th 选择符内,我为标题设置了另一种颜色,以把标题和表格其它部分区分开来。
  • caption:如果你没有为 caption 选择符设置 CSS 属性,这样即使标题的 HTML 标记是包含在 table 标签之中,表格标题也不会有一个边框,其背景色也会和整个页面的背景色一样。因此,在以上这个示例中,我为表格标题设置了一个边框(无下边框,这是因为表格内的边框已提供了下边框),并设置了不同的背景色和字体(粗体),以把表格标题从表头行中分离开来。

总结

在本篇文章中,我已全面讲述了创建有效的 HTML 数据表格所需要了解的知识。以下是你们需要特别注意的:

  • 以正确的代码创建可被各种浏览器、移动电话及其它设备访问的表格,这是相当重要的。你应以尽可能地精简的 HTML 创建表格的结构,同时使用 CSS 对表格进行样式化。关于 CSS,在后面的课程中将详细讲述。
  • 只要你以精简的代码编写表格,并使用如 scopesummary 这样的属性,以及 caption 元素,清楚地指明表格的各个部分,那么表格是能被移动设备和屏幕阅读器正常访问的。此外,为确保表格的可访问性,不要使用空单元格来创建单元格间距(应使用 CSS 创建单元格间距)。

延伸阅读

练习题

  • 用 3个主要的表格元素,即 tabletrtd 元素,编写一个简单表格的代码。完成后将其保存,并在浏览器中观看。
  • 参照正文中的第二个示例,为你创建的表格添加表格标题、表头和表脚。完成后,表格在浏览器中显示出来的样子会发生哪些变化?
  • 为让你创建的表格能被屏幕阅读器和手持设备正常访问,你应该怎么做?
  • 创建一个 CSS 文件。尝试仅使用 CSS,而不使用 HTML 标记的属性,对你创建的表格的边框、填充距、单元格间距进行样式化,并添加背景色和设置字体。

联系我们

  • 网址:www.yercent.com
  • 电话:+86-531-66683968
  • 传真:+86-531-61365117
  • QQ:1251420996或564590102
  • Email: 该Email地址已收到反垃圾邮件插件保护。要显示它您需要在浏览器中启用JavaScript。
当前位置:首页 建站知识 19. HTML 表格