Upcoming TABLE Code Changes

[Rawhide]

Basically, I created a new class to produce tables close to the old style. But then I worked out that you can stack classes, so I created several more for you to make your tables just how you like them.

The new classes are:

head	Will produce a table with a different header row colour, just like the old style. You need to use TH instead of TD for this colour, of course.
alt1	Will produce the alternating light sand colour rows on the even numbered rows, just like the old style.
alt2	Will produce alternating darker sand colour rows on the odd numbered rows, this is a new addition.
outer_border	Not actually a new class, but I did set it up to override the inside borders of these classes.

NOTE: The alternating row colours will not work on IE8 or below.


Examples (all examples follow the same format, with a TH row):

Header only
[table="width: 500, class: head"]

Spoiler

Show

111111	111111
111111	111111
111111	111111
111111	111111
111111	111111
111111	111111
111111	111111
111111	111111
111111	111111

Header with alternating row colours
[table="width: 500, class: head alt1"]

Spoiler

Show

111111	111111
111111	111111
111111	111111
111111	111111
111111	111111
111111	111111
111111	111111
111111	111111
111111	111111

Alternating row colours only
[table="width: 500, class: alt1"]

Spoiler

Show

111111	111111
111111	111111
111111	111111
111111	111111
111111	111111
111111	111111
111111	111111
111111	111111
111111	111111

Header with alternating row colours, no inside borders
[table="width: 500, class: head alt1 outer_border"]

Spoiler

Show

111111	111111
111111	111111
111111	111111
111111	111111
111111	111111
111111	111111
111111	111111
111111	111111
111111	111111

Header with both alternating row colours
[table="width: 500, class: head alt1 alt2"]

Spoiler

Show

111111	111111
111111	111111
111111	111111
111111	111111
111111	111111
111111	111111
111111	111111
111111	111111
111111	111111

Header with both alternating row colours, no inside borders
[table="width: 500, class: head alt1 outer_border"]

Spoiler

Show

111111	111111
111111	111111
111111	111111
111111	111111
111111	111111
111111	111111
111111	111111
111111	111111
111111	111111

Header with new alternate alternating row colours
[table="width: 500, class: head alt2"]

Spoiler

Show

111111	111111
111111	111111
111111	111111
111111	111111
111111	111111
111111	111111
111111	111111
111111	111111
111111	111111

Header with alternate alternating row colours, no inside borders
[table="width: 500, class: head alt2 outer_border"]

Spoiler

Show

111111	111111
111111	111111
111111	111111
111111	111111
111111	111111
111111	111111
111111	111111
111111	111111
111111	111111

[Rawhide]

Just created three more (and changed one):

grid	Changed to 1px border
thick_grid	New class with the 3px border
thick_outer_border	New class with 3px outer border and no inside borders
thick_outer_border_grid	New class with 3px outer border and 1px inside borders

Examples:

thick_grid
[table="width: 500, class: thick_grid"]

Spoiler

Show

111111	111111
111111	111111
111111	111111
111111	111111
111111	111111
111111	111111
111111	111111
111111	111111
111111	111111

thick_outer_border
[table="width: 500, class: thick_outer_border"]

Spoiler

Show

111111	111111
111111	111111
111111	111111
111111	111111
111111	111111
111111	111111
111111	111111
111111	111111
111111	111111

thick_outer_border_grid
[table="width: 500, class: thick_outer_border_grid"]

Spoiler

Show

111111	111111
111111	111111
111111	111111
111111	111111
111111	111111
111111	111111
111111	111111
111111	111111
111111	111111

Header with both alternating row colours and thick borders
[table="width: 500, class: head alt1 alt2 thick_grid"]

Spoiler

Show

111111	111111
111111	111111
111111	111111
111111	111111
111111	111111
111111	111111
111111	111111
111111	111111
111111	111111

Header with both alternating row colours and thick outer border with no inside borders
[table="width: 500, class: head alt1 alt2 thick_outer_border"]

Spoiler

Show

111111	111111
111111	111111
111111	111111
111111	111111
111111	111111
111111	111111
111111	111111
111111	111111
111111	111111

Header with both alternating row colours and thick outer border with thin inside borders
[table="width: 500, class: head alt1 alt2 thick_outer_border_grid"]

Spoiler

Show

111111	111111
111111	111111
111111	111111
111111	111111
111111	111111
111111	111111
111111	111111
111111	111111
111111	111111

[Zherog]

So with all that (undocumented?) awesome table stuff, I pondered with the idea to make a Table Primer, with the intent to cover all things that are possible with the new table code.

