User Tools
creating_tables
Differences
This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision Next revision | Previous revision | ||
|
creating_tables [2017/12/09 05:18] waynesowry |
creating_tables [2017/12/09 12:23] (current) waynesowry |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| - | === Creating Tables === | + | ==== Creating Tables ==== |
| - | **Note:** for this topic, you will need a basic understanding of HTML and BBCode. | + | **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). | 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. | 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] | + | [table] ... [/table]\\ |
| - | [thead] ... [/thead] | + | [thead] ... [/thead]\\ |
| - | [tbody] ... [/tbody] | + | [tbody] ... [/tbody]\\ |
| - | [tr] ... [/tr] | + | [tr] ... [/tr]\\ |
| - | [th] ... [/th] | + | [th] ... [/th]\\ |
| [td] ... [/td] | [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 [[https://www.w3schools.com/colors/colors_names.asp|here]]. You can also use the hex colour codes (#xxxxxx) instead. | 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 [[https://www.w3schools.com/colors/colors_names.asp|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: | 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] ... [/td]\\ |
| [td=textColour;backgroundColour] ... [/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: | Centering is done by prepending a ^ character to the colours, or if there are no colours, after the tag name: | ||
| - | [td^] ... [/td] | + | [td^] ... [/td]\\ |
| - | [td=^textColour] ... [/td] | + | [td=^textColour] ... [/td]\\ |
| [td=^textColour;backgroundColour] ... [/td] | [td=^textColour;backgroundColour] ... [/td] | ||
| Line 33: | Line 33: | ||
| To create the special header across the top of the whole table, use the following format in a table tag: | To create the special header across the top of the whole table, use the following format in a table tag: | ||
| - | [table=titleText] ... [/table] | + | [table=titleText] ... [/table]\\ |
| - | [table=textColour;titleText] ... [/table] | + | [table=textColour;titleText] ... [/table]\\ |
| [table=textColour;backgroundColour;titleText] ... [/table] | [table=textColour;backgroundColour;titleText] ... [/table] | ||
| Again, they can all be centred by prepending a ^ character: | Again, they can all be centred by prepending a ^ character: | ||
| - | [table=^titleText] ... [/table] | + | [table=^titleText] ... [/table]\\ |
| - | [table=^textColour;titleText] ... [/table] | + | [table=^textColour;titleText] ... [/table]\\ |
| [table=^textColour;backgroundColour;titleText] ... [/table] | [table=^textColour;backgroundColour;titleText] ... [/table] | ||
| Line 49: | Line 49: | ||
| Cells within the body can then be overridden in the [td] tags. | 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: | ||
| + | |||
| + | {{:forumtable.png?|}} | ||
creating_tables.1512796711.txt.gz · Last modified: 2017/12/09 05:18 by waynesowry
Page Tools
