|
TablesModule
Notes on the Tables Module.
Tables ModuleLocation/stylesheets/modules/tables.css Source Codehttp://code.google.com/p/sparkl/source/browse/trunk/stylesheets/modules/tables.css SummaryThe links module sets some basic presentation for tables. HTML Design PatternRemember that tables should only be used to mark up tabular data and not for layouts!! <table cellspacing="0" summary="A table demonstrating the tables module"> <caption>The table module</caption> <thead> <tr> <th> </th><th scope='col'>The</th><th scope='col'>Table</th><th scope='col'>Module</th><th scope='col'>Header</th><th scope='col'>Header</th><th scope='col'>Header</th> </tr> </thead> <tfoot> <tr> <td> </td><td>The</td><td>Table</td><td>Module</td><td>Footer</td><td>Footer</td><td>Footer</td> </tr> </tfoot> <tbody> <tr> <th scope='row'>The</th><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td> </tr> <tr> <th scope='row'>Table</th><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td> </tr> <tr> <th scope='row'>Module</th><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td> </tr> <th scope='row'>Header</th><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td> </tr> <th scope='row'>Header</th><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td> </tr> <th scope='row'>Header</th><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td> </tr> </tbody> </table> DescriptionWhy It's BulletproofThe table is marked up accurately, with a summary and caption. How it worksIE FixesNone IssuesInternet Explorer 6 and below do not support the :hover pseudo class on elements that are not anchor tags, so the row-hover effect will not work in these browsers. It would be nice to make the table body scrollable if it went beyond a certain width (like a spreadsheet) although I can't seem to be able to find a way of doing this consistently without using Javascript. Extra information could be added to the table markup such as abbr for headers colgroups to improve the accessibility. Further Reading
Other Modules
|
Sign in to add a comment
