How do I render a form as a table?

Question

The default form layout has each form element wrapped in individual div tags, with a label, and input inside. I would like to lay things out neatly, and create a column for the field labels, and another column for the input areas.

I can see this being accomplished in one of two ways: - I could create a table, using table elements or divs, and separate the labels from the inputs. Would I use Twig for this? - Alternatively, maybe there's a creative way to use CSS with the default structure to make everything look good. If there is, I can't figure it out.

How should I implement one of these, or another way to accomplish the same thing?

Answer 1

I had forgotten about the table-cell and table-row diplay properties. Despite the fact that CSS is off topic, the way to do it given Drupal's form class structure is:

.form-no-label { display: table-cell; } label { display: table-cell; } .container-inline { display: table-cell; } .label { display: table-cell; } .form-item { display: table-row; }

Answer 2

First of all, laying out forms in tables is frowned upon in modern web design, and you should be able to achieve the same effect with CSS. Taking this approach results forms that are better structured for mobile devices and for accessibility requirements such as screen readers. This isn't really a Drupal issue as a general CSS theming one.

A useful module for theming your forms is Form Element Layout, which lets you tweak a number of form aspects, particularly giving separate classes to input fields and their labels: https://www.drupal.org/project/fel (edit: unfortunately this hasn't yet been ported to Drupal 8, so you're probably stuck with the classes you've got, or will have to write your own theming function to add extra classes).

However, if you feel you must use tables, have a look at the #type=table render element (new in Drupal 8). You put the rows of your table as array elements of the table array, and the columns as elements of the row arrays. In your case you would have one row for each form field, and two columns in each row, one for the label and one for the field.