Web Developer Reading List: CSS For Forms and Tables

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 mobile design 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. Design Patterns For Tables

Forms

1. Custom HTML5 Form Errors With CSS

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, once the basics have been covered… so you can expect a reading list on that very soon.

Photograph by Shihya Kowatari.