Tables

Out of ? entries:

See also: Collections of Interesting Data Tables from 2007.

Research by Philip Taylor (2 entries)

summary values
105 entries.
DMOZ Sample of ~130,000 pages

I see 3,301 pages using @summary (on any element, but I assume pretty much all on table), out of 92,066 pages using table

Philip Taylor on #whatwg at 19:27.

(940,942 table, 12,834 @summary)

Philip Taylor on #whatwg at 19:39.
1.4% of the <table> elements had a summary attribute in the sample of ~130,000 pages.
I’ve requested 105 random summary samples from Philip’s big sample.
Categorising how summary is used was specifically requested by James Graham.

Blogs (5 entries)

DOM Scripting: ABBRacadabra
<th abbr="Monday">Mon</th> for <th><abbr title="Monday">Mon</abbr></th>.
Bryan Starbuck: Live!
Table faked with &nbsp;.
illspirit: Homicide
Nested tables for headings and <caption>.
Jim Tatcher: WCAG & 508
2 big tables for several small tables with prose in between.
My 2007 in Blogs // hicksdesign
<td><strong> for <th>.

Computing (14 entries)

Chatzilla Data
<table> with a <div style> in each <td> for bar charts.
Elemental Group: QA Survey
summary=" ".
<th scope><strong> for headers.
<td>&nbsp; for empty data cells.
<td rowspan> for <caption>.
IANA: URI Schemes
<td width><div align><font color><em><strong>...</strong></em></font></div></td> for <th>.
Mapping [...] CSS
<strong> for <b>.
<span class> for <b>.
<div style> for <pre>.
MS Speech: Availability
<table class style cellSpacing cellPadding border class> for <table> or <table class>.
<tr style> for <tr> or <tr class>.
<td class style vAlign width><p class style><font size><font face> for <th>.
<td class style vAlign width><p class style><font size><font face> for <td>.
Mozilla: irc: urls
<td> for row headers in 2-column data tables.
2-column data tables used in some places, <p> with <br> in others.
Opera Help: Menus
<table class><tr><th>...</th><th>...</th></tr></table> for <ul><li><samp>...</samp><li><samp>...</samp></ul>.
Opera: Tables
summary="a summary of ..." where ... is the <caption> text.
<tfoot> for table authorship details.
Pixels to Ems
<th><em>.
<td scope=row>.
Q&A: Interoperability
<th> for column headers.
<th scope> for column headers.
<td headers scope> for row headers.
<td style> for every data cell.
Quote Marks Table
<th>+<td>.
<img alt>.
3 column header levels.
Quote Marks Table
No headers.
SitePoint: CSS filter
<th> for headers with <td headers>.
<th> for headers with <td>.
<th><th headers><td headers> near bottom.
YUI: Performance 2
<img> for <table>.

Education (2 entries)

GCSE-level results
<td><span><b>, <td><span>.
MIT: Readings
<th id scope> for column headers in regular positions.
<td headers> for data cells in regular positions.
<td headers colspan><strong>...</strong</td> for section headers in positions expected by the “smart colspan” step.
headers+id and scope become unnecessary for this table.

Finance (3 entries)

Financial Statements for Google Inc. - Google Finance
<tr><td colspan>&nbsp;<h2>...</h2>&nbsp;( ... )</td></tr> for <caption>... (<dfn>...</dfn>)</caption>.
<td class align valign>...<wbr> (...)<br></td> for top-left header.
<td valign="top class>&nbsp; ...</td> for column header.
<td align bgcolor>&nbsp;...&nbsp;</td> for data cells.
<td bgcolor>&nbsp;<span style></span>...&nbsp;</td> for child heirarchical row headers.
<td bgcolor>&nbsp;...&nbsp;</td> for parent heirarchical row headers.
<td bgcolor>&nbsp;<b>...</b>&nbsp;</td> for subtotals row header.
<td align bgcolor>&nbsp;<b>...</b>&nbsp;</td> for subtotals data cell.
<tr width><td colspan bgcolor></td></tr> for </tbody><tbody>.
<td align bgcolor>&nbsp;<span class>-&nbsp;</span></td> for empty data cells.
Southwark: Accounts
PDF "Statement of accounts 2000/01" has odd cell arrangements.
Southwark: Performance
Word document "The following link opens in a new windowPerformance Tables 2000/01 " has wide tables with many empty cells.

