For instance, some people want a two column look for their content and will use a table to get it. The slick two column look on your desktop is unreadable on your phone. The point is to avoid using tables for the layout of a page. Tables should be reserved for displaying tabular data. For instance, a size or pricing chart is commonly represented in a table.
There is no other practical way to show it. Either the table squishes itself to fit the width of the phone or horizontal scrolling is necessary.
Neither solution is very good. What we need are responsive tables. Fortunately, some enterprising people have figured a way around this. When the table is rendered on mobile, each row on the table is shown as two columns; the first column shows the data-title, which is the same as what would be in header row, and the second column shows the data.
The result is a perfectly responsive table. The images below illustrate the meaning. If you or your web developer are using tables properly and implement the special markup described in the linked post, you can keep your optimized mobile experience intact. For questions about this website, email digitalgov gsa.
Additional information about the U. Have a question about government services? Skip to main content Official websites use.
Beth Martin. Clair Koroma. David Fern. Oct 28, Web Design System. Directory of services, tools, and teams. DotGov Registry. File name trends-on-tuesdayways-to-format-tables-for-responsive-web-design. Return to top. Read more TTS Solutions is a portfolio of products and services that help agencies improve delivery of information and services to the public.
Very good blog post. I would love to see how you tested long sentences, paragraphs, linked content, html, image icons, dates, with filters all in a single responsive table. Thank you for the comment Matt. These are very good points which we will be looking into in the future.
This article has been really helpful to me. Thank you for writing and sharing your knowledge with us. Nice one! Thanks for the link sandilyan.
The result looks pretty neat! Very good job I Applied to my work. It Is really So Nice. Thanks Pullarevu Sreenivasulu. Tyvm for this post! This was what I was really looking for! I really like the pros and cons and the last checklist! Hi, thanks for the summary!! I'm actually working on a fusion between a carousel and a table grid with records. This approach aims to prevent a long vertical scroll due to the ammount of data, while presenting the data of a record in a single view.
Somehow similar as a deck of cards, you move each card record that contains a single record with a horizontal swipe. I think it will turn really useful to record data as a form while being able to see the recorded data in a friendly presentation and use.
Really good post, pretty usefull. It gaves me some ideas to create my own responsive tables avoiding frameworks like bootstrap. We are an award winning web design agency with over 20 years experience.
We help guide businesses through the digital landscape, designing beautiful experiences for your customers along the way. Site search Search keyword s : Search. Home Blog. Examples of default tables Table Viewed on a large screen:.
0コメント