Re: Coding table notes

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é).