...Processing...
error
big error
• Introduction: Shortcodes at TutnIQ
• Information boxes, spoilers and jump codes
• Tables
• Getting technical
• ### Tables

In this section we will learn how to add tables to our tutorials, FAQ's and glossaries using one of TutnIQ's table shortcodes.

• ## Introducing tables

We offer a number of different shortcodes to create tables. The internal syntax for each is the same, but the appearance of the table displayed differs.

Types of table at TutnIQ
ShortcodeDescription
[table]Simple table (like this one!)
[finance]Plain black and white table with no grid lines.

## Basic usage

• Create a table by enclosing your tabular data with the appropriate table shortcode tags (see above). There must be an opening and a closing tag.
• Each table row must be on a new line.
• The first row is treated as the table header by default (this can, however, be overridden - see advanced table features below).
• The cells of the row must be separated with the 'pipe'( | ) character.
• A blank row can be created by setting a single 'pipe' character on the line, with no other content.
• You can have a maximum of 5 columns and 50 rows - data outside of these bounds will not be displayed.
• Column widths are automatic.

For example:

[table]
::Description          |   Amount::
Sales                  |1 000 000
Less: Cost of sales    |  500 000
Gross Profit           |--500 000==
[/table]


Will appear as:

DescriptionAmount
Sales1 000 000
Less: Cost of sales500 000
Gross Profit500 000

It is not necessary to align the columns as neatly as we have done above, the following will also work:

[table]
::Description|Amount::
Sales|1 000 000
Less: Cost of sales|  500 000
Gross Profit|--500 000==
[/table]


The above table demonstrates 2 advanced features:

• Column alignment; and
• Cell borders (single / double under- / over-line);

### Column alignment

Alignment is set by column, and must be set in the first row. We use double colons :: to indicate alignment:

• No colons = centered (default).
• Double colon on the left of the cell = left align.
• Double colon on the right of the cell = right align.
• Double colon on both sides of the cell = centered.

For example:

::left aligned::centered::right aligned::
LukeFebruaryApple tart
DanielJuneCheese and wine
CodySeptemberIce cream

### Cell borders

Cells can be given a top border and / or a bottom border. The border can be single-line or double-line. We use double minus signs (--) and double equal signs (==) to indicate single and double lines respectively. For example:

DescriptionMarkupDemonstration
Double overline==Cell contentDouble equal - left
Double underlineCell content==Double equal - right
Single overline--Cell contentDouble minus - left
Single underlineCell content--Double minus - right
For the accountants--Cell content==9 999 999

By default, the first row of the table is treated as the header row. This can be disabled by setting the header attribute to false: [table header="off"]table content goes here [/table].

You can set a table caption by setting the caption attribute: [table caption="Caption, my caption" header="off"]table content goes here [/table]. This will appear as a heading at the top of the table:

 table content goes here

By default tables do not have captions. The header row cannot have cell borders.

## Markdown and shortcodes in tables

• We do not allow Markdown in tables, except for emphasis of text (italics, bold, etc) using * and _; and
• Simple links ([Link description](http://example.com))

Shortcodes will not work either.

## Escaping table characters

Table characters can be escaped as follows:

• \==
• \--
• \::
• \|

This is only necessary if you need to display a literal table character when using the table shortcodes and will have no effect anywhere else. For example

Characters with significance in tables
CharacterDescriptionUse
::Double colonAlignment
|PipeCell divider
--Double minusSingle line border
==Double equalDouble line border

## Finance tables

We can use the [finance] table shortcode to create a table without grid lines and a plain white background:

[finance header="off" caption="Gross profit for the year"]
::Sales                |1 000 000::
Less: Cost of sales    |  500 000
Gross Profit           |--500 000==
[/finance]


Will appear as:

 Sales 1 000 000 Less: Cost of sales 500 000 Gross Profit 500 000

The attributes and syntax are the same as those for a normal table.

We can use the [spreadsheet] table shortcode to create a table styled to look like a spreadsheet. This is useful if you need to refer to cell references. For example:

[spreadsheet]
::Expense           |Actual($)::|Budget($)::
Telephone           |    500    |    300
Rent                |  2 000    |  2 200
Entertainment       |    300    |    350
Travel              |  1 000    |    900
Total               |--3 800==  |--3 750==


Will appear as:

ABC
1ExpenseActual($)Budget($)
2Telephone500300
3Rent2 0002 200
4Entertainment300350
5Travel1 000900
6Total3 8003 750

Please note that the spreadsheet shortcode does not generate a real spreadsheet! There will be NO resizable columns, number formatting or formulas, etc. The attributes and syntax are the same as those for a normal table.

## Alternatives to tables:

Tables should only be used to represent tabular data. Tabular data is data which can be represented in rows and columns.

The table shortcode has a number of alternatives: