Data tables like to break our carefully crafted responsive websites. On smaller screens they mess with us when they won’t reflow nicely. They a bit claustrophobic when they don’t have enough space. Stephanie will talk about what makes a table easy to read, show the code that helps, and offer design suggestions for how to display data when there isn’t a lot of space.
11. • When to use tables
• Creating structure with HTML
• Designing tables
• Adding style with CSS
• Adapting tables to small screens
• Case Study: MDN compatibility tables
( °□°) ━
21. When not to use tables
/* Nicole Sullivan’s Media Object */
<div class="media">
<div class="img">
<img src="" alt="" />
</div>
<div class="body">
Henrick Sedin
etc.
</div>
</div>
88. • When to use tables
• Creating structure with HTML
• Designing tables
• Adding style with CSS
• Adapting tables to small screens
• Case Study: MDN compatibility tables
( °□°) ━
89.
90. I Like to Make Websites
Everyone Can Use
@stephaniehobson
stephaniehobson.ca