User Tools

Site Tools


creating_tables

Creating Tables

Note: for this topic, you will need a basic understanding of BBCode and creating tables in HTML.

There is no native WYSIWYG editor for creating tables, but they can be created manually using MyCode tags (MyCode is the MyBB version of BBCode, which is the markup language used with a lot of forum software).

Here is a summary of the MyCode table tags, which mirror the equivalent HTML tags. When creating a table, you can put tags on different lines to make it look neat, but don't indent any of the lines.

[table] … [/table]
[thead] … [/thead]
[tbody] … [/tbody]
[tr] … [/tr]
[th] … [/th]
[td] … [/td]

Attributes have been defined that allow text and background colours to be set, and optional centering. With the [table] tag, you can also define some text to create a single title that goes right across the top of the table. The list of colour names can be found here. You can also use the hex colour codes (#xxxxxx) instead.

All tags except [tbody] and [tr] allow colour attributes (the table one only applies to the special heading though). Colour attributes are specified as follows, using [td] as an example:

[td=textColour] … [/td]
[td=textColour;backgroundColour] … [/td]

Centering is done by prepending a ^ character to the colours, or if there are no colours, after the tag name:

[td^] … [/td]
[td=^textColour] … [/td]
[td=^textColour;backgroundColour] … [/td]

Note that colours and alignment follow normal HTML rules, so if you specify a background colour in the [thead] tag, it will include all cells in the scope of [thead], unless that's overridden by a background colour in a particular [th] or [td] tag.

Also note that when specifying a background colour, a text colour must be specified as well (use “black” for normal text).

To create the special header across the top of the whole table, use the following format in a table tag:

[table=titleText] … [/table]
[table=textColour;titleText] … [/table]
[table=textColour;backgroundColour;titleText] … [/table]

Again, they can all be centred by prepending a ^ character:

[table=^titleText] … [/table]
[table=^textColour;titleText] … [/table]
[table=^textColour;backgroundColour;titleText] … [/table]

The [tbody] tag also allows centering, but not colours:

[tbody^] … [/tbody]

Cells within the body can then be overridden in the [td] tags.

Example

Here is an example of a small table with a few attributes.

[table=^blue;yellow;This Is My Colourful Table]
[thead=^green;lemonchiffon]
[tr]
[th]Header cell 1 with green on LemonChiffon[/th]
[th=brown]Header cell 2 with brown on LemonChiffon[/th]
[/tr]
[/thead]
[tbody]
[tr]
[td=green;mintcream]Cell with green on MintCream[/td]
[td]Plain cell with default colours (black on white)[/td]
[/tr]
[tr]
[td=^red]Cell with red centred text[/td]
[td=black;lightsteelblue]Cell with [b][i]LightSteelBlue[/i][/b] background [/td]
[/tr]
[/tbody]
[/table]

That then looks like this:

creating_tables.txt · Last modified: 2017/12/09 12:23 by waynesowry