优质表格示例

评论1

嗯…… 我不确定我的表格是否符合“最佳”标准，但我认为它们能完成它们应该完成的工作。

http://www.cheltladiescollege.org/college/exams.asp

John Oxton 于 2005年2月27日星期日 下午3:35 GMT 如是说。

评论2

37 Signals Basecamp 的注册表格始终位居我的列表之首
http://www.basecamphq.com/signup.php

Jeff Werner 于 2005年2月28日星期一 下午2:07 GMT 如是说。

评论3

我觉得这个对于检查表格的可访问性特别有用

http://www.w3.org/WAI/References/Tablin/form

John Oxton 于 2005年2月28日星期一 上午11:35 GMT 如是说。

评论4

试试这些大家伙
http://css.maxdesign.com.au/listamatic/browser-support.htm

Russ Weakley 于 2005年2月28日星期一 下午1:09 GMT 如是说。

评论5

我在一家金融信息公司工作，需要大量地处理表格样式。我们目前有一些看起来非常不错的表格，但不幸的是它们在开发站点上。我会在它上线后努力记住发回来……

Robin 于 2005年3月5日星期六 下午6:12 GMT 如是说。

评论6

我怀疑这些表格不是最好的，但它们是我最喜欢的一些，因为是我做的。 :^) 我猜我只是为我的成就感到自豪，并对 HTML、CSS 和 JS 的可能性感到印象深刻。

http://geocities.com/transitinformationpackages/packages/skytrain [别忘了点击数字]

http://geocities.com/smallbusinesssites/portfolio/tohos/productinfo [向下滚动，别忘了尝试另外2种风格]

最后一个表格是一个有趣的挑战，但它让我有点不满意，原因有几个。
1) 该表格是有效的 HTML，但它违反了 W3C 标准的精神。如果我没记错的话，你真的不应该把 TH 放在表格中间。表格的性质实际上需要一个 TH 在中间，以利于作用域和其他类似的东西。在我看来，服装表格和其他类似的表格要求 TD 数据位于表格的外部边缘，而不是 TH 数据。
2) 表格的颜色选择不是很好，但我不知道该怎么做，因为不同的颜色更容易看清楚，但它很刺眼，如果我理解正确的话。
3) 我希望能够像电子表格一样左右上下滚动，并且始终将标题保留在视口中。在这一点上，如果你查看一个包含 1000 个单元格的表格，然后滚动到单元格 #500x#500，那么你将很难知道该单元格的标题是什么。当然，你可以使用 JS，但那应该是浏览器的一个功能。
4) 有时很难知道是将所有数据放入 1 个表格还是将其分成几个表格。也许这就是经验和专业知识的作用。

Eugene Wong 于 2005年3月6日星期日 上午12:16 GMT 如是说。

评论7

我会像鹰一样关注这个帖子。我花了将近 2 个小时在网上搜寻一个体面的、易于访问的表格示例，但一无所获。许多表格通过格式看起来不错，但这并不能使它们易于访问。没有人使用 'caption' 或 'summary'，很少有人使用 <th>。

一旦我找到一个，我就会发出来。就连我当地的马拉松比赛结果页面也渲染不正确，而且访问起来很麻烦。

Eddie. 于 2005年3月7日星期一 下午5:02 GMT 如是说。

评论8

为了引起你的兴趣，我所有的表格都使用了 theads、tbodys、summaries、column 和 row scoping，以及 CSS 样式。我从未弄清楚 caption 和 summary 之间的语义差异，所以我倾向于只使用 summary，因为跨浏览器 caption 样式效果不佳。

Robin 于 2005年3月7日星期一 晚上9:53 GMT 如是说。

评论9

@Eddie.. 也许这个会有用？

http://joshuaink.com/blog/24/accessible-table-template

John Oxton 于 2005年3月8日星期二 下午2:32 GMT 如是说。

评论10

这是一个相当不错的表格
http://www.pictureit.co.uk/

Derek 于 2005年3月9日星期三 下午5:32 GMT 如是说。

评论11

我很久以前用表格做了这个网站 - 现在看看 - 它绝对会是 DIV 的一个好候选人 haha。算了 - 吃一堑，长一智。 http://www.etspa.com

Chet 于 2005年3月10日星期四 晚上7:03 GMT 如是说。

评论12

http://joshuaink.com/blog/24/accessible-table-template

这看起来好多了。网上有越多样式精美、易于访问的设计，就越能提倡标准。我即将参加一个关于网络的无障碍活动，并将了解一些实际的可用性问题。验证和 WAI-AAA 远远不够，因为它们只帮助其他设备访问互联网。可用性是关键，很高兴看到网上如此具有吸引力和可用性的表格。

来吧，人们，展示更多。我还在努力寻找！

Eddie 于 2005年3月19日星期六 下午6:56 GMT 如是说。

评论13

还有什么比显示其他（SQL）表格更适合使用 HTML 表格呢？

随便看看，还有很多（季节和月相很有趣）。

Doug 于 2005年3月27日星期日 上午2:09 GMT 如是说。

评论14

哎呀，

http://loadaveragezero.com/app/dbrowse/dcal/tables/events/data

或者你可以点击我上一篇文章中的名字。 ~d

Doug 于 2005年3月27日星期日 上午2:11 GMT 如是说。

评论15

Todd Dominey 关于 2004 PGA 锦标赛的作品是我见过最漂亮的 HTML 表格之一。
http://www.pga.com/pgachampionship/2004/

HTML 有一些验证问题，并且没有您可能想要的所有可访问性功能，但我怀疑这些问题是由于中间件/ CMS 造成的。非常漂亮的表格……

Patrick Taylor 于 2005年3月31日星期四 上午2:56 GMT 如是说。

评论16

样式精美的表格示例
http://phonophunk.phreakin.com/articles/browser-stats.php

FataL 于 2005年5月24日星期二 晚上8:36 GMT 如是说。

评论17

我希望这个页面既相关又有用

http://www.reeddesign.co.uk/test/pantone2rgb.html

Roy Reed 于 2005年6月1日星期三 下午5:52 GMT 如是说。

评论18

@评论 7
Summary 是对表格用途的描述。Caption 是表格的标题。

于 2006年1月8日星期日 下午3:39 GMT 如是说。