...Processing...
error
big error
Using short codes at TutnIQ - TutnIQ
Table of contents X
  • 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!)
    [spreadsheet]Spreadsheet styled table.
    [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]
    

    Advanced features

    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

    Headers and captions

    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:

    Caption, my caption
    tablecontent
    goeshere

    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:

    Gross profit for the year
    Sales1 000 000
    Less: Cost of sales500 000
    Gross Profit500 000

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

    Spreadsheet tables

    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==
    [/spreadsheet]
    

    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:

    • Embed a Google Docs spreadsheet.
    • Use a Markdown list for lists of information which are not tabular in nature.
« Previous
[Section: 3 of 4]
ad placeholder

Sharing is caring!

About the author

Course stats

My progress

Find related courses