I was thinking of doing the same thing. Once again, procrastination has served me well. :)

[Aldurin]

Header with both alternating row colours and thick outer border with thin inside borders
[table="width: 500, class: head alt1 alt2 thick_outer_border_grid"]

Spoiler

Show

111111	111111
111111	111111
111111	111111
111111	111111
111111	111111
111111	111111
111111	111111
111111	111111
111111	111111

That's perfect for the homebrew forums, actually. I'll definitely be making use of this one for Class/PrC details.

[Prime32]

Can we get a class(es) for the Avatar Adoption thread that removes padding, and possibly sets maximum [td] width+height to 120px?
A way to remove padding would also help if anyone wants to use nested tables, e.g. to simulate vertical cell merging.

Alternatively swap the row colors, since I'm now pretty sure that the old tables went light-dark-light-dark.

[Rawhide]

Alternatively swap the row colors, since I'm now pretty sure that the old tables went light-dark-light-dark.

No, the old table rows went like this:

Dark Header

Light

White

Light

White

Light

White

Light

White

Though you are right that the coloured row was second (first after the header).

[Rawhide]

Can we get a class(es) for the Avatar Adoption thread that [...] sets maximum [td] width+height to 120px?

Not going to do this one, but you can do the width easily. Just set the width of the cells in the first row.

Sample code:

Spoiler

Show

[table="class: grid"]
[tr]
[td="width: 120"]1[/td]
[td="width: 80"]2[/td]
[td="width: 250"]3[/td]
[td]4[/td]
[td]5[/td]
[/tr]
[tr]
[td]11111 11111 11111 11111 11111 11111[/td]
[td]22222 22222 22222 22222 22222 22222[/td]
[td]33333 33333 33333 33333 33333 33333[/td]
[td]44444 44444 44444 44444 44444 44444[/td]
[td]55555 55555 55555 55555 55555 55555[/td]
[/tr]
[tr]
[td]111[/td]
[td]222[/td]
[td]333[/td]
[td]444[/td]
[td]555[/td]
[/tr]
[/table]

Example:

Spoiler

Show

1	2	3	4	5
11111 11111 11111 11111 11111 11111	22222 22222 22222 22222 22222 22222	33333 33333 33333 33333 33333 33333	44444 44444 44444 44444 44444 44444	55555 55555 55555 55555 55555 55555
111	222	333	444	555

[Vedhin]

You could always try something on the client-side. Here's a "retro" Greasemonkey script I wrote earlier; comment out whatever parts you don't want.

As I am inept at this, may I ask what "comment out" means? I want sortable tables but am fine with everything else as it is now.

[Prime32]

As I am inept at this, may I ask what "comment out" means? I want sortable tables but am fine with everything else as it is now.

Spoiler

Show

// at the start of a line makes it a comment, meaning it's not executed and doesn't do anything (the UserScript block still needs to be there despite consisting of comments, but it's just to identify the file to Greasemonkey). Add comment marks to every uncommented line in the section between the UserScript block and "Begin sorttable.js"

[Rawhide]

Yeah, uhm, no. I didn't notice that you had posted something containing javascript. It has been removed to prevent any confusion with endorsement, sorry. We will not be endorsing any such scripts due to the risk of developer abuse, or unintended bugs.

[Aedilred]

That's awesome Rawhide, thanks for updating that. The tables look better already!

