Page 1 of 2 12 LastLast
Results 1 to 30 of 35
  1. - Top - End - #1
    Ogre in the Playground
     
    ChristianSt's Avatar

    Join Date
    Feb 2012
    Location
    Germany

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

    The "default" table you get with hitting the table button in the editor and not changing anything is this:
    [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:
    [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 View Post
    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"]
    The first table column uses the tag [td="align:right, width:60%"]
    The other columns have a width of 20% each.

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

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


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

    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>
    Last edited by ChristianSt; 2015-01-27 at 02:03 PM.

  2. - Top - End - #2
    Ogre in the Playground
     
    ChristianSt's Avatar

    Join Date
    Feb 2012
    Location
    Germany

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

    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.]
    Last edited by ChristianSt; 2014-09-06 at 03:05 AM.

  3. - Top - End - #3
    Ogre in the Playground
     
    ChristianSt's Avatar

    Join Date
    Feb 2012
    Location
    Germany

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

    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 )

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




    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]
    Last edited by ChristianSt; 2014-05-28 at 03:54 PM.

  4. - Top - End - #4
    Ogre in the Playground
     
    ChristianSt's Avatar

    Join Date
    Feb 2012
    Location
    Germany

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

    Reserved Post
    Last edited by ChristianSt; 2014-04-11 at 03:28 PM.

  5. - Top - End - #5
    Ogre in the Playground
     
    ChristianSt's Avatar

    Join Date
    Feb 2012
    Location
    Germany

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

    Reserved Post

  6. - Top - End - #6
    Ogre in the Playground
     
    ChristianSt's Avatar

    Join Date
    Feb 2012
    Location
    Germany

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

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

    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!

    Problems with [table]?
    All you want to know about [table]!
    The Order of the Stick
    Kickstarter Reward Collection

    Last updated: 2016/08/09, containing:
    9 Crayon Drawings | 21 Stick its | 47 Signature Doodles

    Custom Avatar made by the Giant.

    Thanks!

  7. - Top - End - #7
    Troll in the Playground
     
    TheWombatOfDoom's Avatar

    Join Date
    May 2012
    Location
    Aldain
    Gender
    Male

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

    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.
    Scientific Name: Wombous apocolypticus | Diet: Apocolypse Pie | Cuddly: Yes

    World Building Projects:
    Magic
    : The Stuff of Sentience | Fate: The Fabric of Physics | Luck: The Basis of Biology

    Order of the Stick Projects:
    Annotation of the Comic | Magic Compendium of the Comic | Transcription of the Comic
    Dad-a-chum? Dum-a-chum? Ded-a-chek? Did-a-chick?
    Extended Signature | My DeviantArt | Majora's Mask Point Race
    (you can't take the sky from me)

  8. - Top - End - #8
    Ogre in the Playground
     
    ChristianSt's Avatar

    Join Date
    Feb 2012
    Location
    Germany

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

    Quote Originally Posted by TheWombatOfDoom View Post
    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 .

    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 - but if you could provide me a method that has a better chance of finding tables, I would certainly add it.)

    Problems with [table]?
    All you want to know about [table]!
    The Order of the Stick
    Kickstarter Reward Collection

    Last updated: 2016/08/09, containing:
    9 Crayon Drawings | 21 Stick its | 47 Signature Doodles

    Custom Avatar made by the Giant.

    Thanks!

  9. - Top - End - #9
    Troll in the Playground
     
    TheWombatOfDoom's Avatar

    Join Date
    May 2012
    Location
    Aldain
    Gender
    Male

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

    Quote Originally Posted by ChristianSt View Post
    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 .

    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 - 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.
    Scientific Name: Wombous apocolypticus | Diet: Apocolypse Pie | Cuddly: Yes

    World Building Projects:
    Magic
    : The Stuff of Sentience | Fate: The Fabric of Physics | Luck: The Basis of Biology

    Order of the Stick Projects:
    Annotation of the Comic | Magic Compendium of the Comic | Transcription of the Comic
    Dad-a-chum? Dum-a-chum? Ded-a-chek? Did-a-chick?
    Extended Signature | My DeviantArt | Majora's Mask Point Race
    (you can't take the sky from me)

  10. - Top - End - #10
    Ogre in the Playground
     
    ChristianSt's Avatar

    Join Date
    Feb 2012
    Location
    Germany

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

    Quote Originally Posted by TheWombatOfDoom View Post
    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.
    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.

    Problems with [table]?
    All you want to know about [table]!
    The Order of the Stick
    Kickstarter Reward Collection

    Last updated: 2016/08/09, containing:
    9 Crayon Drawings | 21 Stick its | 47 Signature Doodles

    Custom Avatar made by the Giant.

    Thanks!

  11. - Top - End - #11
    Lost in the Playground Administrator
     
    Rawhide's Avatar

    Join Date
    Sep 2005
    Location
    Australia
    Gender
    Male

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

    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.

    "My Hobby: Replacing your soap with gravy" by rtg0922, Doll and Clint "Rawhide" Eastwood by Sneak

  12. - Top - End - #12
    Lost in the Playground Administrator
     
    Rawhide's Avatar

    Join Date
    Sep 2005
    Location
    Australia
    Gender
    Male

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

    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.

    "My Hobby: Replacing your soap with gravy" by rtg0922, Doll and Clint "Rawhide" Eastwood by Sneak

  13. - Top - End - #13
    Lost in the Playground Administrator
     
    Rawhide's Avatar

    Join Date
    Sep 2005
    Location
    Australia
    Gender
    Male

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

    Note 2: Classes


    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

    "My Hobby: Replacing your soap with gravy" by rtg0922, Doll and Clint "Rawhide" Eastwood by Sneak

  14. - Top - End - #14
    Lost in the Playground Administrator
     
    Rawhide's Avatar

    Join Date
    Sep 2005
    Location
    Australia
    Gender
    Male

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

    3rd note:

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

    "My Hobby: Replacing your soap with gravy" by rtg0922, Doll and Clint "Rawhide" Eastwood by Sneak

  15. - Top - End - #15
    Lost in the Playground Administrator
     
    Rawhide's Avatar

    Join Date
    Sep 2005
    Location
    Australia
    Gender
    Male

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

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

    "My Hobby: Replacing your soap with gravy" by rtg0922, Doll and Clint "Rawhide" Eastwood by Sneak

  16. - Top - End - #16
    Lost in the Playground Administrator
     
    Rawhide's Avatar

    Join Date
    Sep 2005
    Location
    Australia
    Gender
    Male

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

    Note the fifth:

    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.

    "My Hobby: Replacing your soap with gravy" by rtg0922, Doll and Clint "Rawhide" Eastwood by Sneak

  17. - Top - End - #17
    Lost in the Playground Administrator
     
    Rawhide's Avatar

    Join Date
    Sep 2005
    Location
    Australia
    Gender
    Male

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

    Sixth note:

    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.

    "My Hobby: Replacing your soap with gravy" by rtg0922, Doll and Clint "Rawhide" Eastwood by Sneak

  18. - Top - End - #18
    Ogre in the Playground
     
    ChristianSt's Avatar

    Join Date
    Feb 2012
    Location
    Germany

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

    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!
    Last edited by ChristianSt; 2014-04-12 at 04:28 AM.

    Problems with [table]?
    All you want to know about [table]!
    The Order of the Stick
    Kickstarter Reward Collection

    Last updated: 2016/08/09, containing:
    9 Crayon Drawings | 21 Stick its | 47 Signature Doodles

    Custom Avatar made by the Giant.

    Thanks!

  19. - Top - End - #19
    Lost in the Playground Administrator
     
    Rawhide's Avatar

    Join Date
    Sep 2005
    Location
    Australia
    Gender
    Male

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

    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.

    "My Hobby: Replacing your soap with gravy" by rtg0922, Doll and Clint "Rawhide" Eastwood by Sneak

  20. - Top - End - #20
    Troll in the Playground
     
    Deadline's Avatar

    Join Date
    Sep 2012
    Location
    Necro-equestrian Pugilism
    Gender
    Male

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

    You are a gentleman and a scholar, good sir!
    Awesome avatar by Iron Penguin!

    Signature of Holding

  21. - Top - End - #21
    Lost in the Playground Administrator
     
    Rawhide's Avatar

    Join Date
    Sep 2005
    Location
    Australia
    Gender
    Male

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

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

    "My Hobby: Replacing your soap with gravy" by rtg0922, Doll and Clint "Rawhide" Eastwood by Sneak

  22. - Top - End - #22
    Ogre in the Playground
     
    ChristianSt's Avatar

    Join Date
    Feb 2012
    Location
    Germany

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

    Quote Originally Posted by Rawhide View Post
    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 .

    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)

    Problems with [table]?
    All you want to know about [table]!
    The Order of the Stick
    Kickstarter Reward Collection

    Last updated: 2016/08/09, containing:
    9 Crayon Drawings | 21 Stick its | 47 Signature Doodles

    Custom Avatar made by the Giant.

    Thanks!

  23. - Top - End - #23
    Titan in the Playground
     
    Prime32's Avatar

    Join Date
    Nov 2008
    Location
    Ireland
    Gender
    Male

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

    Submitting a template, mainly for use in this thread.

    Spoiler: Avatar adoptions
    Show
    Category Name
    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
    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]


    Art - Homebrew - Avatar adoptions
    Spirit Artist in the Playground

  24. - Top - End - #24
    Ogre in the Playground
     
    ChristianSt's Avatar

    Join Date
    Feb 2012
    Location
    Germany

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

    Quote Originally Posted by Prime32 View Post
    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).
    Last edited by ChristianSt; 2014-04-20 at 11:13 AM.

    Problems with [table]?
    All you want to know about [table]!
    The Order of the Stick
    Kickstarter Reward Collection

    Last updated: 2016/08/09, containing:
    9 Crayon Drawings | 21 Stick its | 47 Signature Doodles

    Custom Avatar made by the Giant.

    Thanks!

  25. - Top - End - #25
    Firbolg in the Playground
     
    HalflingPirate

    Join Date
    May 2008
    Location
    In an Octopus's Garden

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

    Has anyone done a Template for ASCII battle maps yet?
    Dex

    Spoiler
    Show
    Regarding my Necrotic Apprentice trick:
    Quote Originally Posted by Doc Roc View Post
    This is brilliant.
    Regarding my Non-Epic Hidecarved Dragon:
    Quote Originally Posted by Amphetryon View Post
    Nicely done. Probably too cheesy for many tables, but I'd be inclined to allow it at mine, just for chutzpah.

    Have a cookie.
    Spoiler
    Show
    Check out the Versatile Domain Generalist.

  26. - Top - End - #26
    Ogre in the Playground
     
    ChristianSt's Avatar

    Join Date
    Feb 2012
    Location
    Germany

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

    Quote Originally Posted by dextercorvia View Post
    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.

    Problems with [table]?
    All you want to know about [table]!
    The Order of the Stick
    Kickstarter Reward Collection

    Last updated: 2016/08/09, containing:
    9 Crayon Drawings | 21 Stick its | 47 Signature Doodles

    Custom Avatar made by the Giant.

    Thanks!

  27. - Top - End - #27
    Firbolg in the Playground
     
    HalflingPirate

    Join Date
    May 2008
    Location
    In an Octopus's Garden

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

    Quote Originally Posted by ChristianSt View Post
    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?
    Dex

    Spoiler
    Show
    Regarding my Necrotic Apprentice trick:
    Quote Originally Posted by Doc Roc View Post
    This is brilliant.
    Regarding my Non-Epic Hidecarved Dragon:
    Quote Originally Posted by Amphetryon View Post
    Nicely done. Probably too cheesy for many tables, but I'd be inclined to allow it at mine, just for chutzpah.

    Have a cookie.
    Spoiler
    Show
    Check out the Versatile Domain Generalist.

  28. - Top - End - #28
    Ogre in the Playground
     
    ChristianSt's Avatar

    Join Date
    Feb 2012
    Location
    Germany

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

    Quote Originally Posted by dextercorvia View Post
    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.
    Last edited by ChristianSt; 2014-04-27 at 07:49 AM.

    Problems with [table]?
    All you want to know about [table]!
    The Order of the Stick
    Kickstarter Reward Collection

    Last updated: 2016/08/09, containing:
    9 Crayon Drawings | 21 Stick its | 47 Signature Doodles

    Custom Avatar made by the Giant.

    Thanks!

  29. - Top - End - #29
    Barbarian in the Playground
     
    Southern Cross's Avatar

    Join Date
    Jan 2009
    Location
    Auckland
    Gender
    Male

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

    Great work on the new Tables!
    President and founder of the "Jonathan Harker Was The True Hero of Dracula" Fan club.
    To join, you may either add J.H.W.T.T.H.O.D to your sig or modify the sig above.
    (Avatar darkwizard.png by Teutonic Knight.)




    Spoiler: What Pokemon are you?
    Show

  30. - Top - End - #30
    Colossus in the Playground
     
    NecromancerGuy

    Join Date
    Oct 2008
    Location
    Thistletop
    Gender
    Male

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

    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.
    Quote Originally Posted by Keld Denar View Post
    +3 Girlfriend is totally unoptimized. You are better off with a +1 Keen Witty girlfriend and then appling Greater Magic Make-up to increase her enhancement bonus.
    Homebrew
    To Do: Reboot and finish Riptide

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •