1. 2014-04-11, 03:21 PM (ISO 8601) - Top - End - #1
    ChristianSt
    ChristianSt is offline
    Ogre in the Playground
    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.
    Reply With Quote Reply With Quote