Is it possible to add this new information to the start of this thread (or another thread about the table code that maybe I've missed) so that it's convenient for future reference?

Additionally (this might have been mentioned and I missed it, hence the above), is there any way to get the headers to left- (or indeed right-) align?

[Rawhide]

So, I hear that if you append "sortable" to the class list, something magical happens.

[table="width: 500, class: head alt1 alt2 thick_outer_border_grid sortable"]

111111	123456
222222	234567
333333	345678
444444	456789
555555	987654
666666	876543
777777	765432
888888	654321
999999	123321

[Seerow]

Yer a wizard rawhide

[Rawhide]

Yer a wizard rawhide

Druid, actually.

[Seerow]

Whatever floats your boat.


Fun experiment time!

111	123	321
333	345	543
222	234	432
333	345	543
111	123	321

After hitting preview: Looks like having a table header in the middle of the table causes some interesting results. It still references the top row to sort by, regardless of if it's the header or not, but the header displays the arrows.

222
333	345	321
111	123	543

After preview: looks like Colspan works beautifully with it. It sorts by the first column that it affects rather than causing any funky results like switching cells around to put them in order. Perfect.

[Prime32]

Yeah, uhm, no. I didn't notice that you had posted something containing javascript. It has been removed to prevent any confusion with endorsement, sorry. We will not be endorsing any such scripts due to the risk of developer abuse, or unintended bugs.

Is it okay to post Stylish content (i.e. CSS only), and/or post scripts on other parts of the site?

[Porthos]

Can we get a class(es) for the Avatar Adoption thread that removes padding, and possibly sets maximum [td] width+height to 120px?
A way to remove padding would also help if anyone wants to use nested tables, e.g. to simulate vertical cell merging.

Alternatively swap the row colors, since I'm now pretty sure that the old tables went light-dark-light-dark.

I haven't fully tested this yet, but I believe if you insert a blank [tr][/tr] at the beginning of your table (but AFTER a table header, if present), it will alternate the rest of the rows light/dark instead of dark/light

A couple of examples, using Rawhide's tables from above:

Header with reverse alternating row colours
[table="width: 500, class: head alt1"]

Spoiler

Show

111111	111111
111111	111111
111111	111111
111111	111111
111111	111111
111111	111111
111111	111111
111111	111111
111111	111111

Header with reverse alternating row colours, no inside borders
[table="width: 500, class: head alt1 outer_border"]

Spoiler

Show

111111	111111
111111	111111
111111	111111
111111	111111
111111	111111
111111	111111
111111	111111
111111	111111
111111	111111

This renders properly on Safari and Chrome. Haven't tested it on other browsers.

[sirpercival]

So... the only problem i see is that using alt1 and alt2 prevent you from altering the bgcolor of any specific rows or cells... any suggestions?

[Qwertystop]

So... the only problem i see is that using alt1 and alt2 prevent you from altering the bgcolor of any specific rows or cells... any suggestions?

Not sure that's a problem - the whole point is to set the bgcolor for you.

[ChristianSt]

So... the only problem i see is that using alt1 and alt2 prevent you from altering the bgcolor of any specific rows or cells... any suggestions?

You could just color all rows/cells manually, giving you the ultimate flexibility to color everything however you wish.

[Yes, using the way you want would be easier, but since I don't think that feature is that relevant, I personally wouldn't invest much time to try to fix it.]

[Jasdoif]

So... the only problem i see is that using alt1 and alt2 prevent you from altering the bgcolor of any specific rows or cells... any suggestions?

Strange, I can set cells just fine....

Spoiler

Show

A	S	i
n	T	o
E	r

Middle cell sure looks purple to me.

Maybe it's browser-specific? Using Firefox here.

[sirpercival]

Not sure that's a problem - the whole point is to set the bgcolor for you.

Unless you want for any reason to have the alt1/alt2 color scheme but keep the ability to have other cells or rows a different color, like for example I need in the Homebrew Martial Discipline Compendium...

You could just color all rows/cells manually, giving you the ultimate flexibility to color everything however you wish.

[Yes, using the way you want would be easier, but since I don't think that feature is that relevant, I personally wouldn't invest much time to try to fix it.]

I actually can't do that at all, because where I need this, I run into post character limits if I try.

Strange, I can set cells just fine....

Spoiler

Show

A	S	i
n	T	o
E	r

Middle cell sure looks purple to me.

Maybe it's browser-specific? Using Firefox here.

No, yours works. Also, if I try it here, it works, but it doesn't work in the table I care about.

Hm. I shall investigate further.

EDIT: figured it out. i am teh derp. sorry!

[Hanuman]

If the mods were to make a sticky with all the table templates in the first post it might help damage control homebrewers who are currently staring at dozens of broken tables.

Also, maybe entering 111111111's into all the entries might not intuitively illustrate which line is which.

For a post's max character count, does this ignore the breaks needed to accomplish this new table code?

[gr8artist]

How would you make a table where there were no grid lines in the header (2 rows thick) but there were grid lines in the lower rows?

		Saves				Spells Per Day
Level	BAB	Fortitude	Reflex	Will	Special	0th	1st	2nd	3rd	4th	5th	6th	7th	8th	9th
1st	+	+	+	+
2nd	+	+	+	+
3rd	+	+	+	+
4th	+	+	+	+
5th	+	+	+	+
6th	+	+	+	+
7th	+	+	+	+
8th	+	+	+	+
9th	+	+	+	+
10th	+	+	+	+
11th	+	+	+	+
12th	+	+	+	+
13th	+	+	+	+
14th	+	+	+	+
15th	+	+	+	+
16th	+	+	+	+
17th	+	+	+	+
18th	+	+	+	+
19th	+	+	+	+
20th	+	+	+	+

I want no black lines within the dark brown. How do?

[Seerow]

How would you make a table where there were no grid lines in the header (2 rows thick) but there were grid lines in the lower rows?



I want no black lines within the dark brown. How do?

Testing:

		Saves				Spells Per Day
Level	BAB	Fortitude	Reflex	Will	Special	0th	1st	2nd	3rd	4th	5th	6th	7th	8th	9th
1st	+	+	+	+
2nd	+	+	+	+
3rd	+	+	+	+
4th	+	+	+	+
5th	+	+	+	+
6th	+	+	+	+
7th	+	+	+	+
8th	+	+	+	+
9th	+	+	+	+
10th	+	+	+	+
11th	+	+	+	+
12th	+	+	+	+
13th	+	+	+	+
14th	+	+	+	+
15th	+	+	+	+
16th	+	+	+	+
17th	+	+	+	+
18th	+	+	+	+
19th	+	+	+	+
20th	+	+	+	+

Yep, looks like that works. It's a bit backwards, but what you have to do is make the table with just the outer border, then apply the grid class to the table rows where you want it.


I wonder, is there some way to get the vertical lines, but not horizontal? With the striped colors, the horizontal lines aren't as necessary, but without vertical lines the tables end up looking kind of cluttered.

[Hanuman]

What's your resolution? Mine's 1200x800 and your tables still require a scroll bar.

[Yora]

For some reason the tables I am making don't get the head bar colored brown. Any idea what I've been doing wrong?

Spoiler

Show

Class Level	Spell Points	Spells Known	Max. Spell Lvl. Known
1	3	3	1st
2	7	5	1st
3	13	7	2nd
4	19	9	2nd
5	25	11	3rd
6	33	13	3rd
7	42	15	4th
8	52	17	4th
9	63	19	(4th)
10	74	21	(4th)
11	88	23	(4th)
12	102	25	(4th)

[Rawhide]

For some reason the tables I am making don't get the head bar colored brown. Any idea what I've been doing wrong?

Spoiler

Show

Class Level	Spell Points	Spells Known	Max. Spell Lvl. Known
1	3	3	1st
2	7	5	1st
3	13	7	2nd
4	19	9	2nd
5	25	11	3rd
6	33	13	3rd
7	42	15	4th
8	52	17	4th
9	63	19	(4th)
10	74	21	(4th)
11	88	23	(4th)
12	102	25	(4th)

You need to use [th] instead of [td] for header rows.

[Yora]

I see. Thanks.

[Southern Cross]

Finally!

Spoiler: Sample Arcane Spellcasting class

Show

		Saves				Spells Per Day
Level	BAB	Fort	Ref	Will	Special	0th	1st	2nd	3rd	4th	5th	6th	7th	8th	9th
1st	+0	+0	+0	+1	Initial class features	3	1	—	—	—	—	—	—	—	—
2nd	+1	+0	+0	+3	—	4	2	—	—	—	—	—	—	—	—
3rd	+1	+1	+1	+3	—	4	2	1	—	—	—	—	—	—	—
4th	+2	+1	+1	+4	—	4	3	2	—	—	—	—	—	—	—
5th	+2	+1	+1	+4	Bonus feat	4	3	2	1	—	—	—	—	—	—
6th	+3	+2	+2	+5	—	4	3	2	2	—	—	—	—	—	—
7th	+3	+2	+2	+5	—	4	4	3	2	1	—	—	—	—	—
8th	+4	+2	+2	+6	—	4	4	3	3	2	—	—	—	—	—
9th	+4	+3	+3	+6	—	4	4	4	3	2	1	—	—	—	—
10th	+5	+3	+3	+7	Bonus feat	4	4	3	3	2	—	—	—	—	—
11th	+5	+3	+3	+7	—	4	4	4	4	3	2	1	—	—	—
12th	+6/+1	+4	+4	+8	—	4	4	4	4	3	3	2	—	—	—
13th	+6/+1	+4	+4	+8	—	4	4	4	4	4	3	2	1	—	—
14th	+7/+2	+4	+4	+9	—	4	4	4	4	4	3	3	2	—	—
15th	+7/+2	+5	+5	+9	Bonus feat	4	4	4	4	4	4	3	2	1	—
16th	+8/+3	+5	+5	+10	—	4	4	4	4	4	4	3	3	2	—
17th	+8/+3	+5	+5	+10	—	4	4	4	4	4	4	4	3	2	1
18th	+9/+4	+6	+6	+11	—	4	4	4	4	4	4	4	3	3	2
19th	+9/+4	+6	+6	+11	—	4	4	4	4	4	4	4	4	3	3
20th	+10/+5	+6	+6	+12	Bonus feat	4	4	4	4	4	4	4	4	4	4