The attached patch makes it easy to theme form elements in a simple table. I've picked two places in core to show this off, but they might not be the best and/or only places to use this. I've added it to admin/user/user/create and admin/settings/filters/add. (You'll only get a feeling for this if you have more than 3 roles.)

This patch comes from a blog post I wrote some time ago (#theme Form Elements into tables). chx and moshe both commented on the blog post, so I think that there is some interest for this. Bevan also pointed out in the blog, that css divs might be a better implementation than tables, but ... we'll see what people have to say.

Note that after you install this patch, you'll need to delete the {cache} table because it implements a new theme function.

See also #80855: Add element #type table and merge tableselect/tabledrag into it which may be either a duplicate or related.

(Also, I wasn't sure if this is part of the theme system or the forms system...)

CommentFileSizeAuthor
theme_col.patch3.58 KBdouggreen

Comments

floretan’s picture

The improvement is very obvious with long lists of checkboxes like the module selection of the coder module. However, for shorter forms like role selections with just 4 roles, the stripes on the table really make it look like there is a correspondance between items in the same row, which is not the case.

Whether this is implemented as a table or with CSS, I would remove the stripes. Otherwise, +1 for this feature.

Bevan’s picture

I don't think there are currently enough use cases in core for this UI pattern yet. It's difficult to implement effectively in generalized ocntexts, because the length of each item might be more thant 33% of the width of the container, meaning that they would wrap oddly and perhaps disorientate the user. Or perhaps not fit at all resulting in ugly overlaps.

Further, tables are not the semantic element for this, so IMO a CSS layout is necessary. A CSS layout also deals with the above issue in a more flexible way than a table can.

I agree with flubruit about the zebra stripes; It messes up the grouping; We don't want users thinking the first three items are related to each other any more than they are related to the three items on the next row.

I do think the idea makes sense in coder and possibly other places, like selecting taxonomy terms from a medium-sized vocabulary.

douggreen’s picture

Core provides some functionality that isn't really used, or used heavily in core, but is used by lots of contrib modules. I think that this is one of those use cases. Whether this table structure is used by any core modules or not, is irrelevant to me. I think that it will be used by a lot of contrib modules.

And I don't get the aversion to tables here. Do you also propose that we remove theme_table? or re-implement it in CSS? What's so horrible with tables?

chx’s picture

I am in support of this feature. As I said in the linked feature it's better to support this specialized case which is used often than trying to support the whole table thing. Converting a core form or two would be good to see how the API is used / works / etc

Bevan’s picture

Good point on the code in core that is not used by core.

I don't think theme_table should be removed. Semantically, tables should be used for tabular data like admin/content/node or the user permissions page, where everything in the same row has something in common, everything in the same column has something in common, and things in different rows and columns to not have those things in common.

The unsemantic use of tables also makes it less accessible and usable for users without mice, text readers and screen readers. Correct semantic use of tables (i.e. tables for tabular data) does not become less accessible; instead it makes it tabular data MORE accessible for users without mice, text readers and screen readers.

douggreen’s picture

Would strippng this by column, instead of strpiping it by row, help?

I'm thinking that we need some option to theme_table to control the stripping better. I can imaging three or four settings: no strips, row strip, col strip, and maybe a criss cross stripe.

Bevan’s picture

I would go for no stripes here, since they would serve no purpose; the elements in the table are not logically groupable, so stripes won't help the user understand what to do or how to read the elements. Horizontal stripes are really only useful in large tables, and only because English (and most languages) are read and aligned horizontally (rtl or ltr, as opposed to top-to-bottom), so finding the vertical separation / grouping can be difficult in large datasets with no horizontal separators (e.g. stripes).

Status: Needs review » Needs work

The last submitted patch failed testing.

lilou’s picture

Status: Needs work » Needs review
catch’s picture

Status: Needs review » Needs work

I think this needs an implementation in core before it can be reviewed properly, either that or a simpletest, or both.

Bevan’s picture

vangorra’s picture

I've created a patch that can put a form into a table. It is available here: http://drupal.org/node/528932

vangorra’s picture

Status: Needs work » Closed (fixed)

This thread is a duplicate of http://drupal.org/node/80855 (Make theme_table() renderable array compliant). Suggest one looks there for further discussion.

vangorra’s picture

Status: Closed (fixed) » Closed (duplicate)

Sorry, this should probably be flagged as a dup.

chaiwei’s picture

Status: Closed (duplicate) » Needs review
Issue tags: -Needs usability review, -Usability, -Accessibility, -UI pattern

theme_col.patch queued for re-testing.

Status: Needs review » Needs work
Issue tags: +Needs usability review, +Usability, +Accessibility, +UI pattern

The last submitted patch, theme_col.patch, failed testing.

chx’s picture

Status: Needs work » Closed (duplicate)