FrontPage HelpOnTables

Difference between r1.2 and the current

@@ -7,10 +7,10 @@
Apart from the option to repeat cell markers to get columns spanning several other columns, you can directly set many HTML table attributes. Any attributes have to be placed between angle brackets {{{<...>}}} directly after the cell marker.

The wiki-like markup has the following options:
* {{{ <|2> }}}: rowspan
* {{{ <#XXXXXX> }}}: background color
* {{{<|2> }}}: rowspan
* {{{<#XXXXXX> }}}: background color

In addition to these, you can add some of the traditional, more long-winded HTML attributes (note that only certain HTML attributes are allowed). By specifying attributes this way, it is also possible to set properties of the table rows and of the table itself, especially you can set the table width using {{{||<tablewidth="100%">...||}}} in the very first row of your table, and the color of a full row by {{{||<rowbgcolor="#FFFFE0">...||}}} in the first cell of a row. As you can see, you have to prefix the name of the HTML attribute with {{{table}}} or {{{row}}}.
In addition to these, you can add some of the traditional, more long-winded HTML attributes (note that only certain HTML attributes are allowed). By specifying attributes this way, it is also possible to set properties of the table rows and of the table itself, especially you can set the table width using {{{<tablewidth="100%">...}}} in the very first row of your table, and the color of a full row by {{{<rowbgcolor="#FFFFE0">...}}} in the first cell of a row. As you can see, you have to prefix the name of the HTML attribute with {{{table}}} or {{{row}}}.


=== Example ===
@@ -30,21 +30,6 @@
||<|2> 1|| 1-1||
|| 1-2||
}}}
|Centered Table Caption|||||||<tablewidth="50%" align="center">'''Heading'''||
||cell 1||cell2||cell 3||
||cell 1||||spanning 2 columns||
||||||<width="50%" align="center">'''Heading'''||
||cell 1||cell2||cell 3||
||cell 1||||spanning 2 columns||
||<align="right"><width="100px" bgcolor="#cc0000">cell 1||cell2||cell 3||
||<align="right">cell 1||||spanning 2 columns||
||||'''Hybrid table'''||
||<|2> 1|| 1-1||
|| 1-2||
=== Display ===

|Centered Table Caption|||||||<tablewidth="50%" align="center"> '''Heading''' ||
@@ -79,7 +64,7 @@
|| middle algin ||
{{{
|||| right aligned text . . . . . . . . . .||
||right aligned<space>||
||<space>right aligned||
}}}
|||| middle aligned text . . . . . . . . . .||
|| right align||
@@ -164,11 +149,12 @@

=== xxx ===
Then, in a wiki document (edit mode), you may aign one of the above class to the table like the below.
{{{|
|Table Caption|<table class="wikiRight">||||'''Table Header'''||
{{{
||Table Caption|<table class="wikiRight">||||'''Table Header'''||
|| a || b || c ||
|| d || e || f ||
}}}
|Table Caption|<table class="wikiRight">|||| '''Right aligned table header''' ||
|| a || b || c ||
|| d || e || f ||


Table Markup

테이블을 만들기 위해서는 테이블 생성기호(table marker)인 "||"를 테이블 시작과 끝 부분에 사용해야 합니다. 새로운 컬럼(column)이 필요할 경우에는 두 생성기호 사이에 "||"를 다시 넣으면 됩니다. 만약에 새로운 줄 (row)을 넣고 싶다면 enter키를 이용하여 "||" 기호를 다시 사용합니다. 엔터키 누르기 바로 전에 공백이 있으면 안됩니다. 여러 컬럼을 넘는 포괄컬럼을 만들기 위해서는 "||"를 연속해서 사용합니다. 여러 열을 아우르는 포괄적인 열(row)을 만들고 싶다면 "||" 기호 옆에 "||<|3>"과 같은 숫자를 넣습니다.

다른 종류의 생성기호들(marksups)에 대해서 알고 싶다면 HelpOnEditing을 참조하시기 바랍니다.

Table Attributes

Apart from the option to repeat cell markers to get columns spanning several other columns, you can directly set many HTML table attributes. Any attributes have to be placed between angle brackets <...> directly after the cell marker.

The wiki-like markup has the following options:
  • <|2> : rowspan
  • <#XXXXXX> : background color

In addition to these, you can add some of the traditional, more long-winded HTML attributes (note that only certain HTML attributes are allowed). By specifying attributes this way, it is also possible to set properties of the table rows and of the table itself, especially you can set the table width using <tablewidth="100%">... in the very first row of your table, and the color of a full row by <rowbgcolor="#FFFFE0">... in the first cell of a row. As you can see, you have to prefix the name of the HTML attribute with table or row.


Example

|Centered Table Caption|||||||<tablewidth="50%" align="center">'''Heading'''||
||cell 1||cell2||cell 3||
||cell 1||||spanning 2 columns||

||||||<width="50%" align="center">'''Heading'''||
||cell 1||cell2||cell 3||
||cell 1||||spanning 2 columns||

||<align="right"><width="100px" bgcolor="#cc0000">cell 1||cell2||cell 3||
||<align="right">cell 1||||spanning 2 columns||

||||'''Hybrid table'''||
||<|2> 1|| 1-1||
|| 1-2||

Display


Centered Table Caption
Heading
cell 1cell2cell 3
cell 1spanning 2 columns


Heading
cell 1cell2cell 3
cell 1spanning 2 columns

cell 1cell2cell 3
cell 1spanning 2 columns

Hybrid table
1 1-1
1-2

MoniWiki extension

MoniWiki support simple alignment feature like as the PmWiki

||||left aligned text . . . . . . . . . .  ||
||Hello world ||
left aligned text . . . . . . . . . .
Hello world

|||| middle alignededxxxx . . . . . . . . . . ||
||<space>middle aligned<space>||
middle alignedxxxx . . . . . . . . . .
middle algin

|||| right aligned text . . . . . . . . . .||
||<space>right aligned||
middle aligned text . . . . . . . . . .
right align


After verion 1.3 (in CVS), you can use 'class option' in table, and put classes for your table in the default.css file. For example, in the css/_user.css directory, put the below:
/* for right aligned table */
.wikiRight {
        float:right;
        position:relative;
        border-color: #9C9C9C;
        border-collapse: collapse;
        margin: 10px 20px 10px 20px;
        clear:both;
        }
table.wikiRight tr:first-child {
        background-color:#DDD;
        border-bottom:2px solid #333;
}
table.wikiRight td {
        border-left:1px dotted #9e9e9e;
        border-right:1px dotted #9e9e9e;
        border-top:1px dotted #9e9e9e;
        border-bottom:1px dotted #9e9e9e;
        padding:2px .6em 2px .6em ;
}

/* for left aligned table */
table.wikiLeft {
        background-color: #FFF;
        float:left;
        display:block;
        font-size:1em;
        margin: 10px 20px 10px 0;
        }
table.caption {
        background-color: #FFF;
}

table.wikiLeft tr:first-child {
        background-color:#DDD;
        border-bottom:2px solid #333;
}

table.wikiLeft td {
        vertical-align:top;
        border-left:1px dotted #9e9e9e;
        border-right:1px dotted #9e9e9e;
        border-top:1px dotted #9e9e9e;
        border-bottom:1px dotted #9e9e9e;
        padding:2px .6em 2px .6em ;
}

/* for center aligned table */
table.wikiCenter {
        background-color: #FFF;
        border-color: #9C9C9C;
        border-collapse: collapse;
        margin: 10px 0 10px 0;
        margin-left: auto;
        margin-right: auto;
        clear:both;
        }
table.wikiCenter tr:first-child {
        background-color:#DDD;
        border-bottom:2px solid #333;
}
table.wikiCenter td {
        border-left:1px dotted #9e9e9e;
        border-right:1px dotted #9e9e9e;
        border-top:1px dotted #9e9e9e;
        border-bottom:1px dotted #9e9e9e;
        padding:2px .6em 2px .6em ;
}

/* generic table caption class */
table.caption {
        background-color: #FFF;
}

xxx

Then, in a wiki document (edit mode), you may aign one of the above class to the table like the below.
||Table Caption|<table class="wikiRight">||||'''Table Header'''||
|| a || b || c ||
|| d || e || f ||

Table Caption
Right aligned table header
a b c
d e f


For a left aligned table,
|Table Caption|<table class="wikiLeft">|||| '''Left aligned table header''' ||
|| a || b || c ||
|| d || e || f ||
Table Caption
Left aligned table header
a b c
d e f


For a center aligned table,
|Table Caption|<table class="wikiCenter">|||| '''Center aligned table header''' ||
|| a || b || c ||
|| d || e || f ||
Table Caption
Center aligned table header
a b c
d e f





Valid XHTML 1.0! Valid CSS! powered by MoniWiki
last modified 2014-03-19 13:52:35
Processing time 0.0134 sec