Control table styles

[Wanderer]

Currently, the common format for control tables is to make the control cells center-aligned and the description cells left-aligned. I'm wondering, what should be the preferred way to go about this? There are two methods of applying such formatting:

1. Set all the control cells as header cells (TH elements) instead of regular cells (TD elements). (Example) This is the method used on StrategyWiki:Guide/Organization. I personally don't recommend this, as it would seem to go against the common web design principle of separating content from presentation.
2. Set the "|text center=1" option on {{prettytable}}, then set an "align='left'|" or "style='text-align: left'|" option on all the description cells. (Example) This is how I usually do it. It's a bit more complex, but it keeps presentational attributes separate from content.

I wonder if the best solution might be to add new classes to the CSS files; one for control cells, one for description cells. That way they could all be styled in a standardized way without adding style rules manually (although the class attributes would still need to be added to each cell).

What do you think? Which is the preferred method and why?

[prod]

I agree with your reasons for (2), but far prefer (1) for its simplicity. However, a rationalization is that we are classifying the actual controls as headers and the rest as regular data.

[Garrett]

Bumped at Prod's request.

Further discussion here.

[Sigma7]

Contacted MediaWiki support.

http://www.mediawiki.org/wiki/Project:S ... to_columns (diff: http://www.mediawiki.org/w/index.php?ti ... did=301723)

Ugh, support for formatting has been discontinued.

[Wanderer]

At the meeting, a couple of people were talking about wanting different background colors for the different cells. One way we could do this is with CSS classes. We could use {{controlstable}} to add the class attribute "controls" (or something similar) to the table element, and we use {{L}} (or a new template?) to add the class attribute "controldescription" (or something else, these class names can be changed). Then we add some style rules like these to the style sheet:

Code: Select all

/* for the header cells */
table.controls th { font-weight: bold; text-align: center; background-color: ??? }

/* for the control cells */
table.controls td { font-weight: bold; text-align: center; background-color: ??? }

/* for the description cells */
table.controls td.controldescription { font-weight: normal; text-align: left; background-color: ??? }

Any other style rules we want can just be added to that. And this wouldn't change how the templates are used. Plus, this way we could add or change any of the style rules later if we wanted to.

[prod]

I've set this up on Final Fantasy XIII/Controls. Comments?

[Wanderer]

Well, you've got the basic idea, but I figured we should use a separate template instead of {{prettytable}} with a parameter so it'd be easier to type. I also used a one-letter template name for the descriptions to make it as simple as possible to type. But otherwise, once you add the style rules to the style sheet it should be good to go.

[prod]

It's still mostly like a prettytable, just a specific case of it. No need to define a completely new style, especially if new skins are set up.

Initially I was thinking a single character template would be good, but this way at least it's more explicit what exactly it's for without having to go to the template documentation, especially for new users.

The rules are already in the common.css so you should just need to clear your cache and it should be updated. Are there any further changes necessary?

[Wanderer]

Admittedly fair points. Still, the main problem I'm having selling Najzere on this thing is the issue of simplicity and ease of use for the user, so I think reducing the amount of necessary typing as much as possible would be the best way to address that.

And I tried clearing my cache, but the description cells in your example are appearing centered for me for some reason. I'm not sure why.

EDIT: It looks like changing the selector for the description cells from ".table-desc" to "table.controltable td.table-desc" seems to make it work.

[prod]

Fixed

[Wanderer]

OK, looks like it works now.

Hey, what if we turned my templates into "aliases" or "shortcuts" to yours, so people could have the option of using the shorter syntax to get the same results?

[prod]

What were they called? My preference is to keep only one obvious way of doing things. By having multiple methods/markup for doing the same thing it just increases complexity and it might confuse new editors looking at examples.

[Wanderer]

They were called {{Controlstable}} and {{L}}.

[prod]

I'm not against using controlstable, as it make it easier to track usage through the MW software itself. However, I prefer {{desc}} to {{l}} since it's much more descriptive and not much more trouble (it will be copy pasted anywayz).

[Garrett]

Prod's example looks fine. :) Opening the table with a custom template makes sense too, but the table open should be integrated as with {{Achievements Header}}.