Best Practices for Print / Mobile Friendly HTML Tables (Updated)
In Extension there are many times when we need to display tabular data to our users. However, large tables can be difficult to decipher, take too long to scan, or inevitably just confuse your users. We always recommend keeping your tables as small and simplistic as possible (the fewer the columns, the better), and if you can’t, you should consider separating the data into two or more tables.
There are several reasons large table(s) don’t play well on the web:
- Large tables rarely look good printed. While they may look ok on a 15″ (or larger) screen, they likely aren’t going to scale down to an 8.5″ piece of paper.
- They’re terrible for mobile. There really isn’t a great solution here, but smaller tables do fare better than larger ones, and rely less on the users short-term memory (as they scroll back and forth) on a small screen.
There are a number of considerations you can make when designing your table to ensure that it’s clean, lean, and user-friendly. We’ve created a fictitious table below about Red Beetle thresholds to show were these potential opportunities exist.
I’ve highlighted a few areas for improvement…
|Geographic Region||First Appearance||Suggested Treatments||Expected Beetles per row foot||Average Beetle Size (millimeters)||Potential Damage||Days to Eradicate|
|North Carolina||Nov. 15 to Mar. 15||Red Pepper Dust, Cobble Stone Mortar||15||6.0||—||10 – 12|
|Virginia||July 15 to Aug. 15||Nothing found to be effective||11||0.5 – 1.0||Very-High||N/A|
|Louisiana||July 1 to 15||Alligator Eggshells, Dragonstone||20||0.25 – 0.5||Medium-Low||7 – 10|
|Georgia||Aug. 1 to 15||Tall Fescue Clippings, Cinnamon||8||1.0 – 1.5||Very-Low||5 – 7|
|South Carolina||Aug 1 to 15||Green Ketchup||16||0.5 – 1.0||Very-Low||5 -7|
Remember, our goal is to reduce noise, and our keep columns as skinny as possible.
Here’s what we cleaned up:
- Two of our table headers could be more concise; We always recommend using your best discretion here (you shouldn’t place brevity above clarity). “Geographic Region” could simply be renamed “State”, and Average Beetle Size (millimeters) could simply be “Avg. Beetle Size (in mm)”
- This one is a judgment call, but you could abbreviate the names of each state if you needed additional room in your table.
- Our dates “Nov. 15 to Mar 15” can be shrunk down by using their numerical equivalents “11/15 to 3/15″. It’s extremely important NOT to use a dash in place of the word ” to ” when separating two dates, this is for accessibility.
- For Average Beetle Sizes we replaced a lot of decimals like “0.5” with their fraction equivalent ½, which cuts 3 characters down to 1. There’s also no need to represent a whole number as a decimal so 6.0 can simply be 6.
- Not only will a screen reader skip over our value of “–“, we’re completely confusing the user here. What does “–” actually mean? Is it unknown? Or was it simply not tested? It’s better to be 100% clear in this case.
- In the Potential Damage column, we could end up with a lot of re-used values, especially as our table gets larger. If we are pressed for room horizontally in our table, it can sometimes make sense to extract those values out into abbreviations and provide a key in the table footer. Note: in this particular case, that probably wasn’t necessary.
- In the Days to Eradicate column, we’ve replaced the dashes ” – ” as range dividers with the word ” to “. The primary reason for this is that most screen readers skip over the dash when reading the text aloud to a visually impaired user.
Here’s the final result!
|State||First Appearance||Suggested TREATMENTS||EXPECTED Beetles per ROW Foot||Avg Beetle Size (in mm)||Potential Damage||Days to Eradicate|
|NC||11/15 to 3/15||Red Pepper Dust, Cobble Stone Mortar||15||6||Unknown||10 to 12|
|VA||7/15 to 8/15||Nothing found to be effective||11||½ to 1||VH||N/A|
|LA||7/1 to 7/15||Alligator Eggshells, Dragonstone||20||¼ to ½||ML||7 to 10|
|GA||8/1 to 8/15||Tall Fescue Clippings, Cinnamon||8||1 to 1.5||VL||5 to 7|
|SC||8/1 to 8/15||Green Ketchup||16||½ to 1||VL||5 to 7|
Cold Tolerances: VH = Very-High; ML = Medium-Low; VL = Very-Low;