Photograph of two overlapping semi-transparent leaves against a blue-green background
Part of the CSS Reading List

Forms and tables are some of the most information-dense sources of site content, making their clarity and accessibility of paramount importance to users and developers. Unfortunately, the complexity of tables and forms can also make them extremely difficult to style and present well, especially when modern is taken into account.

This reading list introduces techniques, code and best practices for styling different kinds of forms and tables, often presented as “recipes” for your use. Like most of the entries in the reading list series, this resource is not exhaustive, and will be added to over time.

Goals: style and present an HTML table and complex form in ways that enhance both their legibility and utility.

Prerequisites: Tables and Forms reading lists

Tables

  1. Zebra-Striped Table
  2. Dynamic Customized Table
  3. Design Patterns
  4. Elegant OpenType Tables
  5. “Data Grid” Tables
  6. Scrolling Fade-In Table

Forms

  1. Basic Form Layout
  2. Custom HTML5 Form Errors With CSS
  3. Custom Form Errors From title

While responsive design is obviously a large factor when designing tables and forms, I’ve found it easier to address it as a seperate issue.

Photograph by Shihya Kowatari.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.