Seriously, Designing Tables to be Read, Not Looked At came out after I wrote all this stuff.
Then I find my exceptions and adjust accordingly for both the column header and the cell. I generally left-align all my text (not justified, because justified text adversely affects dyslexic readers) and right align my numbers (because browsers refuse to support decimal alignment). See Designing Tables to be Read, Not Looked At for more justification for this approach. I prefer my column headings to align to the bottom, while my table data aligns to the top. Based on experience, user testing, and accessibility practices, I generally include zebra stripes to help group rows that change into blocks as users rotate screens or otherwise change context.ĭepending on the nature of your content, get some vertical alignment into place. You can read an excerpt on A List Apart in the post Designing Tables to be Read, Not Looked At. If you’ve read Richard Rutter’s book, Web Typography, you may understand why in a vacuum this is not always a good idea. Be sure to keep your color contrast ratios in mind (so the text meets WCAG values against both backgrounds).īackground-color: rgba(255, 255, 255, 0.25) īackground-color: rgba(255, 255, 255, 0.5) By using transparency for the background colors, you can avoid the hassle of replacing colors as your site themes change. I sometimes use some zebra striping on a table, particularly if it is wide. These are generic, do not apply to all cases, and are informed by a combination of experience, user testing, and opinion.
These are some baseline styles I use that I find help with readability. See the Pen Responsive Table That Also Scrolls if Necessary by Adrian Roselli ( on CodePen. Hopefully by the end of this post you will have enough information to go tackle those on your own (with accessibility notes from my post claiming it’s still ok to use tables). It’s a simple table - no spanning cells and no row headers. This is the table I will be using for this post (embedded below or available on CodePen). Controlling When the Cell Label Appears.I made an index so you can see what’s in here and jump to a specific section if you want: If you are experienced and even use other methods for responsive tables, I have tried to provide clear justification for each decision. If you are new to trying to make responsive tables, I have tried to detail each step.
#Swift responsive layout labels update#
Update (2 October 2020): All the SotB 5 videos are gone and Wayback did not save the video, but the slides are still online.
There was a nice talk about accessibility APIs and tables a couple years ago by Edd Sowden at State of the Browser 5. This approach is different from others you may have seen in that it uses a valid (and child elements) and acknowledges that screen readers no longer consider s to be tables when you start messing with their display properties. I am going to attempt to break it down to give you enough information to make your own responsive, accessible table because my example will likely not fit your case precisely (or closely?).
#Swift responsive layout labels code#
Updated April 18, 2021, originally posted Novem30 Comments Painfully slow demonstration of the example table resizing and different media queries kicking in.Īfter writing (again) that it is ok to use tables, and after providing quick examples of responsive tables, I received questions about why I used some of the code I did.
0 kommentar(er)
