User:Omegatron/Striped tables

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.  :-)

Solutions

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!

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.)

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?

• http://bitesizestandards.com/bites/automatic-coloured-rows
• http://www.surfmind.com/musings/2003/09/15/

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.

Manual HTML coding

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

Examples

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

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

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

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

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

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