Remove tables from donation form HTML layout

The layout of the donation form uses HTML tables to achieve the layout. Tables are no longer commonly used, and forces a two column layout of labels and input boxes. For a more responsive and better, more modern user experience that is more flexible in its' customization, I recommend that the HTML tables are removed and replaced with div's, label's, and CSS for formatting.

  • Allen Roth
  • May 1 2020
  • Reviewed: Voting Open
BBIS / Donations
  • Attach files
  • Chris Kastner commented
    August 11, 2020 06:53

    You can do a fair bit with the table/tbody/tr/td elements using CSS - changing their display to 'block' or using flex display can get a responsive layout without too much effort. This stops them from behaving like tables and you can treat them like regular DIV elements.

    Attachments Open full size
  • Mihal Ehven commented
    May 04, 2020 12:59

    Completely agree. We just spent $4,000 to a consultant to restyle our forms to be somewhat responsive. If they were no longer table based, we could achieve better usability.

    Attachments Open full size

Related ideas