Government (9 entries)

Drug use : Prevalence of problem drug use, ages 15-64 years, in the EU-27(1999-2003) - EUphact
<th colspan="1" width align valign scope><p><span class>...</span></p></th> for column headers.
<td colspan="1" width align><p><span class>...</span></p></td> for data cells.
2 entries per row.
Table PDU-1 part (I). Prevalence of problem drug use at national level and range in local estimates, 1999 to 2003
<tr ondoubleclick> for each row.
<th class rowspan><p id xml:lang onlick>...</p> <p id xml:lang onclick </p></th> for column headers.
<th class><p id xml:lang onclick>...</p></th> for row headers.
<td class><p id xml:lang onclick>...</p></td> for data.
FRB: Accessible version of tables and charts contained within "An Analysis of the Potential Competitive Impacts of Basel II Capital Standards on U.S. Mortgage Rates and Mortgage Securitization"
<table title> repeats preceeding <h3>.
<th valign scope> for top-left header.
<th scope="column"> for <th scope="col"> as column headers.
<td align="center"> for numerical data cells.
<th width align scope> for top-left header in next table.
<td align="center"> for alphabetical grades.
headers+id used in tables 4.1 and 4.2 for any cell with content.
Lots of empty cells in 4.2 down the left and middle.
<td>&nbsp;</td> for empty cells.
3 levels of heirarchical row headers:
UPPERCASE:
Could be done as section headers by spanning entire table width.
Title Case:
Level 2 row headers are like subsection headers. Plenty of space for rowspan?
Title Case indented by &nbsp;&nbsp;&nbsp;:
Would become normal row headers.
Totals placed at bottom of table as normal rows, not using <tfoot>.
<td align="right" headers> for numerical data cells.
Departmental financial statements
header+id instead for <th colspan> or <td scope>.
Population Projections of Young Persons
<td> for column headers.
<td colspan><strong> for section headers.
scope=col for scope=rowgroup.
Heirarchical row headers.
USA FactFinder: Demographic Characteristics, 2000
Heirarchical row headers.
Make a variant with the Stephen Ferg headers+id patch.
Multiple tables packed into one? Make a variant.
Use rowspan? Make a variant.
Use <th colspan> across the whole width to split into major sections? Make a variant.
USA FactFinder: Nonemployer Statistics, 2005
headers+id.
<td class>.
Repetitive.
Weather Centre
<td><strong>... for headers.
Javascript onMouseOver for title positioned between column headers and data.
headers+id.
<abbr title> made redundant by column headers.

Layout Tables (8 entries)

Chronological Table of the Private and Personal Acts
Layout table for arbitrary strings as list markers.
Long entries are split across rows in the layout table instead of wrapping within a cell.
Crimson Editor
<p><table width cellspacing cellpadding border><tr><td class><img src width height></td><td class>&nbsp;<a href><b>...</b> ...</a> - ...</td></tr> ...</table><p> for <ul class><li><a href><strong>...</strong> ...</a> - ...</li> ...</ul> with custom list-style-image.
<tr bgcolor><td width><td class></td>&nbsp;&#149&nbsp; <a href target>...</a></td></tr> for <li><a href>...</a> around each item in bulleted navigation list.
Google Site Map
Layout table trying to be somewhat like a data table.
dev@httpd.apache.org Archives
Simple nested layout tables.
Google Chart API
Layout table.
Mozilla: Vulnerabilities
Logo alongside heading and list.
Petition Spot: Save the Accessibility Institute
Layout tables.
Yahoo!
scope in layout table.

Products (11 entries)

