Perfect World Perfect World Perfect World
Perfect World Perfect World Perfect World
Perfect World Perfect World Perfect World
Perfect World Perfect World
Perfect World Perfect World
  • Malaysian Version Only!
    Please to do not mix the two information up for International and Maylasian! Thank you for your help. Thousands of visitors to this site appreciate all your kindness.
  • PmWiki /

    authors (basic)

    Table basics

    PmWiki has two types of table markup; the markup described in this page is useful for creating tables with lots of small cells, while table directive markups help with larger scale tables. For more possibilities with table formatting see Cookbook:FormattingTables.

    Tables are created via use of the double pipe character: ||. Lines beginning with this markup denote rows in a table; within such lines the double-pipe is used to delimit cells. In the examples below a border is added for illustration (the default is no border).

    Basic table
    || border=1
    || cell 1 || cell 2 || cell 3 ||
    || cell 1 || cell 2 || cell 3 ||
    cell 1cell 2cell 3
    cell 1cell 2cell 3

    Header cells can be created by placing ! as the first character of a cell. Note that these are table headers, not headings, so it doesn't extend to !!, !!!, etc.

    Table headers
    || border=1
    ||! cell 1 ||! cell 2 ||! cell 3 ||
    || cell 1  ||  cell 2 ||  cell 3 ||
    cell 1cell 2cell 3
    cell 1cell 2cell 3

    A table can have a caption, indicated by ||!caption!||. Any caption must appear prior to other rows of the table.

    Table caption
    || border=1
    ||! A special table !||
    ||! cell 1 ||! cell 2 ||! cell 3 ||
    || cell 1  ||  cell 2 ||  cell 3 ||
    A special table
    cell 1cell 2cell 3
    cell 1cell 2cell 3

    Formatting cell contents

    Cell contents may be aligned left, centered, or aligned right.

    • To left-align contents, place the cell contents next to the leading ||.
    • To center contents, add a space before and after the cell contents.
    • To right-align contents, place a space before the cell contents and leave the cell contents next to the trailing ||.
    Cell alignments
    || border=1 width=100%
    ||!cell 1      ||! cell 2  ||!       cell 3||
    ||left-aligned || centered || right-aligned||
    cell 1cell 2cell 3
    left-alignedcenteredright-aligned
    Default cell alignments
    || border=1 width=100%
    ||!cell default||!cell left ||
    ||default-aligned||left-aligned ||
    cell defaultcell left
    default-alignedleft-aligned

    Note that header and detail cells have different default alignments.

    To get a cell to span multiple columns, follow the cell with empty cells. (At present there is no markup for spanning rows.)

    Column spanning
    || border=1 width=100%
    || |||| right column ||
    || || middle column ||||
    || left column ||||||
    || left column || middle column || right column ||
    
     right column
     middle column
    left column
    left columnmiddle columnright column

    Table attributes

    Any line that begins with || but doesn't have a closing || sets the table attributes for any tables that follow. These attributes can control the size and position of the table, borders, background color, and cell spacing. (In fact these are just standard HTML attributes that are placed in the <table> tag.)

    Use the width= attribute to set a table's width, using either a percentage value or an absolute size.

    Table width
    || border=1 width=100% 
    || cell 1 || cell 2 || cell 3 ||
    || c1 || cellcellcellcell2 || cell 3 ||
    cell 1cell 2cell 3
    c1cellcellcellcell2cell 3

    The border= attribute sets the size of a table's borders.

    Bordered and borderless tables
    || border=10 
    ||!cell 1      ||! cell 2  ||!       cell 3||
    ||left-aligned || centered || right-aligned||
    
    || border=0
    ||!cell 1      ||! cell 2  ||!       cell 3||
    ||left-aligned || centered || right-aligned||
    cell 1cell 2cell 3
    left-alignedcenteredright-aligned
    cell 1cell 2cell 3
    left-alignedcenteredright-aligned

    Use align=center, align=left, and align=right to center, left, or right align a table. Note that align=left and align=right create a floating table, such that text wraps around the table.

    Table alignment
    || border=1 align=center
    ||!cell 1      ||! cell 2  ||!       cell 3||
    ||left-aligned || centered || right-aligned||
    
    || border=1 align=left
    ||!cell 1      ||! cell 2  ||!       cell 3||
    ||left-aligned || centered || right-aligned||
    Notice how text wraps to the right of a table using "align=left".
    cell 1cell 2cell 3
    left-alignedcenteredright-aligned
    cell 1cell 2cell 3
    left-alignedcenteredright-aligned

    Notice how text wraps to the right of a table using "align=left".

    The bgcolor= attribute sets the background color for a table. At present there is no way to specify the color of individual rows or cells in this type of table (but see Cookbook:FormattingTables).

    || border=1 align=center bgcolor=yellow
    ||!cell 1      ||! cell 2  ||!       cell 3||
    ||left-aligned || centered || right-aligned||
    cell 1cell 2cell 3
    left-alignedcenteredright-aligned

    Other examples

    A more complex table
    %define=sp padding-right:1em font-weight:bold%
    || border=1
    || [++Events Calendar++] ||||||||||
    || '''May 2005''' || '''June 2005''' || '''July 2005''' || '''August
    2005''' || '''September 2005''' ||
    ||%sp%'''10'''%%6:30 - 8:30 Big Meeting\\\
    %sp%'''17'''%%7:00 - 8:30 Bigger Meeting\\\
    %sp%'''24'''%%7:00 - 8:30 Biggest Meeting|| || || || ||
    || '''October 2005''' || '''November 2005''' || '''December 2005''' ||
    '''January 2006''' || '''February 2006''' ||
    || || || || || ||
    
    Events Calendar
    May 2005June 2005July 2005August 2005September 2005
    106:30 - 8:30 Big Meeting

    177:00 - 8:30 Bigger Meeting

    247:00 - 8:30 Biggest Meeting
        
    October 2005November 2005December 2005January 2006February 2006
         

    << Uploads | Documentation Index | Table directives >>

    How do I create nice tables similar to Product X?

    See tables and table directives.

    Edit - History - Print - Recent Changes - Upload - Search - All Recent Changes
    Page last modified on November 30, 2007, at 06:26 PM
  • Made An Update?

    Thanks for the help. If you updated, and want us to know about it please post your update here at the forums. You do not have to register. Guests may post in that particular forum. Again thanks for your help.