More actions
| Line 234: | Line 234: | ||
| valign="top" | <br>For more HTML-codes, see this site:<br>[http://www.ascii.cl/htmlcodes.htm HTML Codes - Table of ascii characters and symbols] | | valign="top" | <br>For more HTML-codes, see this site:<br>[http://www.ascii.cl/htmlcodes.htm HTML Codes - Table of ascii characters and symbols] | ||
|} | |} | ||
= CSS table-magic = | |||
Sometimes you just want some more granular control over formatting in you table, be that row-wise or column-wise. A wonderful and might I add neat trick is to use {{co|violet|nth-child()}} or {{co|violet|nth-last-child()}} to select which columns (or other element) should be affected by a specific format through the parameter variable. | |||
The parameter can allow you to do simple identifications like {{co|slateblue|(1)}} for '''first''', {{co|slateblue|(odd)}} for '''first, third, fifth etc''' or more grouped selections like {{co|slateblue|(-n+2)}} for '''first two columns''' etc. Then {{co|violet|nth-last-child()}} reverses it and {{co|slateblue|(1)}} turns to '''last''' and {{co|slateblue|(-n+2)}} to '''last two right-most columns''' for example. | |||
Add the following CSS-snippet to the page/section before the actual table: | |||
<pre> | |||
{{#css: | |||
tr td:nth-child(-n+2) { text-align: left; } | |||
}} | |||
</pre> | |||
Then continue with the actual table: | |||
<pre> | |||
{| class="wikitable" style="text-align: center;" | |||
! Column 1 | |||
! Column 2 | |||
! Column 3 | |||
! Column 4 | |||
|- | |||
| Foo | |||
| Bar | |||
| 1 | |||
| 2 | |||
|} | |||
</pre> | |||
That will allow you to make a simple and clean table, that's easy for people to edit and read, without cluttering it up with various styles on a cell by cell basis when all you want to do is have a table mostly aligned one way but specifically tailor a few columns in a different way. | |||
This is how it ends up, affected rows highlighted in {{co|slateblue|blue}}: | |||
{{#css: | |||
tr td:nth-child(-n+2) { text-align: left; } | |||
}} | |||
{| class="wikitable" style="text-align: center;" | |||
! Column 1 | |||
! Column 2 | |||
! Column 3 | |||
! Column 4 | |||
|- | |||
| {{co|slateblue|Foo}} | |||
| {{co|slateblue|Bar}} | |||
| 1 | |||
| 2 | |||
|} | |||
This is of course not limited to columns, but can also easily be used to alternate background colours for rows etc. For more examples of how you can use the selector part, see [https://css-tricks.com/almanac/selectors/n/nth-child/ :nth-child selector] | |||
= Colours = | = Colours = | ||