====== Extended Table Syntax ======

===== Ex. 0: extended =====
 
including some of [[doku>wiki:dokuwiki|DokuWiki]]'s Syntax

The "zero" Example from Eric-Sebastien (from page [[doku>users:wflamme:exttab1]]:

<exttab1>
{| width=80% align=center
|align=center|[[wiki:page|{{wiki:dokuwiki-128.png}}]]
|}
</exttab1>

  {| width=80% align=center
  |align=center|[[wiki:page|{{wiki:dokuwiki-128.png}}]]
  |}

----

The other examples are taken from [[http://www.mediawiki.org/wiki/Help:Tables]]

===== Ex. 1: Plain =====

<exttab1>
{|
|Orange
|Apple
|-
|Bread
|Pie
|-
|Butter
|Ice cream 
|}
</exttab1>

  {|
  |Orange
  |Apple
  |-
  |Bread
  |Pie
  |-
  |Butter
  |Ice cream 
  |}

----

===== Ex. 2: Alternative =====

<exttab1>
{|
|  Orange    ||   Apple   ||   more
|-
|   Bread    ||   Pie     ||   more
|-
|   Butter   || Ice cream ||  and more
|}
</exttab1>

  {|
  |  Orange    ||   Apple   ||   more
  |-
  |   Bread    ||   Pie     ||   more
  |-
  |   Butter   || Ice cream ||  and more
  |}

----

===== with HTML attributes =====

==== Ex. 3 ====

<exttab1>
{| border="1"
|Orange
|Apple
|-
|Bread
|Pie
|-
|Butter
|Ice cream 
|}
</exttab1>

  {| border="1"
  |Orange
  |Apple
  |-
  |Bread
  |Pie
  |-
  |Butter
  |Ice cream 
  |}

----

==== Ex. 4 ====

<exttab1>
{| align="center" border="1"
|Orange
|Apple
|-
|Bread
|Pie
|-
|Butter
|Ice cream 
|}
</exttab1>

  {| align="center" border="1"
  |Orange
  |Apple
  |-
  |Bread
  |Pie
  |-
  |Butter
  |Ice cream 
  |}

----

==== Ex. 5 ====

<exttab1>
{| border="1"
|Orange
|Apple
|align="right"|12,333.00
|-
|Bread
|Pie
|align="right"|500.00
|-
|Butter
|Ice cream
|align="right"|1.00
|}
</exttab1>

  {| border="1"
  |Orange
  |Apple
  |align="right"|12,333.00
  |-
  |Bread
  |Pie
  |align="right"|500.00
  |-
  |Butter
  |Ice cream
  |align="right"|1.00
  |}

----

==== Ex. 6 ====

for single lines

<exttab1>
{| border="1"
|Orange
|Apple
|align="right"|12,333.00
|-
|Bread
|Pie
|align="right"|500.00
|- style="font-style:italic;color:green;"
|Butter
|Ice cream
|align="right"|1.00
|}
</exttab1>

  {| border="1"
  |Orange
  |Apple
  |align="right"|12,333.00
  |-
  |Bread
  |Pie
  |align="right"|500.00
  |- style="font-style:italic;color:green;"
  |Butter
  |Ice cream
  |align="right"|1.00
  |}

----

==== Ex. 7 ====

<exttab1>
{| cellspacing="0" border="1"
|Orange
|Apple
|-
|Bread
|Pie
|-
|Butter
|Ice cream 
|}
</exttab1>

  {| cellspacing="0" border="1"
  |Orange
  |Apple
  |-
  |Bread
  |Pie
  |-
  |Butter
  |Ice cream 
  |}

----

==== Ex. 8 ====

<exttab1>
{| cellpadding="20" cellspacing="0" border="1"
|Orange
|Apple
|-
|Bread
|Pie
|-
|Butter
|Ice cream 
|}
</exttab1>

  {| cellpadding="20" cellspacing="0" border="1"
  |Orange
  |Apple
  |-
  |Bread
  |Pie
  |-
  |Butter
  |Ice cream 
  |}

----

===== with HTML attributes and CSS styles =====

==== Ex. 9 ====

<exttab1>
{| style="color:green;background-color:#ffffcc;" cellpadding="20" cellspacing="0" border="1"
|Orange
|Apple
|-
|Bread
|Pie
|-
|Butter
|Ice cream 
|}
</exttab1>

  {| style="color:green;background-color:#ffffcc;" cellpadding="20" cellspacing="0" border="1"
  |Orange
  |Apple
  |-
  |Bread
  |Pie
  |-
  |Butter
  |Ice cream 
  |}

----

===== table with TH headings =====

==== Ex. 10 ====

any column

<exttab1>
{| border="1" cellpadding="20" cellspacing="0"
!Yummy
!Yummier
|-
|Orange
|Apple
|-
|Bread
|Pie
|-
|Butter
|Ice cream 
|}
</exttab1>

  {| border="1" cellpadding="20" cellspacing="0"
  !Yummy
  !Yummier
  |-
  |Orange
  |Apple
  |-
  |Bread
  |Pie
  |-
  |Butter
  |Ice cream 
  |}

----

==== Ex. 11 ====

<exttab1>
{| border="1" cellpadding="20" cellspacing="0"
! colspan="2"|Yummies
|-
|Orange
|Apple
|-
|Bread
|Pie
|-
|Butter
|Ice cream 
|}
</exttab1>

  {| border="1" cellpadding="20" cellspacing="0"
  ! colspan="2"|Yummies
  |-
  |Orange
  |Apple
  |-
  |Bread
  |Pie
  |-
  |Butter
  |Ice cream 
  |}

----

==== Ex. 12 ====

heading per line

<exttab1>
{| border="1" cellpadding="20" cellspacing="0"
!Fruit
|Orange
|Apple
|-
!Dish
|Bread
|Pie
|-
!Complement
|Butter
|Ice cream 
|}
</exttab1>

  {| border="1" cellpadding="20" cellspacing="0"
  !Fruit
  |Orange
  |Apple
  |-
  !Dish
  |Bread
  |Pie
  |-
  !Complement
  |Butter
  |Ice cream 
  |}

----

==== Ex. 12 ====

heading per lign, aligned right

<exttab1>
{| border="1" cellpadding="20" cellspacing="0"
!align="right" |Fruit
|Orange
|Apple
|-
!align="right" |Dish
|Bread
|Pie
|-
!align="right" |Complement
|Butter
|Ice cream 
|}
</exttab1>

  {| border="1" cellpadding="20" cellspacing="0"
  !align="right" |Fruit
  |Orange
  |Apple
  |-
  !align="right" |Dish
  |Bread
  |Pie
  |-
  !align="right" |Complement
  |Butter
  |Ice cream 
  |}

----

===== table with caption =====

==== Ex. 13 ====

standard: caption above the table

<exttab1>
{| border="1" cellpadding="20" cellspacing="0"
|+Food complements
|-
|Orange
|Apple
|-
|Bread
|Pie
|-
|Butter
|Ice cream 
|}
</exttab1>

  {| border="1" cellpadding="20" cellspacing="0"
  |+Food complements
  |-
  |Orange
  |Apple
  |-
  |Bread
  |Pie
  |-
  |Butter
  |Ice cream 
  |}

----

==== Ex. 14 ====

extended: caption under the table

<exttab1>
{| border="1" cellpadding="20" cellspacing="0"
|+align="bottom" style="color:#e76700;"|''Food complements''
|-
|Orange
|Apple
|-
|Bread
|Pie
|-
|Butter
|Ice cream 
|}
</exttab1>

  {| border="1" cellpadding="20" cellspacing="0"
  |+align="bottom" style="color:#e76700;"|''Food complements''
  |-
  |Orange
  |Apple
  |-
  |Bread
  |Pie
  |-
  |Butter
  |Ice cream 
  |}

----

===== some final words =====

Here I stop (for now?) -- if I try to put H1...H6 into the tables, the formatting chaos will overwhelm me ;-). Hunting for the correct nesting of HR, TD, and CAPTION tags was quite a game... Maybe the fact that the alignment does not always work correct is caused by the template. Following the produced code it should be aligned correctly :-/

Anyone please feel free to modify the code -- and please tell me what and why you did so that I can be happy about these modifications in my own wiki ;-)