Re: Coding table notes

Unfortunately HTML is not well prepared to handle document sub-structures known as tables, despite the fact that the respective tag is named <table>. HTML insists tables must be a rectangular arrangement of accordingly interrelated data, use of tables for layout purposes is frowned upon. In the 'real world' tables are used in a much richer way, and auxiliary information - like explanatory notes - can easily be accommodated inside the structure, and the whole is still easily perceived as a table. While HTML can associate a caption (carrying its title, not sure why it's called caption...) with a table it has no mechanism to associate "other stuff" with it. In real documents tables often consist of an arrangement of a title (HTML caption), a caption (not to be mixed up with HTML caption), notes … - not too different from a richer illustration accompanied by other stuff. 

Illustrations are much better off though - they can be used inside a <figure> tag:
> The figure element represents a unit of content, optionally with a caption, that is self-contained, that is typically referenced as a single unit from the main flow of the document, and that can be moved away from the main flow of the document without affecting the document’s meaning.


Maybe it would be an option to have the table inside a <figure> tag (the word image or illustration is not used in the definition of a <figure>)? So something like

<figure>
	<figcaption>Table 12 : xyz
	<table>
		<thead> <th> <th> <th> </thead>
		<tbody> <td> <td> <td> </tbody>
		<tfoot>
	</table>
	<div class="wb-fnote" role="note">
		<p id="fn-table12"><strong>Table 12 Notes</strong></p>
		<dl> <!-- place <dt> and <dd> here --></dl>
	</div>
<figure>


Once caption can mean title, why can't figure mean table? ;-) 

Olaf


PS: A quick search reveals that  the above is already suggested here:  http://www.w3.org/TR/html5/common-idioms.html#footnotes (see example towards end of the page)


On 1 Dec 2014, at 18:49, "Rabab Gomaa" <Rabab.Gomaa@inspection.gc.ca> wrote:

> Hello,
>  
> Thanks for the feedback!
>  
> Just to clarify, the table notes here are notes related to the data in the table (table footnotes) and not information describing the structure of the table. Here are the solutions I think of. What do you think:
>  
> Coding notes in tfoot wrapped with a div:
>  
> <table>
> <caption>Table 12 : xyz
> <thead> <th> <th> <th> </thead>
> <tbody> <td> <td> <td> </tbody>
> <tfoot>
> <tr>
> <td colspan="3">
> <div class="wb-fnote" role="note">
> <p id="fn-table12"><strong>Table 12 Notes</strong></p>
> <dl> <!-- place <dt> and <dd> here --></dl>
> </div>
> </td>
> </tr>
> </tfoot>
> </table>
> 
> or
>  
> Coding it after the table and wrap the table + notes with <figure> to group the table and the notes elements:
> <figure>
> <table>
> <caption>Table 12 : xyz
> <thead> <th> <th> <th> </thead>
> <tbody> <td> <td> <td> </tbody>
> </table>
> <div class="wb-fnote" role="note">
> <h2 id="fn-table12">Table 12 Notes</h2>
> <dl> <!-- place <dt> and <dd> here --></dl>
> </div>
> </figure>
>  
> Rabab
> >>> Christophe Strobbe <strobbe@hdm-stuttgart.de> 2014-12-01 9:12 AM >>>
> Hi,
> 
> On 28/11/2014 23:33, Rabab Gomaa wrote:
>> (...) 
>> I have a page with multiple tables that have their own notes. Here is what I think of for the table notes coding.
>> - The table notes in a definition list wrapped with <aside> and placed inside <tfoot> element after <tbody>. Beside having a number to identify each table.
> 
> The tfoot element is not intended for free text notes; it can only contain table rows (tr elements). A possible use case for tfoot is repeating the column headers (cf. thead) in a long table; another is presenting the sum, average, ... of the values in the columns. One of the features that the authors of HTML4 had in mind was scrolling the tbody rows between the thead and tfooter rows. 
> (Before HTML5, tfoot could only occur between thead and tbody; HTML5 also allows it after tbody.)
> 
> If the notes are important for understanding the table, I would not put them in an aside. 
> The HTML5 spec says: "The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography.
> The element can be used for typographical effects like pull quotes or sidebars, for advertising, for groups of nav elements, and for other content that is considered separate from the main content of the page."
> 
> Best regards,
> 
> Christophe Strobbe
> 
>>  
>> <table>
>> <caption>Table 12 : xyz
>> <thead> <th> <th> <th> </thead>
>> <tbody> <td> <td> <td> </tbody>
>> <tfoot col="3">
>> <aside class="wb-fnote" role="note">
>> <h2 id="fn-table12">Table 12 Notes</h2>
>> <dl> <!-- place <dt> and <dd> here --></dl>
>> </aside>
>> </tfoot>
>> </table>
> 
> 
> -- 
> Christophe Strobbe
> Akademischer Mitarbeiter
> Responsive Media Experience Research Group (REMEX)
> Hochschule der Medien
> Nobelstraße 10
> 70569 Stuttgart
> Tel. +49 711 8923 2749
> 
> "La vie est courte, hélas! et je n'ai pas encore lu tous mes livres!" (d'après Mallarmé).