Wow ...

Scrollable CSS Table that is accessible

Responsive Table That Also Scrolls if Necessary

Books I May or May Not Have Read

Author Title Year ISBN-13 ISBN-10
Miguel De Cervantes The Ingenious Gentleman Don Quixote of La Mancha 1605 9783125798502 3125798507
Mary Shelley Frankenstein; or, The Modern Prometheus 1818 9781530278442 1530278449
Herman Melville Moby-Dick; or, The Whale 1851 9781530697908 1530697905
Emma Dorothy Eliza Nevitte Southworth The Hidden Hand 1888 9780813512969 0813512964
F. Scott Fitzgerald The Great Gatsby 1925 9780743273565 0743273567
George Orwell Nineteen Eighty-Four 1948 9780451524935 0451524934

Note that this is an accessible (keyboard and screen reader) responsive (width and print) table. You can read everything that went into the code in the tutorial (so you can make your own). - A. Roselli
Update - Fixed Table Headers 1/6/2020

 

Resources

Thank You!!

Jim Allan jimallan@tsbvi.edu

Homework

Take the following table. Make it accessible (add caption, explanation, th, borders, spacing, headers, id)

Travel Expense Report

Meals Hotels Transport subtotals
San Jose
25-Aug-97 37.74 112.00 45.00
26-Aug-97 27.28 112.00 45.00
subtotals 65.02 224.00 90.00 379.02
Seattle
27-Aug-97 96.25 109.00 36.00
28-Aug-97 35.00 109.00 36.00
subtotals 131.25 218.00 72.00 421.25
Totals 196.27 442.00 162.00 800.27