Forum:Table styling

I've been trying to figure how to make a style for a table that would only have you need to type it once, just like when you type class=wikitable and it sets an entire "layout" for a table. It seems I need to edit the css of the wiki or something like that, and I've been searching for how to do it since yesterday, but all I find is always how to make a table in css, or how to make tables in html, and when I try to search for uses in wiki, I find how to make tables on wiki markup... I also tried to find the base coding that other wikis that have this use, but I couldn't find it, so, I'm afraid I'll have to come to this: How do I do it? I simply have no clue at all. I thought about just making a template that would set the beginning and end, and you'd just type the basics of the table, but you'd still need to type the colors on all rows, so it wouldn't be so practical.

Here's what I want the table to look like: table example

The wiki already haves similar ones on some templates such as the one found here: template table

PS: I didn't really mind to make an optimal coding in there, just made something to show how it looks like.

So, how do I make a style like this to use in the entire wiki? Or, if that's possible (I don't think so, but asking doesn't hurt, right?), how do I set a table configuration using only a template (like setting a heading color, then even and odd colors, so that you only need to make the table normally in middle of the template)?

Yechnagoth 13:00, December 26, 2011 (UTC)


 * For the entire table, apply something similar to this with css:


 * For the heading:


 * For the subheadings:


 * And for the content sections:


 * Then you would add something similar to this to the template:

--
 * You can change the width for the template by simply using  and feel free to change all of the generic css names I used above.

And kinda random question, but what's the difference between and (since you've changed one for another)? Yechnagoth 16:29, December 26, 2011 (UTC)
 * Thanks, but that does just what I could do with a template, though in a much simpler way.(still needs to entry class in every row to change the colors). What I mean is something that only needs you to entry a single class value that will do the table for you (just like class=wikitable does). I'm sorry, I should have given an example of one that does that to explain it better. Here it is: example. I tried to find how they did it, but wasn't able to. That example of mine was just to show how it would look.


 * WoWWiki used a combination of css and js to produce that table. Unfortunately, I do not understand js very clearly, and I may not be able to help you with this. Sorry. As for your other question, there really is no difference between and  . They both perform the same action, but   is what I learned to use, and in my opinion, it looks a little more complete than   . --


 * Oh, for me I think  is easier to type and looks better on the middle of the code :P. Well, thanks anyways! I might end using just css with short class names/a mix of css and a template, at least its better than making it all manually. Yechnagoth 17:36, December 26, 2011 (UTC)

The difference between and is that the latter is compliant with XHTML standards which, in an overly simplified explanation, means it's more versatile and should be used.

The WoWWiki tables, if you ignore the tooltips, are styled through the use of the class "darktable", which is just basic CSS. Instead of using new CSS classes to define headings/rows/cells, like in Dser's example, WoWWiki just defines child elements of that one class ( - for rows,   - for cells etc.). It all can be done through defining the class in just one place, although overly complex tables might be difficult to style that way. — Sovq 20:07, December 26, 2011 (UTC)

EDIT: You might find this tutorial useful, especially the part about selectors. — Sovq 20:10, December 26, 2011 (UTC)


 * That's the site I usually look first when searching for css guides :P. I'm giving a better look on the tables section, and I understand it better now, specially after Dser's example.(Wakfu wiki has pratically no css set, so I kinda don't understand how it works when applied to wiki.css very well, I've basically only used it in boxes till now). But it seems css really can't do alternating rows automatically. I've found a tutorial that seems to be simple enough though, I'll test it and see if it works.

The css ended like this: Yechnagoth 20:54, December 26, 2011 (UTC)


 * The linked tutorial is somewhat outdated. To style alternating rows, you might want to use the nth-child selector. That way you don't need to create a separate class to do that. See a working example here (odd rows are dark-red if you take a close look). — Sovq 21:37, December 26, 2011 (UTC)


 * I'm going to try it. I saw the list with those selectors, but I didn't figure how I'd be able to use any of them for that. Thanks again. Yechnagoth 21:52, December 26, 2011 (UTC)


 * Nevermind, found my mistake. td having no color makes it work (though it will be the same color as background then). Yechnagoth 22:31, December 26, 2011 (UTC)
 * Update: Made another nth-child for even, its working perfectly now. Thanks a lot for all the help! Yechnagoth 22:49, December 26, 2011 (UTC)

needs to be changed to  otherwise the tr after the, affects all table rows and not those in the table with the class 'wakfutable'. Of course, that was probably changed when you updated it to use nth-child. Keep in mind, nth-child doesn't work with versions of IE before version 9, Safari before version 3.1, FF before version 3.5 and Opera before version 9.5 as it's a CSS3 selector. Rappy 07:28, December 27, 2011 (UTC)