Forum:CSS for tables

(Cross-posted from User talk:Pryamus, see also User talk:Rigel Kent)

Hi, I'm working on a project to modernize the HTML on tables on various D2 pages such as Shiver Armor. I've made some CSS rules to achieve the same look as the tables with CSS instead of inline styles and deprecated HTML attributes. This not only makes the code more readable, it also allows new tricky, like sorting the tables without jumbling the row shading, letting admins edit the style for all tables sitewide at once, showing different styles in Wikia and Monobook skins, etc.

As a test, I used the new CSS on the oskill article, which features a sortable table.

For another test case on how the CSS will affect existing articles, I made a draft at User:Rigel Kent/Shiver Armor (diff).

I'd like to make the CSS sitewide, but I need an admin to do so. If you like how it works, please add the contents of User:Rigel Kent/wikia.css to MediaWiki:Wikia.css, and User:Rigel Kent/monobook.css to MediaWiki:Monobook.css (also fixes a text contrast problem in Monobook). I didn't mess with the mobile skin, since tables are currently unstyled in the mobile skin. Rigel Kent (talk) 01:54, September 8, 2015 (UTC)

◄► Tephra ◄► 13:09, September 9, 2015 (UTC)
 * They've been added. Would like to see how they are working for a little while, and hopefully get some feedback before you start swapping this table class in everywhere though.


 * Thanks! I found a bug, though, and I'm kicking myself for not testing more thoroughly. There's a quirk in how  tables are rendered, and I wrote the CSS around that quirk. So the table in oskill displays correctly, but non-  tables would have the row shading reversed. The new rules in User:Rigel Kent/wikia.css (diff) and User:Rigel Kent/monobook.css (diff) should fix this. Rigel Kent (talk) 04:41, September 10, 2015 (UTC)

◄► Tephra ◄► 07:22, September 10, 2015 (UTC)
 * Updated.


 * Thanks again. The row shading appears to be fixed, so I copied my userspace draft back to Shiver Armor to check the formatting on existing pages. The table renders slightly smaller now than how it looked before but otherwise looks okay. Rigel Kent (talk) 09:19, September 10, 2015 (UTC)


 * Oh yeah, almost forgot the other skins. In Monobook, the color scheme now is different from the color scheme before but I think it's an improvement. In the mobile skin, nothing changed (before) (after). Rigel Kent (talk) 09:31, September 10, 2015 (UTC)


 * OK, figured out the size difference. I'd deleted a mysterious blank cell at the top of each table, assuming it was a typo. But on second glance, it looks like the blank cell was an intentional hack to simulate a top margin &mdash; without it, the table squeezes too close to the text above.


 * So I edited my user CSS (Wikia, Monobook) to add an equal size real margin, and corrected a mistake I made on cell padding. The new tables now appear exactly the same in my browser, just a 1-pixel rounding error wiggle, depending on window size. Sorry about editing the CSS so many times, but if it's looking good across multiple browsers, it should be good to go. Rigel Kent (talk) 11:27, September 10, 2015 (UTC)

◄► Tephra ◄► 14:53, September 10, 2015 (UTC)
 * Updated.

Next steps
OK, there's been 24 hours for caches to clear and everything still looks good, at least in my browser.

I chose Shiver Armor as the guinea pig because of its unpopularity &mdash; less chance of disruption if something went wrong. Now that things appear stable, I'd like to expand the change to 10 (about 5%) of the most popular D2 skill pages, such as Meteor and Blessed Hammer, to get more views and more chances for user feedback. Then after a week or so, we can check if all is still well and nobody's reporting problems, before making the change to all 210 skill pages. Rigel Kent (talk) 00:26, September 12, 2015 (UTC)
 * Oh wait, Chilling Armor is the unpopular one. Eh, whatever. Rigel Kent (talk) 02:22, September 12, 2015 (UTC)

I've found the styles do not display properly in tables containing a  element (  in wikicode). So I recommend not using the  class on any tables containing a   for now. This will probably be fixable with a CSS only change, I'll work on it tonight. Rigel Kent (talk) 07:43, September 18, 2015 (UTC)

Huh, didn't think it would be that easy. When an admin gets a chance, please edit both MediaWiki:Wikia.css and MediaWiki:Monobook.css to find: .dwtable tbody:first-child tr:nth-child(odd) td, /* If no thead, shade cells in 1-based odd-numbered rows */ .dwtable thead + tbody tr:nth-child(even) td {  /* A thead row, if present, isn't counted, so even rows */

And insert a new line between those two, so it reads:

.dwtable tbody:first-child tr:nth-child(odd) td, /* If no thead, shade cells in 1-based odd-numbered rows */ .dwtable caption + tbody tr:nth-child(odd) td, .dwtable thead + tbody tr:nth-child(even) td {  /* A thead row, if present, isn't counted, so even rows */

The CSS will then acknowledge table rows following a caption. Rigel Kent (talk) 07:59, September 18, 2015 (UTC)

◄► Tephra ◄► 13:34, September 18, 2015 (UTC)
 * Updated.

D2 skill articles done, minor issues
Done! That wasn't so bad. I did come across two minor issues, though.

First, the paladin skill pages had some style differences from the other six classes' skill pages. They used #20100a instead of #2F0600 for the row shading, and didn't bold the headers in the left column. I ignored these differences and went with the styles from the other six classes, but if the old paladin style is preferred I'll be happy to write up the CSS for it.

Second, it wasn't clear how much vertical margin the tables were intended to have. There was a  between most pairs of tables, so I put a margin in between. But there were also empty rows added to the tops or bottoms of the tables in an apparently unsuccessful attempt to simulate margins. If the tables would look better with top and bottom margins, again, I'll be happy to write up the CSS for it. Rigel Kent (talk) 07:20, September 21, 2015 (UTC)

D1 monster stat tables
All right, moving on. Next I'm going to tackle D1 monster stat tables. See Succubus for the old layout, see User:Rigel Kent/Succubus for the new. I dropped the black borders around the headers &mdash; they're not visible if you're using Wikia/Oasis skin, they just look like extra padding &mdash; is that okay? Rigel Kent (talk) 22:05, September 22, 2015 (UTC)

◄► Tephra ◄► 20:20, September 23, 2015 (UTC)
 * Wikis are built by a community and editable by everyone. So you don't really have to question aesthetics, just make the decision yourself and if nobody complains, you must have made the right one.