BESLIST.nl
<table> for layout and <datagrid>.
Bigger Bras: Fitting Bras, Correct Bra Size and Comparisons
Continuous table split into 5 sections as if it were wrapping like text.
<tr align valign><td height colspan bgcolor><div class>&nbsp;</div></td></tr> for </tbody><tbody>.
Header-like cells in first 3 columns but only column 1 is useful as a row header?
<td colspan align bgcolor><div class>...<br>...<br>...</div></td> for main column header.
<td align bgcolor>...<br>...</td> for column 1 and 3 headers.
<td align>...</td> for column 2 header.
<td align bgcolor>...</td> for rightwards column headers
<td align>...</td> for data cell.
<td align><a href><span class>...</span></a></td>.
<td align>&nbsp;</td> for empty cells.
Firefox: all betas
Optimise with <col class> applying background-image and padding-left.
<col class> to right-align version numbers.
:first-child and :last-child or per-side borders.
tr:nth-child(odd) with <tr> background-color.
Graphical border at bottom could do Sliding Doors using background-image on <table> and <tbody> with padding-bottom.
Flickr: Wielder of the Wiimote
Row headers use <td><b>.
Important data cells also use <td><b>.
Layout footer.
Google In Your Language
Plain <th>; with plain <td>.
<p><blockquote><table><tr><td valign>Alphabetical List: <p><table border>...</table></p> <table><caption>Alphabetical List</caption> ...</table>.
Ircle: Color FAQ
<pre> with ASCII art for <table> with HTML elements.
Irssi
<div class><span class> for <table> of team members.
Photoshop CS3 Versions
<thead> for table headers section.
<tbody> for table data section.
<th style scope> for column headers.
text-indent and background-image visually replace yes with a bullet graphic in data cells via class.
text-indent visually remove no from data cells via class.
Plain <td> for column 1 of data.
<th colspan scope="row"> for section headers.
phpBB • Features
<thead> for table headers section.
<tbody> for table data section.
<th style> for column headers.
<td colspan><a name id></a><h4><a href>...</a></h4></td> for section headers.
<td><strong> for row headers.
<tr><td class colspan><a name id></a></td></tr> between sections.
<td><img src alt="Yes" /> Yes</td> for <td class>Yes</td> with CSS background-image.
Shoe Charts
<td><div><b> but not <td><p><b>.
TSO Online Bookshop
Real & fake.

Science (2 entries)

Periodic Table
Sane headers.
Charactistics of Learners
<td><p><strong>)
<td><p>.

Sports (7 entries)

betMooch: Greece
<thead> and <th> for column headers.
<td>-</td> for empty cells.
Section headers using <td> for a “Position” column.
<tfoot> for expansions to abbreviated column headers.
betMooch: Team
<td> for headers.
Section headers for a “Position” column with <td rowspan>.
Boxscore
Play by Play, All.
League Table - Premier League
Column group headers are given by a preceeding <ul> with vertical bar characters and header text presented inline and spaced out to roughly match the visual boundaries of each column group, except it is always offset to a slightly wrong position by the time notice.
<td> for all cells.
No expansions for abbreviated column headers.
<img> without alt indicates whether position has changed since last time.
Numbered table rows.
Most useful row header is probably column 3 but most logical is column 1?
<td class id> for all data cells.
NBA 15,000
Irregular totals?
Paralympics medal table
<td><b>
Numbered rows.
Team Stat Comparison
Row subheaders.

Timelines (1 entry)

Ferrari Testarossa - Wikipedia
Top-left header.
2 levels of column headers.
2 levels of row headers.
Final row header spans both levels.
<td><strong class> to when a cell referencing the current page has been de-linked.
Data cells (and empty cells) use complex spans.
Data cells (and empty cells) sometimes overlap into another column group.

Timetables and Schedules (6 entries)

SOCITM perfect website (PDF)
Schedule columns: time, events 1, events 2.
TPAC 2007
<th> col & row, <td><strong>.
W3C Plenary
Empty <th> + forms.
OnTheBox.com TV Listings
1 row per hour.
1 channel per column.
1 cell contains many shows.
1 <li> per show.
<th> for column headers.
<select> with many items expects selected item to provide column header text.
<a title="Description" href>Title</a> for each show.
Simon Willison: 10th January 2007
<strong> in <table> for highlighting data.
Timetables - 'one' railway
PDF.