Tables are a great way to show data to your users. However, they can be hard to read for folks using smaller devices like smartphones. Data may run off the screen. To make tables that display information more accessibly on smaller screens, use IANR Media’s Responsive Table Generator.
▶View the Responsive Table Generator
▶Watch the responsive table generator demo.
The Responsive Table Generator has three options for inputting data:
-Hand enter the data into the generator.
-Paste the data from a spreadsheet program like Microsoft Excel.
-Paste HTML table code from a webpage. This is useful for updating tables already on your site.
There are also options to add a title to the table, and select the first row and/or column as a header. The headers will display when the table is viewed at mobile widths to help organize the data for the user.
When you are ready to insert the table into your page, copy the code in the ‘HTML Output’ field. Edit your page, and switch your edit to ‘HTML’ with the dropdown at the bottom of the ‘Body’ field. Paste the code copied from the Responsive Table Generator into the Body.
After saving the page, try viewing the page at multiple widths by resizing your browser or using a tool like Responsinator. The table displays data in a horizontal orientation on smaller screens.
If you have ideas for videos or articles you would like to see, please email Keith McGuffey at kmcguffey2@unl.edu. More video tutorials can be found on the Nebraska Extension County Websites Media Hub channel.
###
Site Bytes is a regular column in Nebraska Extension – Keeping UP that provides quick tips for enhancing your county website. Written by Keith McGuffey, IANR Media Web Specialist.