User:Omegatron/Striped tables

From Wikipedia, the free encyclopedia

You have new messages (last change).

There's no easy solution for rows of alternating color, but they enhance readability quite a bit for large tables.

...After researching this and writing it up, I'm not sure how many legitimate uses it has here. But at least I learned something.  :-)

Contents

[edit] Solutions

[edit] CSS3

The best solution, but doesn't exist yet. But it will solve the problem in two lines of code when it comes out. not out man!

[edit] Mediawiki feature

The second best solution would be for Mediawiki to assign a class to each row dynamically when generating the page. The first row (not a header) will get class="odd", the second class="even", the third class="odd", etc. Then set styles like so:

table tr.odd { background-color: lightblue; }
table tr.even { background-color: lightgreen; }

Try it with the test styles bookmarklet. (Drag bookmarklet to your toolbar, click the bookmarklet while this page is open, copy and paste the CSS into the new window, view the example tables.)

[edit] Javascript

Probably the third best solution. Won't work for people who don't use javascript, of course. Might slow down page rendering for pages with large tables?

[edit] Kludgy CSS

Probably the fourth best option. Try it with the test styles bookmarklet.

table.alternating tr+tr+tr, 
table.alternating tr+tr+tr+tr+tr, 
table.alternating tr+tr+tr+tr+tr+tr+tr,
table.alternating tr+tr+tr+tr+tr+tr+tr+tr+tr,
table.alternating tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr,
table.alternating tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr {
    background-color: silver;
}

table.alternating tr+tr, 
table.alternating tr+tr+tr+tr, 
table.alternating tr+tr+tr+tr+tr+tr,
table.alternating tr+tr+tr+tr+tr+tr+tr+tr,
table.alternating tr+tr+tr+tr+tr+tr+tr+tr+tr+tr,
table.alternating tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr,
table.alternating tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr {
    background-color: lightgrey;
}

To be robust for very large tables, we'd need a few hundred lines of stylesheet just for this, though.

[edit] Manual HTML coding

No. Very difficult to edit, maintain, write, read, etc.

[edit] Examples

[edit] Wikitable

× 1 2 3 4 5 6 7 8 9 10 11 12
1 1 2 3 4 5 6 7 8 9 10 11 12
2 2 4 6 8 10 12 14 16 18 20 22 24
3 3 6 9 12 15 18 21 24 27 30 33 36
4 4 8 12 16 20 24 28 32 36 40 44 48
5 5 10 15 20 25 30 35 40 45 50 55 60
6 6 12 18 24 30 36 42 48 54 60 66 72
7 7 14 21 28 35 42 49 56 63 70 77 84
8 8 16 24 32 40 48 56 64 72 80 88 96
9 9 18 27 36 45 54 63 72 81 90 99 108
10 10 20 30 40 50 60 70 80 90 100 110 120
11 11 22 33 44 55 66 77 88 99 110 121 132
12 12 24 36 48 60 72 84 96 108 120 132 144

[edit] Wikitable with "alternating" class

× 1 2 3 4 5 6 7 8 9 10 11 12
1 1 2 3 4 5 6 7 8 9 10 11 12
2 2 4 6 8 10 12 14 16 18 20 22 24
3 3 6 9 12 15 18 21 24 27 30 33 36
4 4 8 12 16 20 24 28 32 36 40 44 48
5 5 10 15 20 25 30 35 40 45 50 55 60
6 6 12 18 24 30 36 42 48 54 60 66 72
7 7 14 21 28 35 42 49 56 63 70 77 84
8 8 16 24 32 40 48 56 64 72 80 88 96
9 9 18 27 36 45 54 63 72 81 90 99 108
10 10 20 30 40 50 60 70 80 90 100 110 120
11 11 22 33 44 55 66 77 88 99 110 121 132
12 12 24 36 48 60 72 84 96 108 120 132 144

[edit] Wikitable with "odd" and "even" classes

× 1 2 3 4 5 6 7 8 9 10 11 12
1 1 2 3 4 5 6 7 8 9 10 11 12
2 2 4 6 8 10 12 14 16 18 20 22 24
3 3 6 9 12 15 18 21 24 27 30 33 36
4 4 8 12 16 20 24 28 32 36 40 44 48
5 5 10 15 20 25 30 35 40 45 50 55 60
6 6 12 18 24 30 36 42 48 54 60 66 72
7 7 14 21 28 35 42 49 56 63 70 77 84
8 8 16 24 32 40 48 56 64 72 80 88 96
9 9 18 27 36 45 54 63 72 81 90 99 108
10 10 20 30 40 50 60 70 80 90 100 110 120
11 11 22 33 44 55 66 77 88 99 110 121 132
12 12 24 36 48 60 72 84 96 108 120 132 144

[edit] Plain table

× 1 2 3 4 5 6 7 8 9 10 11 12
1 1 2 3 4 5 6 7 8 9 10 11 12
2 2 4 6 8 10 12 14 16 18 20 22 24
3 3 6 9 12 15 18 21 24 27 30 33 36
4 4 8 12 16 20 24 28 32 36 40 44 48
5 5 10 15 20 25 30 35 40 45 50 55 60
6 6 12 18 24 30 36 42 48 54 60 66 72
7 7 14 21 28 35 42 49 56 63 70 77 84
8 8 16 24 32 40 48 56 64 72 80 88 96
9 9 18 27 36 45 54 63 72 81 90 99 108
10 10 20 30 40 50 60 70 80 90 100 110 120
11 11 22 33 44 55 66 77 88 99 110 121 132
12 12 24 36 48 60 72 84 96 108 120 132 144

[edit] Plain table with "alternating" class

× 1 2 3 4 5 6 7 8 9 10 11 12
1 1 2 3 4 5 6 7 8 9 10 11 12
2 2 4 6 8 10 12 14 16 18 20 22 24
3 3 6 9 12 15 18 21 24 27 30 33 36
4 4 8 12 16 20 24 28 32 36 40 44 48
5 5 10 15 20 25 30 35 40 45 50 55 60
6 6 12 18 24 30 36 42 48 54 60 66 72
7 7 14 21 28 35 42 49 56 63 70 77 84
8 8 16 24 32 40 48 56 64 72 80 88 96
9 9 18 27 36 45 54 63 72 81 90 99 108
10 10 20 30 40 50 60 70 80 90 100 110 120
11 11 22 33 44 55 66 77 88 99 110 121 132
12 12 24 36 48 60 72 84 96 108 120 132 144

[edit] Plain table with "odd" and "even" classes

× 1 2 3 4 5 6 7 8 9 10 11 12
1 1 2 3 4 5 6 7 8 9 10 11 12
2 2 4 6 8 10 12 14 16 18 20 22 24
3 3 6 9 12 15 18 21 24 27 30 33 36
4 4 8 12 16 20 24 28 32 36 40 44 48
5 5 10 15 20 25 30 35 40 45 50 55 60
6 6 12 18 24 30 36 42 48 54 60 66 72
7 7 14 21 28 35 42 49 56 63 70 77 84
8 8 16 24 32 40 48 56 64 72 80 88 96
9 9 18 27 36 45 54 63 72 81 90 99 108
10 10 20 30 40 50 60 70 80 90 100 110 120
11 11 22 33 44 55 66 77 88 99 110 121 132
12 12 24 36 48 60 72 84 96 108 120 132 144
Retrieved from "http://en.wikipedia.org../../../o/m/e/User%7EOmegatron_Striped_tables_efe4.html"