[table]s in the Playground - All you want to know about the [table] code

[table]s in the Playground
All you want to know about the [table] code

This thread wants to give a complete and exhaustive overview of the [table] code. Most of the information presented here first cropped up in the "Upcoming TABLE Code Changes"-thread located here. If you want to get more insight into the table code it might be another useful resource (especially after post #134/Page 5, because this was the date the new code went online). I hope I covered all the useful stuff here, but I can't guarantee that I haven't missed some detail.

Special thanks for Rawhide and whomever else that was involved in the board upgrade and helped in improving the new table code. Also many thanks to all forumites tinkering with the table code to see what is possible with it (and what not).

If you happen to find some things not described in the OP (e.g. a missing attribute), please say something about it. I will also present any useful table templates and other useful stuff related to the working of the table code, so if you have examples of useful table template you want to share post them, and I will include them in the OP. Feel free to add your opinion on how this is presented/organized or what is missing.

Some of the behavior/look of tables might also be dependent on which browser you use. If you show anything inconsistent with any description, please note this, so I can add information that it gets rendered different with other browser.

Table of Contents:

• The Basics
• Available Table Classes
• Other Options
• Special Grid Patterns
• Observed Problems
• Overview of Attributes
• Conversion Guideline
• Examples/Templates

---

The Basics

The "default" table you get with hitting the table button in the editor and not changing anything is this:

Quote:

---

[table="width: 500"]
[tr]

[td][/td]
[td][/td]

[/tr]
[tr]
[tr]

[td][/td]
[td][/td]

[/tr]
[tr]

[td][/td]
[td][/td]

[/tr]
[/table]

---

This will create an empty table with 2 columns and 3 three rows. It has no borders and a width of 500px.
The basic working of the table code is that there are tags to open the different elements the table consists.
These are:

• [table] starts the table.
• [tr] starts a table row.
• [td] starts a table cell.
  NOTE: Each row should feature the same (non-zero) amount of table cells, otherwise the result will be bad HTML and feature unexpected results.
• [th] starts a table header cell. Basically a table cell with special formatting.
  They are optional, so if you don't want header cells, you don't need them.
  NOTE: While it is technical possibly to use [th] instead of any [td] in the table, Rawhide strongly advises to use them only in the first row of cells! Otherwise the result will be bad HTML, which can produce unexpected results.
  If you still want table cells that look like header cells, you should style them accordingly, to look like header cells. Without "head" header cells are only bold and center aligned. With "class:head" you can use [td="bgcolor:#8E5A2E, align:center"][color=#FFFFFF][b]<cell content>[/b][/color][/td] instead of [th]<cell content>[/th]

All these tags must closed correctly (basically before you start the next one of the same type or the tag enclosing it), with the corresponding [/table], [/tr], [/td] or [/th].
Each tag can have optional attributes in the form of [tag="attribute:value"]. Multiple attributes can be supplied using commas: [tag="attribute1:value, attribute2:value"]. Some attributes (most notable class) allow for multiple values, separated by " ", i.e. [tag="attribute:value1 value2"]. At the end of this post there is a list containing all available attributes and their possible values and a really short synopsis what they do. All of the available options will be presented in the following.

If you want a new column or cell, you can add just a new [td]...[/td] accordingly between/after existing [td]...[/td] tags. So if you want a complete new column at the right side of the table, you would need a new [td]...[/td] before each row closes (so before each [/tr]).
If you want a new row, you need to add new [tr]...[/tr] accordingly between/after existing [tr]...[/tr] tags. The easiest way is most likely just to copy an existing row. So if you want a complete row at the end of the table, you would need a new [tr]...[/tr] before the [/table]). When inserting rows, be sure to insert the proper amount of table cells in each row.

---

Available Table Classes

First comes an overview of the available table classes, usable with [table="class:<class>"]. Table classes can be combined by using [table="class:<class1> <class2>"].

The following tables all feature the same table structure, and thus basically the same underlying code.
The only difference is the content of the opening [table]-tag, which is shown above each table:

Quote:

---

[table]
[tr]

[th]Header 1[/th]
[th]Header 2[/th]

[/tr]
[tr]

[td]Cell 1[/td]
[td]Cell 2[/td]

[/tr]
[tr]

[td]Cell 3[/td]
[td]Cell 4[/td]

[/tr]
[tr]

[td]Cell 5[/td]
[td]Cell 6[/td]

[/tr]
[tr]

[td]Cell 7[/td]
[td]Cell 8[/td]

[/tr]
[/table]

---

table	table="class:grid"	table="class:outer_border"	table="width:250"
Header 1 Header 2 Cell 1 Cell 2 Cell 3 Cell 4 Cell 5 Cell 6 Cell 7 Cell 8	Header 1 Header 2 Cell 1 Cell 2 Cell 3 Cell 4 Cell 5 Cell 6 Cell 7 Cell 8	Header 1 Header 2 Cell 1 Cell 2 Cell 3 Cell 4 Cell 5 Cell 6 Cell 7 Cell 8	Header 1 Header 2 Cell 1 Cell 2 Cell 3 Cell 4 Cell 5 Cell 6 Cell 7 Cell 8
table="class:head"	table="class:thick_grid"	table="class:thick_outer_border"	table="class:thick_outer_border_grid"
Header 1 Header 2 Cell 1 Cell 2 Cell 3 Cell 4 Cell 5 Cell 6 Cell 7 Cell 8	Header 1 Header 2 Cell 1 Cell 2 Cell 3 Cell 4 Cell 5 Cell 6 Cell 7 Cell 8	Header 1 Header 2 Cell 1 Cell 2 Cell 3 Cell 4 Cell 5 Cell 6 Cell 7 Cell 8	Header 1 Header 2 Cell 1 Cell 2 Cell 3 Cell 4 Cell 5 Cell 6 Cell 7 Cell 8
table="class:alt1"	table="class:alt2"	table="class:alt1 alt2"	table="class:sortable, width:250"
Header 1 Header 2 Cell 1 Cell 2 Cell 3 Cell 4 Cell 5 Cell 6 Cell 7 Cell 8	Header 1 Header 2 Cell 1 Cell 2 Cell 3 Cell 4 Cell 5 Cell 6 Cell 7 Cell 8	Header 1 Header 2 Cell 1 Cell 2 Cell 3 Cell 4 Cell 5 Cell 6 Cell 7 Cell 8	Header 1 Header 2 Cell 1 Cell 2 Cell 3 Cell 4 Cell 5 Cell 6 Cell 7 Cell 8
table="class:head alt1"	table="class:head alt2"	table="class:head alt1 alt2"	table="class:head sortable, width:250"
Header 1 Header 2 Cell 1 Cell 2 Cell 3 Cell 4 Cell 5 Cell 6 Cell 7 Cell 8	Header 1 Header 2 Cell 1 Cell 2 Cell 3 Cell 4 Cell 5 Cell 6 Cell 7 Cell 8	Header 1 Header 2 Cell 1 Cell 2 Cell 3 Cell 4 Cell 5 Cell 6 Cell 7 Cell 8	Header 1 Header 2 Cell 1 Cell 2 Cell 3 Cell 4 Cell 5 Cell 6 Cell 7 Cell 8
table="class:alt1 alt2 thick_outer_border"	table="class:head alt1 outer_border"	table="class:head alt2 thick_grid"	table="class:head alt alt2 sortable thick_outer_border_grid, width:250"
Header 1 Header 2 Cell 1 Cell 2 Cell 3 Cell 4 Cell 5 Cell 6 Cell 7 Cell 8	Header 1 Header 2 Cell 1 Cell 2 Cell 3 Cell 4 Cell 5 Cell 6 Cell 7 Cell 8	Header 1 Header 2 Cell 1 Cell 2 Cell 3 Cell 4 Cell 5 Cell 6 Cell 7 Cell 8	Header 1 Header 2 Cell 1 Cell 2 Cell 3 Cell 4 Cell 5 Cell 6 Cell 7 Cell 8
table="class:no_line_padding"	table="class:no_side_padding"	table="class:no_line_padding no_side_padding alt1 alt2"	table="class:no_line_padding no_side_padding borderless"
Header 1 Header 2 Cell 1 Cell 2 Cell 3 Cell 4 Cell 5 Cell 6 Cell 7 Cell 8	Header 1 Header 2 Cell 1 Cell 2 Cell 3 Cell 4 Cell 5 Cell 6 Cell 7 Cell 8	Header 1 Header 2 Cell 1 Cell 2 Cell 3 Cell 4 Cell 5 Cell 6 Cell 7 Cell 8	Header 1 Header 2 Cell 1 Cell 2 Cell 3 Cell 4 Cell 5 Cell 6 Cell 7 Cell 8

Table classes can be combined freely. Basically you can have one attribute specifying the border style and any combination of head, alt1, alt2 and sortable. So this isn't a complete listing of all possible table styles, but only an overview of the different basic classes and a few selected combinations. Multiple border types don't combine (or at least I haven't found one that makes something useful). Also "borderless" only works combined with "no_line_padding" and "no_side_padding". It doesn't work with "head", "alt1" and "alt2".

Note: This is an oversimplification for how table classes work here in the forum code. Rawhide made a post explaining how they generally work within CSS:

Spoiler: How table styles works in CSS

Show

Quote:

---

Originally Posted by Rawhide

It's a little oversimplified for how tables work here, as the vBulletin class assignment assigns a different class to TABLE, TR, TH, & TD, which the CSS can make use of for more granular control (as in the case of the [thick_]outer_border[_grid] classes), but basically, classes work hierarchically, with the following rules:

- Styles applied to a parent flow through to a child.
- Styles applied to a child override a parent's style.

- Styles applied first get overridden by styles applied later. (This order is set by the CSS file, not by the order you apply the classes in the bb code.)
- Styles applied directly to an object override the classes assigned.

Each class includes a number of different styles, and if you stack multiple classes, only the styles that are the same override each other, the different styles stack.

This is put to use in the alt1 and alt2 classes. In order to maintain a consistent theme, both of them set the uncoloured row to white first in the CSS order, then they set their brown row to brown later. If you use only one, you get white, brown, white brown (even when in a spoiler). But, if you use both, you get light brown, dark brown, light brown, dark brown. This is because the white row is overridden by the brown in the CSS order.



Imagine the following styles: Blue, Red, Green, Yellow (in that order in the CSS file)

You apply:
Red to the TABLE
| - Green to the 1st TR
| | - Blue to the 1st TH
| | - Nothing to the 2nd TH
| - Nothing to the 2nd TR
| | - Yellow to the 1st TD
| | - Nothing to the 2nd TD
| - Yellow and manual "brown" to 3rd TR
| | - Blue and Yellow to 1st TD
| | - Nothing to 2nd TD

These are your resulting colours:

TABLE	1st TH/TD	2nd TH/TD
1st TR	Blue	Green
2nd TR	Yellow	Red
3rd TR	Yellow	"brown"

1st TR:
1st TH: Red from TABLE, Green from 1st TR, Blue from 1st TH
2nd TH: Red from TABLE, Green from 1st TR

2nd TR:
1st TD: Red from TABLE, Yellow from 2nd TD
2nd TD: Red from TABLE

3rd TR:
1st TD: Red from TABLE, Yellow from 3rd TR, manual "brown" from 3rd TR, Blue from 2nd TD, Yellow from 2nd TD
2nd TH: Red from TABLE, Yellow from 3rd TR, "brown" from 3rd TR

---

---

Other Options

The attributes "align" and "width" can be used to alter the layout of the table.
"align" aligns the table either in the "left", the "center" or the "right" part of the post.
"width" specifies the width of the table.
(The thick grid table represents an outside post to visualize the alignment in less space.)

table="class:grid, width:150, align:left" Cell 1 Cell 2 Cell 3 Cell 4

table="class:grid, width:250, align:center" Cell 1 Cell 2 Cell 3 Cell 4

table="class:grid, width:200, align:right" Cell 1 Cell 2 Cell 3 Cell 4

"width" and "align" can also be used for [td]

td="align:left, width:100"

td="align:center, width:200"

td="align:right, width:300"

"width" also works with [th], but header cells are automatically centered so align doesn't work

th="width:300"	th="width:200"	th="width:100"

Neither "align" nor "width" work with [tr]

"width" also allows percantage values, which are related to the space the table has available.

This table starts with the tag [table="class:grid, width:70%, align:right"]	:belkar:	:vaarsuvius:
The first table column uses the tag [td="align:right, width:60%"]	:haley:	:elan:
The other columns have a width of 20% each.	:roy:	:durkon:

The same table again, now within another table with "width:50%"

This table starts with the tag [table="class:grid, width:70%, align:right"] :belkar: :vaarsuvius: The first table column uses the tag [td="align:right, width:60%"] :haley: :elan: The other columns have a width of 20% each. :roy: :durkon:

The attribute bgcolor for [tr], [td] and [th] allows to specify color values. Allowed options are either hex values (like "#ff0000" for red) or HTML color names. It is highly advised to use hex values, or at least sticking to one of the 17 standard color names, but it is possible easier to remember "just use hex values".

Colors applies in a hierarchical order. The last time you apply a color, this is the color shown.

• Table class (head, alt1, alt2)
• Information from [tr]
• Information from [td]/[th]

Each cell containing "Header #" and "Cell #" in the following example uses a default [th] or [td] tag. It isn't possibly to color the whole table with bgcolor. The right table uses "class:head alt1 alt2".

Header 1 th="bgcolor:#00ff00" td="bgcolor:#e6e6e6" Cell 2 Cell 3 td="bgcolor:#871290" Cell 5 Cell 6 td="bgcolor:#998800" (tr="bgcolor:#aa00aa") Cell 8 (tr="bgcolor:#aa00aa")

Header 1 th="bgcolor:#ff0000" td="bgcolor:#0033aa" Cell 2 td="bgcolor:#dd88aa" Cell 4 Cell 5 (tr="bgcolor:#ffffff") Cell 6 (tr="bgcolor:#ffffff") Cell 7 Cell 8

"colspan" allows to span a cell over multiple columns, it works with [td] and [th]. If you spawn multiple cells, you need to reduce the number of [td] and [th] tags in each row accordingly. Using colspan with sortable tables is possible, though it could lead to some problems in sorting. You should try if it works in your case.
Note: Rawhide pointed out, that you shouldn't make sortable tables featuring a header row with colspan.

th	th="colspan:4"				th	th
td	td	td	td	td	td	td
td	td	td	td="colspan:3"			td
td="colspan:2"		td="colspan:3"			td="colspan:2"

---

Special Grid Patterns

The classes are only really working with [table]. For some reason it can also be applied to [td] and [tr]. The only influence they have is to turn on the grid for the specified cell(s), which can be used to generate more advanced grid patterns.

But in any cases this seems to be inconsistent (so maybe a bug). It works with all classes if the table uses no borders. But if the table uses a border I can get it only working with [tr="class:thick_outer_border_grid"] and not with other classes or single cells. :smallconfused:
If someone has more insight into this, I would really appreciate it.

Cell 1 Cell 2 Cell 3 Cell 4 Cell 5 Cell 6 Cell 7 Cell 8 Cell 9

Cell 1 Cell 2 Cell 3 Cell 4 Cell 5 Cell 6 Cell 7 Cell 8 Cell 9 Cell 10 Cell 11 Cell 12 Cell 13 Cell 14 Cell 15

It is also possible to remove vertical borders from certain rows with this technique, by applying "class:outer_border" to [tr] in usage with certain table classes. This doesn't work with "class:thick_outer_border_grid" tables. Again this seems to have inconsistencies. :smallsigh:

Cell 1 Cell 2 Cell 3 Cell 4 Cell 5 Cell 6 Cell 7 Cell 8 Cell 9 Cell 10 Cell 11 Cell 12

Cell 1 Cell 2 Cell 3 Cell 4 Cell 5 Cell 6 Cell 7 Cell 8 Cell 9 Cell 10 Cell 11 Cell 12

Cell 1 Cell 2 Cell 3 Cell 4 Cell 5 Cell 6 Cell 7 Cell 8 Cell 9 Cell 10 Cell 11 Cell 12

While it is possibly to get some fancy grids using a different number of table cells in each rows, as said above, this shoudln't be done, because it will result in bad HTML and unexpected results.

---

Observed Problems

While I haven't seen any really problematic bugs, some things just really don't work well. Any observed problems will be featured here. But since I'm not an administrator I cannot say whether any time will be spent on fixing those problems. If you run into a problem that is already listed here, you don't need to post about it, though it might be possible to have some sort of workaround. If you happen to find some, please say something about it, and I will add it.

• "class:borderless" doesn't work (correctly) with "head", "alt1" and "alt2". I don't know whether this is intended or not, but with "alt1" and "alt2" it removes the vertical borders inside the table, which I would think is a bug:
  
  

  Header 1 Header 2 Cell 1 Cell 2 Cell 3 Cell 4 Cell 5 Cell 6 Cell 7 Cell 8

  Header 1 Header 2 Cell 1 Cell 2 Cell 3 Cell 4 Cell 5 Cell 6 Cell 7 Cell 8

  Header 1 Header 2 Cell 1 Cell 2 Cell 3 Cell 4 Cell 5 Cell 6 Cell 7 Cell 8

• "class:sortable" really needs a Header: Without using one the table is still sortable, but there is no indication that the table is sortable. So any other forumite looking at your table will not see that it is in fact sortable (like the table below).
  
  

  td Header 1	td Header 2
  Cell 1	Cell 2
  Cell 3	Cell 4
  Cell 5	Cell 6
  Cell 7	Cell 8

• "class:sortable" also has some minor issues with "class:alt1"/"class:alt2" without the usage of "class:head". The header row and the following table row have the same color. Also there is an inconsistency between which row gets colored with which color.
  
  

  table="class:alt1 sortable, width:250"	table="class:alt2 sortable, width:250"	table="class:alt1 alt2 sortable, width:250"
  Header 1 Header 2 Cell 1 Cell 2 Cell 3 Cell 4 Cell 5 Cell 6 Cell 7 Cell 8	Header 1 Header 2 Cell 1 Cell 2 Cell 3 Cell 4 Cell 5 Cell 6 Cell 7 Cell 8	Header 1 Header 2 Cell 1 Cell 2 Cell 3 Cell 4 Cell 5 Cell 6 Cell 7 Cell 8
  table="class:alt1 alt2, width:250"	table="class:head alt1 alt2 sortable, width:250"	table="class:head alt1 alt2, width:250"
  Header 1 Header 2 Cell 1 Cell 2 Cell 3 Cell 4 Cell 5 Cell 6 Cell 7 Cell 8	Header 1 Header 2 Cell 1 Cell 2 Cell 3 Cell 4 Cell 5 Cell 6 Cell 7 Cell 8	Header 1 Header 2 Cell 1 Cell 2 Cell 3 Cell 4 Cell 5 Cell 6 Cell 7 Cell 8

  While it is possible to "fix" this with empty rows, this should not be used: This once again will result in bad HTML and unexpected results.

---

Overview of Attributes

This is a short and simple list of available attributes, to which tags they can be applied and which values they can have and a short overview what they do.
Usage is generally [tag="attribut:value"], as described in more detail above.

Attribute	Values
align table td	left center right
bgcolor tr td th	<Hexvalue of a color, like "#ff0000" for red> <color word, like "orange">
colspan td th	<a numerical value (# cells merged)>
class table (tr) (td)	[no class, default value if class attribute is omitted] Creates a table without borders (any other class will overwrite this) alt1 Colors all even rows in a lighter background color alt2 Colors all odd rows in a slighty darker background color than alt1 borderless Removes borders in conjunction with "no_line_padding" and "no_side_padding" grid Creates a table with a full grid head Changes header cells to have a dark background outer_border Creates a table only with an outer border, no inner grid no_line_padding Removes vertical padding from the table cells no_side_padding Removes horizontal padding from the table cells sortable Table is sortable by clicking on a cell of the first row thick_grid As grid, only that the grid will be thicker thick_outer_border As outer_border, only that the border will be thicker thick_outer_border_grid Combines a regular grid with a thicker outer border
width table td th	<a numerical value (pixels)> <a percentage>

Conversion Guideline

This is a simple Conversion Guideline how to convert the old table code (retired in the forum upgrade in 2014 - it can be spotted in old post as {table]...) with the new table code.

The basic table structured hasn't really changed that much. Only the delimiters (and some syntax for advanced stuff) changed.

The best way if you simply want to convert your old table to the new code is to do the following steps - "\n" stands for the newline character, "\t" for the tab character. I cannot really say how your word processor masks these characters. If you are not sure, it should be possible to insert them through copy&paste:

1. Copy your table code (and only that!) to a (simple) word processing software (gedit, notepad, etc should do the trick).
2. Search&Replace "\n" with "[/TD]\n[/TR]\n[TR]\n\t[TD]". A newline represented the start of a new table row. (The \n and \t in the new version are optional.)
3. Search&Replace "|" with "[/TD]\n\t[TD]". A "|" represented the start of a new cell. (The \n and \t in the new version are optional.)
4. Replace the "[/TABLE]" with "[/TD]\n[/TR]\n[/TABLE]"
5. Replace the broken "{table...]" with "[TABLE="class:grid head alt1 alt2"]\n[TR]\n\t[TD]".
6. Change your table class to the one you think fits best (or use none if you want a table without grid). If you want a header row replace all [TD]...[/TD] in your first row (but only the first row!) with [TH]...[/TH]
7. Copy the table code back to your post

This should work for all "basic" tables. Some stuff that needs more fixing:

• Colspan: If you have cells featuring {colsp=:##} you need to change these cells to [TD="colspan:##"]...[/TD]
• BR: If you used the BR code to have linebreaks in your tables, it should not work (at least Rawhide said he would remove it/that it will not longer work). But you can simple do that by doing a newline in the post where you need it. Since it isn't used any more for starting a new table row, it will start a new line in the table cell.
• Nested tables: I'm not sure if the above will work for nested tables (I think it should). If not just convert each table separately.
• If your table code had additional newlines, this conversion guide produces empty tables row with one empty cell ("[TR]\n\t[TD][/TD]\n[/TR]"). These should be just removed.

If this doesn't work, feel free to say what problems arise and I will try to help whit that. Best point out which table code troubles you.


[I will not help (or 'advertise' in using any of the posted "table converters", because I think they aren't necessary, and I don't want to debug any problems that may arise while using one of them.]

Examples/Templates

List of examples/templates:

• Some imo really neat stuff you can do with tables without borders
• Sample Arcane Spellcasting Class
• Avatar Adoption Template
• Battle Grid

Each of the following examples/templates will be presented fully visual, followed by a spoiler box presenting the code used for it. If you want to use any of the code, you can just copy and paste it into your post and you will get the same thing as shown in this post. (Possibly you want to insert your own data before posting :smallwink:)

Naturally you can also access the code of the OP by quoting it, if you are interested in some of the table code I used there. I made heavy use of the border-less table class, in a similar manner as illustrated in the first example.

---

Some imo really neat stuff you can do with tables without borders

This is basically free space I wanted to make noticeable. It hasn't any real use. So feel free to ignore this. :smallwink:

Before I'm going to present the examples (although this whole paragraph can be considered an example), I wanted to highlight a imo really useful feature the new table allows: Basically it is possible to use a border-less table (so one without any class), to make special layout/text flow possible, without seeing much of it: http://i1363.photobucket.com/albums/...ps5b13e4d4.gif This is my avatar, made for me as a reward for supporting the OotS Kickstarter Reprint Drive. I think it is really awesome and the best reward I have gotten through Kickstarter. If you want to see more custom artwork made during the drive, I started a thread collecting those pieces. Another special thanks to the Giant for making awesome stuff! It isn't really perfect, and you possible need to try out some options to get a satisfying result (and it could look different with different resolutions. At least you should check whether it survives turning on/off the sidebar panel. That is also the reason why I set the table width to a rather low value, resulting in empty space to the right of this block. To hopefully make it work with as much resolutions as possible). But imo it enables some cool stuff. I think it is really useful for signatures, too, although you need to be aware that the signature character code is limited, so if your signature is wordy, it might not really help you.

Spoiler: Code: Some imo really neat stuff you can do with tables without borders

Show

Code:

---

[table]
[tr]
        [td="width:100"]This
is
basically
free
space
I
wanted
to
make
noticeable.

It
hasn't
any
real
use.

So
feel
free
to
ignore
this.
:smallwink:[/td]

        [td="width:420"]Before I'm going to present the examples (although this whole paragraph can be considered an example), I wanted to highlight a imo really useful feature the new table allows:
Basically it is possible to use a border-less table (so one without any class), to make special layout/text flow possible, without seeing much of it:
[table]
[tr]
                [td="width:120, align:center"][img]http://i1363.photobucket.com/albums/r704/ChristianSteu/Avatar_zps5b13e4d4.gif[/img][/td]
                [td]This is my avatar, made for me as a reward for supporting the OotS Kickstarter Reprint Drive. I think it is really awesome and the best reward I have gotten through Kickstarter. If you want to see more custom artwork made during the drive, I started a [url=http://www.giantitp.com/forums/showthread.php?t=309805]thread[/url] collecting those pieces. Another special thanks to the Giant for making awesome stuff![/td]
[/tr]
[/table]
It isn't really perfect, and you possible need to try out some options to get a satisfying result (and it could look different with different resolutions. At least you should check whether it survives turning on/off the sidebar panel. That is also the reason why I set the table width to a rather low value, resulting in empty space to the right of this block. To hopefully make it work with as much resolutions as possible). But imo it enables some cool stuff.  I think it is really useful for signatures, too, although you need to be aware that the signature character code is limited, so if your signature is wordy, it might not really help you.[/td]
[/tr]
[/table]

---

---

Sample Arcane Spellcasting Class

This is a "Sample Arcane Spellcasting Class"-template. I don't play D&D so I don't know how useful this is, but since someone posted this in the table overview thread, I hope/think someone could use this.

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

Spoiler: Code: Sample Arcane Spellcasting Class

Show

Code:

---

[table="width:750, class: head alt1 alt2"]
[tr="class:outer_border"]
        [th="colspan:2"][/th]
        [th="colspan:3"]Saves[/th]
        [th][/th]
        [th="colspan:10"]Spells Per Day[/th]
[/tr]
[tr="class:outer_border, bgcolor:#8E5A2E"]
        [td="align:center"][color=#FFFFFF][b]Level[/b][/color][/td]
        [td="align:center"][color=#FFFFFF][b]BAB[/b][/color][/td]
        [td="align:center"][color=#FFFFFF][b]Fort[/b][/color][/td]
        [td="align:center"][color=#FFFFFF][b]Ref[/b][/color][/td]
        [td="align:center"][color=#FFFFFF][b]Will[/b][/color][/td]
        [td="align:center"][color=#FFFFFF][b]Special[/b][/color][/td]
        [td="align:center"][color=#FFFFFF][b]0th[/b][/color][/td]
        [td="align:center"][color=#FFFFFF][b]1st[/b][/color][/td]
        [td="align:center"][color=#FFFFFF][b]2nd[/b][/color][/td]
        [td="align:center"][color=#FFFFFF][b]3rd[/b][/color][/td]
        [td="align:center"][color=#FFFFFF][b]4th[/b][/color][/td]
        [td="align:center"][color=#FFFFFF][b]5th[/b][/color][/td]
        [td="align:center"][color=#FFFFFF][b]6th[/b][/color][/td]
        [td="align:center"][color=#FFFFFF][b]7th[/b][/color][/td]
        [td="align:center"][color=#FFFFFF][b]8th[/b][/color][/td]
        [td="align:center"][color=#FFFFFF][b]9th[/b][/color][/td]
[/tr]
[tr]
        [td]1st[/td]
        [td]+0[/td]
        [td]+0[/td]
        [td]+0[/td]
        [td]+1[/td]
        [td]Initial class features[/td]
        [td]3[/td]
        [td]1[/td]
        [td]—[/td]
        [td]—[/td]
        [td]—[/td]
        [td]—[/td]
        [td]—[/td]
        [td]—[/td]
        [td]—[/td]
        [td]—[/td]
[/tr]
[tr]
        [td]2nd[/td]
        [td]+1[/td]
        [td]+0[/td]
        [td]+0[/td]
        [td]+3[/td]
        [td]—[/td]
        [td]4[/td]
        [td]2[/td]
        [td]—[/td]
        [td]—[/td]
        [td]—[/td]
        [td]—[/td]
        [td]—[/td]
        [td]—[/td]
        [td]—[/td]
        [td]—[/td]
[/tr]
[tr]
        [td]3rd[/td]
        [td]+1[/td]
        [td]+1[/td]
        [td]+1[/td]
        [td]+3[/td]
        [td]—[/td]
        [td]4[/td]
        [td]2[/td]
        [td]1[/td]
        [td]—[/td]
        [td]—[/td]
        [td]—[/td]
        [td]—[/td]
        [td]—[/td]
        [td]—[/td]
        [td]—[/td]
[/tr]
[tr]
        [td]4th[/td]
        [td]+2[/td]
        [td]+1[/td]
        [td]+1[/td]
        [td]+4[/td]
        [td]—[/td]
        [td]4[/td]
        [td]3[/td]
        [td]2[/td]
        [td]—[/td]
        [td]—[/td]
        [td]—[/td]
        [td]—[/td]
        [td]—[/td]
        [td]—[/td]
        [td]—[/td]
[/tr]
[tr]
        [td]5th[/td]
        [td]+2[/td]
        [td]+1[/td]
        [td]+1[/td]
        [td]+4[/td]
        [td]Bonus feat[/td]
        [td]4[/td]
        [td]3[/td]
        [td]2[/td]
        [td]1[/td]
        [td]—[/td]
        [td]—[/td]
        [td]—[/td]
        [td]—[/td]
        [td]—[/td]
        [td]—[/td]
[/tr]
[tr]
        [td]6th[/td]
        [td]+3[/td]
        [td]+2[/td]
        [td]+2[/td]
        [td]+5[/td]
        [td]—[/td]
        [td]4[/td]
        [td]3[/td]
        [td]2[/td]
        [td]2[/td]
        [td]—[/td]
        [td]—[/td]
        [td]—[/td]
        [td]—[/td]
        [td]—[/td]
        [td]—[/td]
[/tr]
[tr]
        [td]7th[/td]
        [td]+3[/td]
        [td]+2[/td]
        [td]+2[/td]
        [td]+5[/td]
        [td]—[/td]
        [td]4[/td]
        [td]4[/td]
        [td]3[/td]
        [td]2[/td]
        [td]1[/td]
        [td]—[/td]
        [td]—[/td]
        [td]—[/td]
        [td]—[/td]
        [td]—[/td]
[/tr]
[tr]
        [td]8th[/td]
        [td]+4[/td]
        [td]+2[/td]
        [td]+2[/td]
        [td]+6[/td]
        [td]—[/td]
        [td]4[/td]
        [td]4[/td]
        [td]3[/td]
        [td]3[/td]
        [td]2[/td]
        [td]—[/td]
        [td]—[/td]
        [td]—[/td]
        [td]—[/td]
        [td]—[/td]
[/tr]
[tr]
        [td]9th[/td]
        [td]+4[/td]
        [td]+3[/td]
        [td]+3[/td]
        [td]+6[/td]
        [td]—[/td]
        [td]4[/td]
        [td]4[/td]
        [td]4[/td]
        [td]3[/td]
        [td]2[/td]
        [td]1[/td]
        [td]—[/td]
        [td]—[/td]
        [td]—[/td]
        [td]—[/td]
[/tr]
[tr]
        [td]10th[/td]
        [td]+5[/td]
        [td]+3[/td]
        [td]+3[/td]
        [td]+7[/td]
        [td]Bonus feat[/td]
        [td]4[/td]
        [td]4[/td]
        [td]3[/td]
        [td]3[/td]
        [td]2[/td]
        [td]2[/td]
        [td]—[/td]
        [td]—[/td]
        [td]—[/td]
        [td]—[/td]
[/tr]
[tr]
        [td]11th[/td]
        [td]+5[/td]
        [td]+3[/td]
        [td]+3[/td]
        [td]+7[/td]
        [td]—[/td]
        [td]4[/td]
        [td]4[/td]
        [td]4[/td]
        [td]4[/td]
        [td]3[/td]
        [td]2[/td]
        [td]1[/td]
        [td]—[/td]
        [td]—[/td]
        [td]—[/td]
[/tr]
[tr]
        [td]12th[/td]
        [td]+6/+1[/td]
        [td]+4[/td]
        [td]+4[/td]
        [td]+8[/td]
        [td]—[/td]
        [td]4[/td]
        [td]4[/td]
        [td]4[/td]
        [td]4[/td]
        [td]3[/td]
        [td]3[/td]
        [td]2[/td]
        [td]—[/td]
        [td]—[/td]
        [td]—[/td]
[/tr]
[tr]
        [td]13th[/td]
        [td]+6/+1[/td]
        [td]+4[/td]
        [td]+4[/td]
        [td]+8[/td]
        [td]—[/td]
        [td]4[/td]
        [td]4[/td]
        [td]4[/td]
        [td]4[/td]
        [td]4[/td]
        [td]3[/td]
        [td]2[/td]
        [td]1[/td]
        [td]—[/td]
        [td]—[/td]
[/tr]
[tr]
        [td]14th[/td]
        [td]+7/+2[/td]
        [td]+4[/td]
        [td]+4[/td]
        [td]+9[/td]
        [td]—[/td]
        [td]4[/td]
        [td]4[/td]
        [td]4[/td]
        [td]4[/td]
        [td]4[/td]
        [td]3[/td]
        [td]3[/td]
        [td]2[/td]
        [td]—[/td]
        [td]—[/td]
[/tr]
[tr]
        [td]15th[/td]
        [td]+7/+2[/td]
        [td]+5[/td]
        [td]+5[/td]
        [td]+9[/td]
        [td]Bonus feat[/td]
        [td]4[/td]
        [td]4[/td]
        [td]4[/td]
        [td]4[/td]
        [td]4[/td]
        [td]4[/td]
        [td]3[/td]
        [td]2[/td]
        [td]1[/td]
        [td]—[/td]
[/tr]
[tr]
        [td]16th[/td]
        [td]+8/+3[/td]
        [td]+5[/td]
        [td]+5[/td]
        [td]+10[/td]
        [td]—[/td]
        [td]4[/td]
        [td]4[/td]
        [td]4[/td]
        [td]4[/td]
        [td]4[/td]
        [td]4[/td]
        [td]3[/td]
        [td]3[/td]
        [td]2[/td]
        [td]—[/td]
[/tr]
[tr]
        [td]17th[/td]
        [td]+8/+3[/td]
        [td]+5[/td]
        [td]+5[/td]
        [td]+10[/td]
        [td]—[/td]
        [td]4[/td]
        [td]4[/td]
        [td]4[/td]
        [td]4[/td]
        [td]4[/td]
        [td]4[/td]
        [td]4[/td]
        [td]3[/td]
        [td]2[/td]
        [td]1[/td]
[/tr]
[tr]
        [td]18th[/td]
        [td]+9/+4[/td]
        [td]+6[/td]
        [td]+6[/td]
        [td]+11[/td]
        [td]—[/td]
        [td]4[/td]
        [td]4[/td]
        [td]4[/td]
        [td]4[/td]
        [td]4[/td]
        [td]4[/td]
        [td]4[/td]
        [td]3[/td]
        [td]3[/td]
        [td]2[/td]
[/tr]
[tr]
        [td]19th[/td]
        [td]+9/+4[/td]
        [td]+6[/td]
        [td]+6[/td]
        [td]+11[/td]
        [td]—[/td]
        [td]4[/td]
        [td]4[/td]
        [td]4[/td]
        [td]4[/td]
        [td]4[/td]
        [td]4[/td]
        [td]4[/td]
        [td]4[/td]
        [td]3[/td]
        [td]3[/td]
[/tr]
[tr]
        [td]20th[/td]
        [td]+10/+5[/td]
        [td]+6[/td]
        [td]+6[/td]
        [td]+12[/td]
        [td]Bonus feat[/td]
        [td]4[/td]
        [td]4[/td]
        [td]4[/td]
        [td]4[/td]
        [td]4[/td]
        [td]4[/td]
        [td]4[/td]
        [td]4[/td]
        [td]4[/td]
        [td]4[/td]
[/tr]
[/table]

---

---

Avatar Adaption Template

A simple table with the intention to showcase avatars. Main usage is probably the Avatar Adoption Center thread.

Avatar Adapation - Narrow
http://i1363.photobucket.com/albums/...ps2abc915e.png	http://i1363.photobucket.com/albums/...ps2abc915e.png	http://i1363.photobucket.com/albums/...ps5b13e4d4.gif	http://i1363.photobucket.com/albums/...ps2abc915e.png
Avatar 1	Avatar with a really long and unwieldy name	Stick it to Me	Avatar 2
Unclaimed	Unclaimed	Claimed by ChristianSt	Unclaimed

Avatar Adapation - Wide
http://i1363.photobucket.com/albums/...ps2abc915e.png	http://i1363.photobucket.com/albums/...ps2abc915e.png	http://i1363.photobucket.com/albums/...ps5b13e4d4.gif
Avatar	Avatar with a really long and unwieldy name	Stick it to Me
Unclaimed	Unclaimed	Claimed by ChristianSt

Spoiler: Code: Avatar Adapation - Narrow

Show

Code:

---

[table="width:1, class: head alt1 no_line_padding no_side_padding"]
[tr]
        [th="colspan:4"]Avatar Adapation - Narrow[/th]
[/tr]
[tr]
        [td][img]http://i1363.photobucket.com/albums/r704/ChristianSteu/demoavatar97x117_zps2abc915e.png[/img][/td]
        [td][img]http://i1363.photobucket.com/albums/r704/ChristianSteu/demoavatar97x117_zps2abc915e.png[/img][/td]
        [td][img]http://i1363.photobucket.com/albums/r704/ChristianSteu/Avatar_zps5b13e4d4.gif[/img][/td]
        [td][img]http://i1363.photobucket.com/albums/r704/ChristianSteu/demoavatar97x117_zps2abc915e.png[/img][/td]
[/tr]
[tr]
        [td]Avatar 1[/td]
        [td]Avatar with a really long and unwieldy name[/td]
        [td]Stick it to Me[/td]
        [td]Avatar 2[/td]
[/tr]
[tr]
        [td][color=green]Unclaimed[/color][/td]
        [td][color=green]Unclaimed[/color][/td]
        [td][color=red]Claimed by ChristianSt[/color][/td]
        [td][color=green]Unclaimed[/color][/td]
[/tr]
[/table]

---

Spoiler: Code: Avatar Adapation - Wide

Show

Code:

---

[table="class: head alt1 no_line_padding no_side_padding"]
[tr]
        [th="colspan:3"]Avatar Adapation - Wide[/th]
[/tr]
[tr]
        [td="width:120, align:center"][img]http://i1363.photobucket.com/albums/r704/ChristianSteu/demoavatar97x117_zps2abc915e.png[/img][/td]
        [td="width:120, align:center"][img]http://i1363.photobucket.com/albums/r704/ChristianSteu/demoavatar97x117_zps2abc915e.png[/img][/td]
        [td="width:120, align:center"][img]http://i1363.photobucket.com/albums/r704/ChristianSteu/Avatar_zps5b13e4d4.gif[/img][/td]
[/tr]
[tr]
        [td]Avatar[/td]
        [td]Avatar with a really long and unwieldy name[/td]
        [td]Stick it to Me[/td]
[/tr]
[tr]
        [td][color=green]Unclaimed[/color][/td]
        [td][color=green]Unclaimed[/color][/td]
        [td][color=red]Claimed by ChristianSt[/color][/td]
[/tr]
[/table]

---

Note:

• You need to adjust the colspan number in the th cell accordingly to how many cells you want.
• If you want a second row of avatars with a category header, do not make another row with th. Use "[td="bgcolor:#8E5A2E, align:center, colspan:??"][color=#FFFFFF][b]<Category>[/b][/color][/td]" instead of "[th="colspan:??"]<Category>[/th]". (Or if you don't mind some space between categories, you can start a new table. It also makes it easier if you want a different amount of avatars in each rows.)
• The difference between the narrow and the wide version is where you put the width attribute: The narrow version uses a width of 1 for the table tag to enforce a minimum width to all columns. The wide version uses width inside each td tag in the first row. If you don't use any width attributes long text makes the columns wider than you probably want.
• For the wide version I've used "align:center" to align the images. It is not really needed, but imo looks nicer. If you do multiple rows of avatars in the same table you might also want it for the narrow version.
• (If someone wants to adopt the avatar I made for showcasing this template, feel free to contact me :smalltongue:)

---

Battle Grid

While it is (imo) far from ideal, you can use the table as a battle grid. It isn't possible to specify the height of the cells, so I hope the width works squarish on most browsers.

	a	b	c	d	e	f	g	h	i
A
B
C		z
D					|	--	|
E					|	x	|
F					|		--	|
G					|		y	|
H					|	--	--	|
I

Spoiler: Table code

Show

Code:

---

[table="class:no_side_padding no_line_padding head"]
[tr]
        [th="width:16"][/th]
        [th="width:16"]a[/th]
        [th="width:16"]b[/th]
        [th="width:16"]c[/th]
        [th="width:16"]d[/th]
        [th="width:16"]e[/th]
        [th="width:16"]f[/th]
        [th="width:16"]g[/th]
        [th="width:16"]h[/th]
        [th="width:16"]i[/th]
[/tr]
[tr]
        [td="bgcolor:#8E5A2E, align:center"][color=#FFFFFF][b]A[/b][/color][/td]
        [td="align:center"][/td]
        [td="align:center"][/td]
        [td="align:center"][/td]
        [td="align:center"][/td]
        [td="align:center"][/td]
        [td="align:center"][/td]
        [td="align:center"][/td]
        [td="align:center"][/td]
        [td="align:center"][/td]
[/tr]
[tr]
        [td="bgcolor:#8E5A2E, align:center"][color=#FFFFFF][b]B[/b][/color][/td]
        [td="align:center"][/td]
        [td="align:center"][/td]
        [td="align:center"][/td]
        [td="align:center"][/td]
        [td="align:center"][/td]
        [td="align:center"][/td]
        [td="align:center"][/td]
        [td="align:center"][/td]
        [td="align:center"][/td]
[/tr]
[tr]
        [td="bgcolor:#8E5A2E, align:center"][color=#FFFFFF][b]C[/b][/color][/td]
        [td="align:center"][/td]
        [td="align:center"]z[/td]
        [td="align:center"][/td]
        [td="align:center"][/td]
        [td="align:center"][/td]
        [td="align:center"][/td]
        [td="align:center"][/td]
        [td="align:center"][/td]
        [td="align:center"][/td]
[/tr]
[tr]
        [td="bgcolor:#8E5A2E, align:center"][color=#FFFFFF][b]D[/b][/color][/td]
        [td="align:center"][/td]
        [td="align:center"][/td]
        [td="align:center"][/td]
        [td="align:center"][/td]
        [td="align:center"]|[/td]
        [td="align:center"]--[/td]
        [td="align:center"]|[/td]
        [td="align:center"][/td]
        [td="align:center"][/td]
[/tr]
[tr]
        [td="bgcolor:#8E5A2E, align:center"][color=#FFFFFF][b]E[/b][/color][/td]
        [td="align:center"][/td]
        [td="align:center"][/td]
        [td="align:center"][/td]
        [td="align:center"][/td]
        [td="align:center"]|[/td]
        [td="align:center"]x[/td]
        [td="align:center"]|[/td]
        [td="align:center"][/td]
        [td="align:center"][/td]
[/tr]
[tr]
        [td="bgcolor:#8E5A2E, align:center"][color=#FFFFFF][b]F[/b][/color][/td]
        [td="align:center"][/td]
        [td="align:center"][/td]
        [td="align:center"][/td]
        [td="align:center"][/td]
        [td="align:center"]|[/td]
        [td="align:center"][/td]
        [td="align:center"]--[/td]
        [td="align:center"]|[/td]
        [td="align:center"][/td]
[/tr]
[tr]
        [td="bgcolor:#8E5A2E, align:center"][color=#FFFFFF][b]G[/b][/color][/td]
        [td="align:center"][/td]
        [td="align:center"][/td]
        [td="align:center"][/td]
        [td="align:center"][/td]
        [td="align:center"]|[/td]
        [td="align:center"][/td]
        [td="align:center"]y[/td]
        [td="align:center"]|[/td]
        [td="align:center"][/td]
[/tr]
[tr]
        [td="bgcolor:#8E5A2E, align:center"][color=#FFFFFF][b]H[/b][/color][/td]
        [td="align:center"][/td]
        [td="align:center"][/td]
        [td="align:center"][/td]
        [td="align:center"][/td]
        [td="align:center"]|[/td]
        [td="align:center"]--[/td]
        [td="align:center"]--[/td]
        [td="align:center"]|[/td]
        [td="align:center"][/td]
[/tr]
[tr]
        [td="bgcolor:#8E5A2E, align:center"][color=#FFFFFF][b]I[/b][/color][/td]
        [td="align:center"][/td]
        [td="align:center"][/td]
        [td="align:center"][/td]
        [td="align:center"][/td]
        [td="align:center"][/td]
        [td="align:center"][/td]
        [td="align:center"][/td]
        [td="align:center"][/td]
        [td="align:center"][/td]
[/tr]
[/table]

---

It is also possible to have a chess like background (and discard the inner border because you don't really need it any more), though you basically need to specify the color for each cell, though you can save half that by using alt1/alt2:

	a	b	c	d	e	f	g	h	i
A
B
C		z
D					|	--	|
E					|	x	|
F					|		--	|
G					|		y	|
H					|	--	--	|
I

Spoiler: Table code

Show

Code:

---

[table="class:no_side_padding no_line_padding head alt1 alt2 outer_border"]
[tr]
        [th="width:16"][/th]
        [th="width:16"]a[/th]
        [th="width:16"]b[/th]
        [th="width:16"]c[/th]
        [th="width:16"]d[/th]
        [th="width:16"]e[/th]
        [th="width:16"]f[/th]
        [th="width:16"]g[/th]
        [th="width:16"]h[/th]
        [th="width:16"]i[/th]
[/tr]
[tr]
        [td="bgcolor:#8E5A2E, align:center"][color=#FFFFFF][b]A[/b][/color][/td]
        [td="align:center"][/td]
        [td="bgcolor:#DCCDAD, align:center"][/td]
        [td="align:center"][/td]
        [td="bgcolor:#DCCDAD, align:center"][/td]
        [td="align:center"][/td]
        [td="bgcolor:#DCCDAD, align:center"][/td]
        [td="align:center"][/td]
        [td="bgcolor:#DCCDAD, align:center"][/td]
        [td="align:center"][/td]
[/tr]
[tr]
        [td="bgcolor:#8E5A2E, align:center"][color=#FFFFFF][b]B[/b][/color][/td]
        [td="align:center"][/td]
        [td="bgcolor:#F0E7D3, align:center"][/td]
        [td="align:center"][/td]
        [td="bgcolor:#F0E7D3, align:center"][/td]
        [td="align:center"][/td]
        [td="bgcolor:#F0E7D3, align:center"][/td]
        [td="align:center"][/td]
        [td="bgcolor:#F0E7D3, align:center"][/td]
        [td="align:center"][/td]
[/tr]
[tr]
        [td="bgcolor:#8E5A2E, align:center"][color=#FFFFFF][b]C[/b][/color][/td]
        [td="align:center"][/td]
        [td="bgcolor:#DCCDAD, align:center"]z[/td]
        [td="align:center"][/td]
        [td="bgcolor:#DCCDAD, align:center"][/td]
        [td="align:center"][/td]
        [td="bgcolor:#DCCDAD, align:center"][/td]
        [td="align:center"][/td]
        [td="bgcolor:#DCCDAD, align:center"][/td]
        [td="align:center"][/td]
[/tr]
[tr]
        [td="bgcolor:#8E5A2E, align:center"][color=#FFFFFF][b]D[/b][/color][/td]
        [td="align:center"][/td]
        [td="bgcolor:#F0E7D3, align:center"][/td]
        [td="align:center"][/td]
        [td="bgcolor:#F0E7D3, align:center"][/td]
        [td="align:center"]|[/td]
        [td="bgcolor:#F0E7D3, align:center"]--[/td]
        [td="align:center"]|[/td]
        [td="bgcolor:#F0E7D3, align:center"][/td]
        [td="align:center"][/td]
[/tr]
[tr]
        [td="bgcolor:#8E5A2E, align:center"][color=#FFFFFF][b]E[/b][/color][/td]
        [td="align:center"][/td]
        [td="bgcolor:#DCCDAD, align:center"][/td]
        [td="align:center"][/td]
        [td="bgcolor:#DCCDAD, align:center"][/td]
        [td="align:center"]|[/td]
        [td="bgcolor:#DCCDAD, align:center"]x[/td]
        [td="align:center"]|[/td]
        [td="bgcolor:#DCCDAD, align:center"][/td]
        [td="align:center"][/td]
[/tr]
[tr]
        [td="bgcolor:#8E5A2E, align:center"][color=#FFFFFF][b]F[/b][/color][/td]
        [td="align:center"][/td]
        [td="bgcolor:#F0E7D3, align:center"][/td]
        [td="align:center"][/td]
        [td="bgcolor:#F0E7D3, align:center"][/td]
        [td="align:center"]|[/td]
        [td="bgcolor:#F0E7D3, align:center"][/td]
        [td="align:center"]--[/td]
        [td="bgcolor:#F0E7D3, align:center"]|[/td]
        [td="align:center"][/td]
[/tr]
[tr]
        [td="bgcolor:#8E5A2E, align:center"][color=#FFFFFF][b]G[/b][/color][/td]
        [td="align:center"][/td]
        [td="bgcolor:#DCCDAD, align:center"][/td]
        [td="align:center"][/td]
        [td="bgcolor:#DCCDAD, align:center"][/td]
        [td="align:center"]|[/td]
        [td="bgcolor:#DCCDAD, align:center"][/td]
        [td="align:center"]y[/td]
        [td="bgcolor:#DCCDAD, align:center"]|[/td]
        [td="align:center"][/td]
[/tr]
[tr]
        [td="bgcolor:#8E5A2E, align:center"][color=#FFFFFF][b]H[/b][/color][/td]
        [td="align:center"][/td]
        [td="bgcolor:#F0E7D3, align:center"][/td]
        [td="align:center"][/td]
        [td="bgcolor:#F0E7D3, align:center"][/td]
        [td="align:center"]|[/td]
        [td="bgcolor:#F0E7D3, align:center"]--[/td]
        [td="align:center"]--[/td]
        [td="bgcolor:#F0E7D3, align:center"]|[/td]
        [td="align:center"][/td]
[/tr]
[tr]
        [td="bgcolor:#8E5A2E, align:center"][color=#FFFFFF][b]I[/b][/color][/td]
        [td="align:center"][/td]
        [td="bgcolor:#DCCDAD, align:center"][/td]
        [td="align:center"][/td]
        [td="bgcolor:#DCCDAD, align:center"][/td]
        [td="align:center"][/td]
        [td="bgcolor:#DCCDAD, align:center"][/td]
        [td="align:center"][/td]
        [td="bgcolor:#DCCDAD, align:center"][/td]
        [td="align:center"][/td]
[/tr]
[/table]

---

Reserved Post

Reserved Post

So, reserving some space is done. This thread is now official online :smallbiggrin:

Feel free to point out any errors or missing stuff, or if you see an awesome table you think might useful for others, just post it here and I will include it in the examples!

Well done! This is great. You might also want to speak on a way to search for broken tables from before the update, so that people know how to find them all that don't.

Quote:

---

Originally Posted by TheWombatOfDoom

Well done! This is great. You might also want to speak on a way to search for broken tables from before the update, so that people know how to find them all that don't.

---

If you say me how, then I will do it. I have seen your post in the other thread about it and tried it, but It just don't work for me. Every time I try to search for "{table=head]" or "{table]" it just shows me some posts, which sometimes doesn't even contain tables :smallconfused:.

I'm rather hesitant to put in information that doesn't really work for me (While the search contain posts containing tables, I'm not even sure it contains all. And on top of that I have the feeling that around 80% or more don't contain tables at all). But when I need to filter through more than a dozens worth of post to find 2-3 tables, I don't think that search is really helping. (And honestly, I'm not sure if any random old post I don't remember about is worth to edit :smallwink: - but if you could provide me a method that has a better chance of finding tables, I would certainly add it.)

Quote:

---

Originally Posted by ChristianSt

If you say me how, then I will do it. I have seen your post in the other thread about it and tried it, but It just don't work for me. Every time I try to search for "{table=head]" or "{table]" it just shows me some posts, which sometimes doesn't even contain tables :smallconfused:.

I'm rather hesitant to put in information that doesn't really work for me (While the search contain posts containing tables, I'm not even sure it contains all. And on top of that I have the feeling that around 80% or more don't contain tables at all). But when I need to filter through more than a dozens worth of post to find 2-3 tables, I don't think that search is really helping. (And honestly, I'm not sure if any random old post I don't remember about is worth to edit :smallwink: - but if you could provide me a method that has a better chance of finding tables, I would certainly add it.)

---

On reason perhaps that it is showing you a post without a table in it, is I found that it also listed posts that had the word "table" in it at all, which is less than desirable, but the search itself also gave me all my tables, and the most recent of my table being the ones I most wanted to edit, it was mostly all the ones on the first page. I'll see if I can fiddle with the search enough to get you what you need, though. But as you've observed, the search isn't always exact. :smallwink:

Quote:

---

Originally Posted by TheWombatOfDoom

On reason perhaps that it is showing you a post without a table in it, is I found that it also listed posts that had the word "table" in it at all, which is less than desirable, but the search itself also gave me all my tables, and the most recent of my table being the ones I most wanted to edit, it was mostly all the ones on the first page. I'll see if I can fiddle with the search enough to get you what you need, though. But as you've observed, the search isn't always exact. :smallwink:

---

Yeah, I tried it some more searching, and as it seems the search function just discards any "{","]" or "=", so searching for "table" does the same as searching for "{table]". "{table=head]" turns to "head table". So unless you know some way to mask them, I don't think it is really useful. It depends heavily on what you talk about. (For example I talked a bunch about database normalization in some threads featuring tables, or another thread about magic cards where I mentioned a "kitchen table"...)
While it also more or less "accidentally" finds (hopefully) all table code, I think it finds potentially too much non-table-code posts to be really valuable.

Haven't read everything yet, but just a quick FYI:

Tables on the mobile site will look better (if not quite perfect) in the future.

I'm just going to note these in different posts for now then tidy it up to one post later. (Note: technically against the rules if you don't have permission, so don't copy this strategy.)



First note:
Using multiple header rows is possible, but bad HTML by the standards. You should avoid it unless strictly necessary. Should make a note of it in the post.

Note 2: Classes

Quote:

---

Table classes can be combined freely. Basically you can have one attribute specifying the border style and any combination of head, alt1, alt2 and sortable. So this isn't a complete listing of all possible table styles, but only an overview of the different basic classes and a few selected combinations. Multiple border types don't combine (or at least I haven't found one that makes something useful).

---

It's a little oversimplified for how tables work here, as the vBulletin class assignment assigns a different class to TABLE, TR, TH, & TD, which the CSS can make use of for more granular control (as in the case of the [thick_]outer_border[_grid] classes), but basically, classes work hierarchically, with the following rules:

- Styles applied to a parent flow through to a child.
- Styles applied to a child override a parent's style.

- Styles applied first get overridden by styles applied later. (This order is set by the CSS file, not by the order you apply the classes in the bb code.)
- Styles applied directly to an object override the classes assigned.

Each class includes a number of different styles, and if you stack multiple classes, only the styles that are the same override each other, the different styles stack.

This is put to use in the alt1 and alt2 classes. In order to maintain a consistent theme, both of them set the uncoloured row to white first in the CSS order, then they set their brown row to brown later. If you use only one, you get white, brown, white brown (even when in a spoiler). But, if you use both, you get light brown, dark brown, light brown, dark brown. This is because the white row is overridden by the brown in the CSS order.



Imagine the following styles: Blue, Red, Green, Yellow (in that order in the CSS file)

You apply:
Red to the TABLE
| - Green to the 1st TR
| | - Blue to the 1st TH
| | - Nothing to the 2nd TH
| - Nothing to the 2nd TR
| | - Yellow to the 1st TD
| | - Nothing to the 2nd TD
| - Yellow and manual "brown" to 3rd TR
| | - Blue and Yellow to 1st TD
| | - Nothing to 2nd TD

These are your resulting colours:

TABLE	1st TH/TD	2nd TH/TD
1st TR	Blue	Green
2nd TR	Yellow	Red
3rd TR	Yellow	"brown"

1st TR:
1st TH: Red from TABLE, Green from 1st TR, Blue from 1st TH
2nd TH: Red from TABLE, Green from 1st TR

2nd TR:
1st TD: Red from TABLE, Yellow from 2nd TD
2nd TD: Red from TABLE

3rd TR:
1st TD: Red from TABLE, Yellow from 3rd TR, manual "brown" from 3rd TR, Blue from 2nd TD, Yellow from 2nd TD
2nd TH: Red from TABLE, Yellow from 3rd TR, "brown" from 3rd TR

3rd note:

Quote:

---

The attribute bgcolor for [tr], [td] and [th] allows to specify color values. Allowed options are either color words (though I'm not sure which are possible - I would assume that the same selection as for the font color is possible) and hex-values (like "#ff0000" for red).

---

HTML colour names are specified here. There are 17 "safe" colours and 123 less safe colours (which might display differently in different browsers, or not at all).

However, I recommend using the hex value in all cases for better accuracy (and completely forgo using the names).

Note the 4th:

Using TH cells outside of the header row is really bad HTML. You should avoid this at all costs. Format your cells to look like a header rather than using TH.

Likewise, you should avoid sortable tables with colspanned TH cells, and with multiple TH rows (which is already bad HTML, as noted above).

Note the fifth:

Quote:

---

Another possibility is to not use the full amount of table cells in all rows

---

Really bad idea. Bad HTML, browser dependant, will produce unexpected results.

Sixth note:

Quote:

---

This can be fixed by inserting an empty row after the first row. Basically the same trick can be used to repeat a color if necessary or to switch the color order (by putting an empty row before the first actual row. This doesn't work with sortable tables, because of the reasons stated above).

---

This is bad HTML and could produce unexpected results. Not a good idea.

Thanks for the input!


I will go and amend the OP, especially removing all those things resulting in bad HTML.


EDIT: I updated the OP to incorporate your input. Sorry if I turned up many stuff resulting in bad HTML. I haven't really considered the impact this has on the resulting HTML code, but just tried out what can be done within the limits of the table code and how it gets displayed. But if it leads to unexpected results, it is something that should be avoided, even if it works on some browsers. So thanks for highlighting those problems.


Also nice to hear that there will be future improvements to the mobile site!

Digging in the PHP files, I discovered that the following options are supported on various tags:


table
width
class
align

tr
bgcolor
class

td
width
colspan
bgcolor
class
align


Which pretty much matches what we've already discovered.

You are a gentleman and a scholar, good sir!

Have you updated the thread in relation to this post yet?

Quote:

---

Originally Posted by Rawhide

Have you updated the thread in relation to this post yet?

---

I corrected the "problems" section, but forgot that I mentioned the mobile theme in the opening section, too :smallsigh:.

I will correct it ASAP

(Normally I read all posts in the Board/Site Issues forum, so I don't plan to miss table-related posts in the future)

Submitting a template, mainly for use in this thread.

Spoiler: Avatar adoptions

Show

Category Name
http://www.giantitp.com/avatars/Zombie.gif	http://www.giantitp.com/avatars/AssassinGuy.gif	http://www.giantitp.com/avatars/SolithKnightGuy.gif
Zombie	Assassin Guy	Knight Guy
Unclaimed	Claimed by <insert name>	Unclaimed

Code:

---

[table="width:1, class: head alt1 no_line_padding no_side_padding"][tr][th="colspan:3"]Category Name[/th]
[/tr][tr]
[td][IMG]http://www.giantitp.com/avatars/Zombie.gif[/IMG][/td][td][IMG]http://www.giantitp.com/avatars/AssassinGuy.gif[/IMG][/td][td][IMG]http://www.giantitp.com/avatars/SolithKnightGuy.gif[/IMG][/td]
[/tr][tr]
[td]Zombie[/td][td]Assassin Guy[/td][td]Knight Guy[/td]
[/tr][tr]
[td][color=green]Unclaimed[/color][/td][td][color=red]Claimed by <insert name>[/color][/td][td][color=green]Unclaimed[/color][/td]
[/tr][/table]

---

Set the colspan of the first heading to match the number of columns.
If you use a lot of avs that are smaller than 120x120 and they look too cramped then you could set the width of each column to 120 instead.

Spoiler

Show

Category Name
http://www.giantitp.com/avatars/Zombie.gif	http://www.giantitp.com/avatars/AssassinGuy.gif	http://www.giantitp.com/avatars/SolithKnightGuy.gif
Zombie	Assassin Guy	Knight Guy
Unclaimed	Claimed by <insert name>	Unclaimed

Code:

---

[table="class: head alt1 no_line_padding no_side_padding"][tr][th="colspan:3"]Category Name[/th]
[/tr][tr]
[td="width:120"][IMG]http://www.giantitp.com/avatars/Zombie.gif[/IMG][/td][td="width:120"][IMG]http://www.giantitp.com/avatars/AssassinGuy.gif[/IMG][/td][td="width:120"][IMG]http://www.giantitp.com/avatars/SolithKnightGuy.gif[/IMG][/td]
[/tr][tr]
[td]Zombie[/td][td]Assassin Guy[/td][td]Knight Guy[/td]
[/tr][tr]
[td][color=green]Unclaimed[/color][/td][td][color=red]Claimed by <insert name>[/color][/td][td][color=green]Unclaimed[/color][/td]
[/tr][/table]

---

Quote:

---

Originally Posted by Prime32

Submitting a template, mainly for use in this thread.

---

Thanks! I have included it in the OP. I did make some slight chances, though: I've used other images, due to slight copyright concern [I think it should be fine to use the default images inside a template, but I like to "err on the side of caution"] and added ab "align:center" to the second version, because I think the images are looking better when centered.


Other than that, I took a look at your avatar post (featuring some nice avatars):
Rawhide said that it is really bad to use [th] outside the first row of a table, and should be avoided unless strictly necessary. You can replace your [th] with [td="bgcolor:#8E5A2E, align:center, colspan:??"][color=#FFFFFF][b]<Category>[/b][/color][/td] - this gives the same result. And while we are at things that aren't really good: You should always have the same amount of table cells in each row. So best add some empty ones (or break your table into different tables with the same amount of cells each).

Has anyone done a Template for ASCII battle maps yet?

Quote:

---

Originally Posted by dextercorvia

Has anyone done a Template for ASCII battle maps yet?

---

All useful templates that I'm aware of are listed in the OP.

That being said, I can't really say what exactly you want. (Some battle grid like thing? Shouldn't you basically could do that with just a table filled with the stuff you want? I think the no_panning classes should be good for that.)

If you can explain what exactly you want, than I will look into doing such a thing.

Quote:

---

Originally Posted by ChristianSt

If you can explain what exactly you want, than I will look into doing such a thing.

---

I tried a basic grid table, but some of the divider lines were bolded, seemingly at random.

No Padding seems like the way to go, Square uniform cells would be good. I like the Header for Columns, is there a way to do a Header (Lefter?) for rows as well?

Quote:

---

Originally Posted by dextercorvia

I tried a basic grid table, but some of the divider lines were bolded, seemingly at random.

No Padding seems like the way to go, Square uniform cells would be good. I like the Header for Columns, is there a way to do a Header (Lefter?) for rows as well?

---

If you have randomly bolded lines it is often because you have wrong zoom settings (that is the case for me at least).

It is possible to style arbitrary cells like header cells, so it is possibly to make an additional column that looks like headers. (With [td="bgcolor:#8E5A2E, align:center"][color=#FFFFFF][b]<Cell Content>[/b][/color][/td] , as said in the OP)

The square uniform cells are problematic. It isn't possible to specify the height, so you need to specify a width that comes close to that. For my desktop browser 16px width for each cell looks pretty square to me. But I have no idea if it looks square to others.

If I understand you correctly, I think the following should be what you want:

	a	b	c	d	e	f	g	h	i
A
B
C		z
D					|	--	|
E					|	x	|
F					|		--	|
G					|		y	|
H					|	--	--	|
I

Spoiler: Table code

Show

Code:

---

[table="class:no_side_padding no_line_padding head"]
[tr]
        [th="width:16"][/th]
        [th="width:16"]a[/th]
        [th="width:16"]b[/th]
        [th="width:16"]c[/th]
        [th="width:16"]d[/th]
        [th="width:16"]e[/th]
        [th="width:16"]f[/th]
        [th="width:16"]g[/th]
        [th="width:16"]h[/th]
        [th="width:16"]i[/th]
[/tr]
[tr]
        [td="bgcolor:#8E5A2E, align:center"][color=#FFFFFF][b]A[/b][/color][/td]
        [td="align:center"][/td]
        [td="align:center"][/td]
        [td="align:center"][/td]
        [td="align:center"][/td]
        [td="align:center"][/td]
        [td="align:center"][/td]
        [td="align:center"][/td]
        [td="align:center"][/td]
        [td="align:center"][/td]
[/tr]
[tr]
        [td="bgcolor:#8E5A2E, align:center"][color=#FFFFFF][b]B[/b][/color][/td]
        [td="align:center"][/td]
        [td="align:center"][/td]
        [td="align:center"][/td]
        [td="align:center"][/td]
        [td="align:center"][/td]
        [td="align:center"][/td]
        [td="align:center"][/td]
        [td="align:center"][/td]
        [td="align:center"][/td]
[/tr]
[tr]
        [td="bgcolor:#8E5A2E, align:center"][color=#FFFFFF][b]C[/b][/color][/td]
        [td="align:center"][/td]
        [td="align:center"]z[/td]
        [td="align:center"][/td]
        [td="align:center"][/td]
        [td="align:center"][/td]
        [td="align:center"][/td]
        [td="align:center"][/td]
        [td="align:center"][/td]
        [td="align:center"][/td]
[/tr]
[tr]
        [td="bgcolor:#8E5A2E, align:center"][color=#FFFFFF][b]D[/b][/color][/td]
        [td="align:center"][/td]
        [td="align:center"][/td]
        [td="align:center"][/td]
        [td="align:center"][/td]
        [td="align:center"]|[/td]
        [td="align:center"]--[/td]
        [td="align:center"]|[/td]
        [td="align:center"][/td]
        [td="align:center"][/td]
[/tr]
[tr]
        [td="bgcolor:#8E5A2E, align:center"][color=#FFFFFF][b]E[/b][/color][/td]
        [td="align:center"][/td]
        [td="align:center"][/td]
        [td="align:center"][/td]
        [td="align:center"][/td]
        [td="align:center"]|[/td]
        [td="align:center"]x[/td]
        [td="align:center"]|[/td]
        [td="align:center"][/td]
        [td="align:center"][/td]
[/tr]
[tr]
        [td="bgcolor:#8E5A2E, align:center"][color=#FFFFFF][b]F[/b][/color][/td]
        [td="align:center"][/td]
        [td="align:center"][/td]
        [td="align:center"][/td]
        [td="align:center"][/td]
        [td="align:center"]|[/td]
        [td="align:center"][/td]
        [td="align:center"]--[/td]
        [td="align:center"]|[/td]
        [td="align:center"][/td]
[/tr]
[tr]
        [td="bgcolor:#8E5A2E, align:center"][color=#FFFFFF][b]G[/b][/color][/td]
        [td="align:center"][/td]
        [td="align:center"][/td]
        [td="align:center"][/td]
        [td="align:center"][/td]
        [td="align:center"]|[/td]
        [td="align:center"][/td]
        [td="align:center"]y[/td]
        [td="align:center"]|[/td]
        [td="align:center"][/td]
[/tr]
[tr]
        [td="bgcolor:#8E5A2E, align:center"][color=#FFFFFF][b]H[/b][/color][/td]
        [td="align:center"][/td]
        [td="align:center"][/td]
        [td="align:center"][/td]
        [td="align:center"][/td]
        [td="align:center"]|[/td]
        [td="align:center"]--[/td]
        [td="align:center"]--[/td]
        [td="align:center"]|[/td]
        [td="align:center"][/td]
[/tr]
[tr]
        [td="bgcolor:#8E5A2E, align:center"][color=#FFFFFF][b]I[/b][/color][/td]
        [td="align:center"][/td]
        [td="align:center"][/td]
        [td="align:center"][/td]
        [td="align:center"][/td]
        [td="align:center"][/td]
        [td="align:center"][/td]
        [td="align:center"][/td]
        [td="align:center"][/td]
        [td="align:center"][/td]
[/tr]
[/table]

---

It is also possible to have a chess like background (and discard the inner border because you don't really need it any more), though you basically need to specify the color for each cell, though you can save half that by using alt1/alt2:

	a	b	c	d	e	f	g	h	i
A
B
C		z
D					|	--	|
E					|	x	|
F					|		--	|
G					|		y	|
H					|	--	--	|
I

Spoiler: Table code

Show

Code:

---

[table="class:no_side_padding no_line_padding head alt1 alt2 outer_border"]
[tr]
        [th="width:16"][/th]
        [th="width:16"]a[/th]
        [th="width:16"]b[/th]
        [th="width:16"]c[/th]
        [th="width:16"]d[/th]
        [th="width:16"]e[/th]
        [th="width:16"]f[/th]
        [th="width:16"]g[/th]
        [th="width:16"]h[/th]
        [th="width:16"]i[/th]
[/tr]
[tr]
        [td="bgcolor:#8E5A2E, align:center"][color=#FFFFFF][b]A[/b][/color][/td]
        [td="align:center"][/td]
        [td="bgcolor:#DCCDAD, align:center"][/td]
        [td="align:center"][/td]
        [td="bgcolor:#DCCDAD, align:center"][/td]
        [td="align:center"][/td]
        [td="bgcolor:#DCCDAD, align:center"][/td]
        [td="align:center"][/td]
        [td="bgcolor:#DCCDAD, align:center"][/td]
        [td="align:center"][/td]
[/tr]
[tr]
        [td="bgcolor:#8E5A2E, align:center"][color=#FFFFFF][b]B[/b][/color][/td]
        [td="align:center"][/td]
        [td="bgcolor:#F0E7D3, align:center"][/td]
        [td="align:center"][/td]
        [td="bgcolor:#F0E7D3, align:center"][/td]
        [td="align:center"][/td]
        [td="bgcolor:#F0E7D3, align:center"][/td]
        [td="align:center"][/td]
        [td="bgcolor:#F0E7D3, align:center"][/td]
        [td="align:center"][/td]
[/tr]
[tr]
        [td="bgcolor:#8E5A2E, align:center"][color=#FFFFFF][b]C[/b][/color][/td]
        [td="align:center"][/td]
        [td="bgcolor:#DCCDAD, align:center"]z[/td]
        [td="align:center"][/td]
        [td="bgcolor:#DCCDAD, align:center"][/td]
        [td="align:center"][/td]
        [td="bgcolor:#DCCDAD, align:center"][/td]
        [td="align:center"][/td]
        [td="bgcolor:#DCCDAD, align:center"][/td]
        [td="align:center"][/td]
[/tr]
[tr]
        [td="bgcolor:#8E5A2E, align:center"][color=#FFFFFF][b]D[/b][/color][/td]
        [td="align:center"][/td]
        [td="bgcolor:#F0E7D3, align:center"][/td]
        [td="align:center"][/td]
        [td="bgcolor:#F0E7D3, align:center"][/td]
        [td="align:center"]|[/td]
        [td="bgcolor:#F0E7D3, align:center"]--[/td]
        [td="align:center"]|[/td]
        [td="bgcolor:#F0E7D3, align:center"][/td]
        [td="align:center"][/td]
[/tr]
[tr]
        [td="bgcolor:#8E5A2E, align:center"][color=#FFFFFF][b]E[/b][/color][/td]
        [td="align:center"][/td]
        [td="bgcolor:#DCCDAD, align:center"][/td]
        [td="align:center"][/td]
        [td="bgcolor:#DCCDAD, align:center"][/td]
        [td="align:center"]|[/td]
        [td="bgcolor:#DCCDAD, align:center"]x[/td]
        [td="align:center"]|[/td]
        [td="bgcolor:#DCCDAD, align:center"][/td]
        [td="align:center"][/td]
[/tr]
[tr]
        [td="bgcolor:#8E5A2E, align:center"][color=#FFFFFF][b]F[/b][/color][/td]
        [td="align:center"][/td]
        [td="bgcolor:#F0E7D3, align:center"][/td]
        [td="align:center"][/td]
        [td="bgcolor:#F0E7D3, align:center"][/td]
        [td="align:center"]|[/td]
        [td="bgcolor:#F0E7D3, align:center"][/td]
        [td="align:center"]--[/td]
        [td="bgcolor:#F0E7D3, align:center"]|[/td]
        [td="align:center"][/td]
[/tr]
[tr]
        [td="bgcolor:#8E5A2E, align:center"][color=#FFFFFF][b]G[/b][/color][/td]
        [td="align:center"][/td]
        [td="bgcolor:#DCCDAD, align:center"][/td]
        [td="align:center"][/td]
        [td="bgcolor:#DCCDAD, align:center"][/td]
        [td="align:center"]|[/td]
        [td="bgcolor:#DCCDAD, align:center"][/td]
        [td="align:center"]y[/td]
        [td="bgcolor:#DCCDAD, align:center"]|[/td]
        [td="align:center"][/td]
[/tr]
[tr]
        [td="bgcolor:#8E5A2E, align:center"][color=#FFFFFF][b]H[/b][/color][/td]
        [td="align:center"][/td]
        [td="bgcolor:#F0E7D3, align:center"][/td]
        [td="align:center"][/td]
        [td="bgcolor:#F0E7D3, align:center"][/td]
        [td="align:center"]|[/td]
        [td="bgcolor:#F0E7D3, align:center"]--[/td]
        [td="align:center"]--[/td]
        [td="bgcolor:#F0E7D3, align:center"]|[/td]
        [td="align:center"][/td]
[/tr]
[tr]
        [td="bgcolor:#8E5A2E, align:center"][color=#FFFFFF][b]I[/b][/color][/td]
        [td="align:center"][/td]
        [td="bgcolor:#DCCDAD, align:center"][/td]
        [td="align:center"][/td]
        [td="bgcolor:#DCCDAD, align:center"][/td]
        [td="align:center"][/td]
        [td="bgcolor:#DCCDAD, align:center"][/td]
        [td="align:center"][/td]
        [td="bgcolor:#DCCDAD, align:center"][/td]
        [td="align:center"][/td]
[/tr]
[/table]

---

(The align:center for the regular td's isn't really necessary, though I think it looks better. It might also be possible to enclose the table in a center tag and get alignment for all cells automatically, though that doesn't feel like the right way to do it to me.)


Edit: It also looks rather square-ish on my mobile browser, so maybe it works for others, too.

Great work on the new Tables!

Well, I was looking for the format I need to use to update my tables in Homebrew to get them to work again, and this is the first I've found that seems to cover it, so thank you for that crosspost.

It seems almost like there might now be a way to use tables without borders in some of the places to do creature stat blocks as well. :smallconfused::smallamused:

Quote:

---

Originally Posted by Coidzor

Well, I was looking for the format I need to use to update my tables in Homebrew to get them to work again, and this is the first I've found that seems to cover it, so thank you for that crosspost.

It seems almost like there might now be a way to use tables without borders in some of the places to do creature stat blocks as well. :smallconfused::smallamused:

---

If you find that template useful, then it has done its job. :smallbiggrin:


Yeah, tables without borders can do some neat things. If you have some concrete questions/ideas I will try to help you with that.

Here is the revised spellcaster class table. The only change has been to the width, which has been changed to 712.

Spoiler: Revised Spellcaster Class Table

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

Quote:

---

Originally Posted by Southern Cross

Here is the revised spellcaster class table. The only change has been to the width, which has been changed to 712.

---

Thanks for the input (and sorry for the late reply - was kinda busy the last few days), but I don't really see a reason to change the width. It is a pretty minor change, and with other content another width might be more appropriate anyway. Or is there any actual reason why a width of 712 is better than 750?

The only reason is legibility- the end of the table is obscured if the width is longer than 712 pixels. For some reason the maximum observable width seems to be slowly getting smaller.

Quote:

---

Originally Posted by Southern Cross

The only reason is legibility- the end of the table is obscured if the width is longer than 712 pixels. For some reason the maximum observable width seems to be slowly getting smaller.

---

I have no problems with both versions. Even on my mobile phone I see them fine. Though I need to scroll for both if I want to access the right side.

So I think weather or not the complete table fits the screen is dependent on screen resolution and whether or the side panel is displayed.

And yes a smaller tables fits for more possible resolutions, but a smaller tables could get problematic on more zoom settings or with different fonts. Unless there isn't a concret reason it is only a random parameter (I haven't tested, but maybe the table works even without a width, but maybe then it could result in new lines inside cells).

Is there anyway to implement RowSpan as wel as ColSpan?