Revision history for TableMarkup


Revision [2499]

Last edited on 2020-04-19 07:02:51 by WikkaInstaller [Upgrading from 1.2 to 1.4.2]
Additions:
~-For earlier Wikka versions, check the [[Docs:TableActionInfo | table]] action
~-Updated versions of this page can be found on the [[Docs:TableMarkup | Wikka documentation server]]
~-For a more formal description, check the document server [[Docs:TableMarkupReference TableMarkupReference]] page.
[[TableMarkupReference | attribute parameters]]:
You can use any kind of basic [[Docs:TextFormatting | Wikka markup]] to render text within tables.
Simple, content-generating [[Docs:UsingActions | actions]] (including
[[Docs:AddingImages | images]]) can be added within table cells and headings.
All the available options to create [[Docs:AddingLinks | links]] can be used within table cells or headings:
##""||Forced links: [[HomePage | main]]||""##
##""||Forced interwiki links: [[Wikipedia:Wikka | Wikka article on Wikipedia]]||""##
##""||Forced external links: [[http://www.example.com | Example.com]]||""##
||Forced links: [[HomePage | main]]||
||Forced interwiki links: [[Wikipedia:Wikka | Wikka article on Wikipedia]]||
||Forced external links: [[http://www.example.com | Example.com]]||
You can also use [[Docs:UsingHTML | embedded HTML]] in table elements:
The table markup introduces a new [[TableMarkupReference | style selector]]. CSS style options can be added to any element by enclosing them within **single braces**, right before the element content, e.g.:
[[TableMarkupReference | table markup reference]]):
Deletions:
~-For earlier Wikka versions, check the [[Docs:TableActionInfo | | table]] action
~-Updated versions of this page can be found on the [[Docs:TableMarkup | | Wikka documentation server]]
~-For a more formal description, check the document server [[Docs:TableMarkupReference | TableMarkupReference]] page.
[[TableMarkupReference | | attribute parameters]]:
You can use any kind of basic [[Docs:TextFormatting | | Wikka markup]] to render text within tables.
Simple, content-generating [[Docs:UsingActions | | actions]] (including
[[Docs:AddingImages | | images]]) can be added within table cells and headings.
All the available options to create [[Docs:AddingLinks | | links]] can be used within table cells or headings:
##""||Forced links: [[HomePage | | main]]||""##
##""||Forced interwiki links: [[Wikipedia:Wikka | | Wikka article on Wikipedia]]||""##
##""||Forced external links: [[http://www.example.com | | Example.com]]||""##
||Forced links: [[HomePage | | main]]||
||Forced interwiki links: [[Wikipedia:Wikka | | Wikka article on Wikipedia]]||
||Forced external links: [[http://www.example.com | | Example.com]]||
You can also use [[Docs:UsingHTML | | embedded HTML]] in table elements:
The table markup introduces a new [[TableMarkupReference | | style selector]]. CSS style options can be added to any element by enclosing them within **single braces**, right before the element content, e.g.:
[[TableMarkupReference | | table markup reference]]):

Revision [2472]

Edited on 2019-09-02 18:16:33 by WikkaInstaller [Upgrading from 1.1.7-docs to master]
Additions:
~-For earlier Wikka versions, check the [[Docs:TableActionInfo | | table]] action
~-Updated versions of this page can be found on the [[Docs:TableMarkup | | Wikka documentation server]]
~-For a more formal description, check the document server [[Docs:TableMarkupReference | TableMarkupReference]] page.
>>
As of ##1.2##, Wikka introduces a flexible markup for data tables. Any kind of tables allowed by XHTML can be created using this markup, from the most basic examples (e.g. simple rows of cells) to complex tables with full support for accessibility options.::c::
**Spans** are used to combine multiple cells or multiple headings
vertically or horizontally and are created using the following
[[TableMarkupReference | | attribute parameters]]:
You can use any kind of basic [[Docs:TextFormatting | | Wikka markup]] to render text within tables.
Simple, content-generating [[Docs:UsingActions | | actions]] (including
[[Docs:AddingImages | | images]]) can be added within table cells and headings.
##""||{{image url="images/wikka_logo.jpg" class="center" alt="a w" title="w image"}}||""##
||{{image url="images/wikka_logo.jpg" class="center" alt="a w" title="w image"}}||
All the available options to create [[Docs:AddingLinks | | links]] can be used within table cells or headings:
##""||Forced links: [[HomePage | | main]]||""##
##""||Forced interwiki links: [[Wikipedia:Wikka | | Wikka article on Wikipedia]]||""##
##""||Forced external links: [[http://www.example.com | | Example.com]]||""##
##""||Image links: {{image url="images/wizard.gif" alt="wizard" title="Display an index of pages on this wiki" link="PageIndex"}}||""##
||Forced links: [[HomePage | | main]]||
||Forced interwiki links: [[Wikipedia:Wikka | | Wikka article on Wikipedia]]||
||Forced external links: [[http://www.example.com | | Example.com]]||
||Image links: {{image url="images/wizard.gif" alt="wizard" title="Display an index of pages on this wiki" link="PageIndex"}}||
You can also use [[Docs:UsingHTML | | embedded HTML]] in table elements:
The table markup introduces a new [[TableMarkupReference | | style selector]]. CSS style options can be added to any element by enclosing them within **single braces**, right before the element content, e.g.:
Please note that **style parameters should always follow attribute
parameters**, when both are specified for an element (see the
[[TableMarkupReference | | table markup reference]]):
The following example applies to table cells two class selectors defined in the stylesheet. The third row shows how to override a class selector with custom style attributes:
CategoryWiki
Deletions:
~-For earlier Wikka versions, check the [[TableActionInfo | table]] action
~-For a more formal description, check the [[TableMarkupReference | Wikka Table Markup Reference]].
>>{{since version="1.2" align="left"}}::c::
As of ##1.2##, Wikka introduces a flexible markup for data tables. Any kind of tables allowed by XHTML can be created using this markup, from the most basic examples (e.g. simple rows of cells) to complex tables with full support for accessibility options.
**Spans** are used to combine multiple cells or multiple headings vertically or horizontally and are created using the following [[TableMarkupReference | attribute parameters]]:
You can use any kind of basic [[TextFormatting | Wikka markup]] to render text within tables.
Simple, content-generating [[UsingActions | actions]] (including [[AddingImages | images]]) can be added within table cells and headings.
##""||{{image url="images/ww.jpg" class="center" alt="a w" title="w image"}}||""##
||{{image url="images/ww.jpg" class="center" alt="a w" title="w image"}}||
All the available options to create [[AddingLinks | links]] can be used within table cells or headings:
##""||Forced links: [[HomePage | main]]||""##
##""||Forced interwiki links: [[Wikipedia:Wikka | Wikka article on Wikipedia]]||""##
##""||Forced external links: [[http://www.example.com | Example.com]]||""##
##""||Image links: {{image url="images/icons/open.png" alt="book icon" title="Display an index of pages on this wiki" link="PageIndex"}}||""##
||Forced links: [[HomePage | main]]||
||Forced interwiki links: [[Wikipedia:Wikka | Wikka article on Wikipedia]]||
||Forced external links: [[http://www.example.com | Example.com]]||
||Image links: {{image url="images/icons/open.png" alt="book icon" title="Display an index of pages on this wiki" link="PageIndex"}}||
You can also use [[UsingHTML | embedded HTML]] in table elements:
The table markup introduces a [[TableMarkupReference | style selector]] that will be progressively extended to any other Wikka markup. CSS style options can be added to any element by enclosing them within **single braces**, right before the element content, e.g.:
Please note that **style parameters should always follow attribute parameters**, when both are specified for an element (see the [[TableMarkupReference | table markup reference]]):
The following example adds two classes defined in the [[css/wikka.css | default stylesheet]] to table cells. The third row shows how to override a class selector with custom style attributes:
CategoryEN

Revision [2400]

Edited on 2016-05-12 20:03:10 by BrianKoontz [Updated with another row span example; ref 1206]
Additions:
Note that you must account for cells that are "pushed down" when using row spans:
##""|=| |=|Mon|=|Tue|=|Wed|=|Thu|=|Fri|=|""##
##""|=|8-9 || ||(y:9) Outreach|| ||(y:9) Outreach|| ||""##
##""|=|9-10 || || || ||""## <-- reduced by two columns
##""|=|10-11|| || || ||""##
##""|=|11-12|| || || ||""##
##""|=|12-1 || || || ||""##
##""|=|1-2 || || || ||""##
##""|=|2-3 ||(y:3) CSCI 102 ||CSCI 101||CSCI 101||""##
##""|=|3-4 || || ||""## <-- reduced by one column
##""|=|4-5 || || ||""##
|=| |=|Mon|=|Tue|=|Wed|=|Thu|=|Fri|=|
|=|8-9 || ||(y:9) Outreach|| ||(y:9) Outreach|| ||
|=|9-10 || || || ||
|=|10-11|| || || ||
|=|11-12|| || || ||
|=|12-1 || || || ||
|=|1-2 || || || ||
|=|2-3 ||(y:3) CSCI 102 ||CSCI 101||CSCI 101||
|=|3-4 || || ||
|=|4-5 || || ||

Revision [2120]

Edited on 2009-09-04 02:47:45 by DarTar [removing tbc mark]
Additions:
~-For earlier Wikka versions, check the [[TableActionInfo | table]] action
Deletions:
~-For earlier Wikka versions, check the [[TableActionInfo table]] action
{{color bg="#F00" fg="#FFF" text="——————TO BE CONTINUED——————"}}

Revision [1948]

Edited on 2009-02-28 11:16:01 by DarTar [1.1.7->1.2]
Additions:
~-For earlier Wikka versions, check the [[TableActionInfo table]] action
As of ##1.2##, Wikka introduces a flexible markup for data tables. Any kind of tables allowed by XHTML can be created using this markup, from the most basic examples (e.g. simple rows of cells) to complex tables with full support for accessibility options.
Deletions:
~-For earlier Wikka versions, check the [[TableActionInfo | table]] action
As of ##1.1.7##, Wikka introduces a flexible markup for data tables. Any kind of tables allowed by XHTML can be created using this markup, from the most basic examples (e.g. simple rows of cells) to complex tables with full support for accessibility options.

Revision [1936]

Edited on 2009-02-28 07:52:06 by DarTar [1.1.7->1.2]
Additions:
>>{{since version="1.2" align="left"}}::c::
Deletions:
>>{{since version="1.1.7" align="left"}}::c::

Revision [1835]

Edited on 2009-01-31 02:04:48 by DarTar [Removed carriage return]

No Differences

Revision [1276]

Edited on 2008-11-01 23:23:06 by DarTar [Removed HomePage link]
Additions:
~-For earlier Wikka versions, check the [[TableActionInfo | table]] action
Deletions:
HomePage
~-For earlier Wikka versions, check the [[TableActionInfo table]] action

Revision [540]

Edited on 2008-01-30 15:45:22 by DarTar [link to table action]
Additions:
~-For earlier Wikka versions, check the [[TableActionInfo table]] action

Revision [454]

Edited on 2007-06-29 13:47:38 by DarTar [adding version infobox]
Additions:
>>{{since version="1.1.7" align="left"}}::c::
Deletions:
>>::c::

Revision [448]

Edited on 2007-02-08 08:28:07 by DarTar [minor]
Additions:
~-For a more formal description, check the [[TableMarkupReference | Wikka Table Markup Reference]].
Deletions:
~-[[TableMarkupReference | Wikka Table Markup Reference]]

Revision [444]

Edited on 2007-02-08 08:13:46 by DarTar [adding reference links]
Additions:
The most basic element of a table is a **cell**. Single cells can be created using the standard delimiter ##""||""##, e.g.:
**Row headings** are created in the same way. Since they are usually followed by normal cells, they must be terminated with the ##""||""## standard delimiter if the next element in the row is a simple cell:
Usually tables are introduced with a caption that describes what the table contains. A caption element is introduced with a ##""|?|""## delimiter and terminated with a standard delimiter ##""||""##.
**Spans** are used to combine multiple cells or multiple headings vertically or horizontally and are created using the following [[TableMarkupReference | attribute parameters]]:
You can also use [[UsingHTML | embedded HTML]] in table elements:
The table markup introduces a [[TableMarkupReference | style selector]] that will be progressively extended to any other Wikka markup. CSS style options can be added to any element by enclosing them within **single braces**, right before the element content, e.g.:
Please note that **style parameters should always follow attribute parameters**, when both are specified for an element (see the [[TableMarkupReference | table markup reference]]):
You can apply existing classes from your stylesheet to any element using the class parameter ##(c:''class'')##. Note that custom style declarations specified through braced markup override class attributes.
Deletions:
The most basic element of a table is a **cell**. Single cells can be created using ##""||""## as delimiters, e.g.:
**Row headings** are created in the same way. Since they are usually followed by normal cells, they must be terminated with the ##""||""## delimiter if the next element in the row is a simple cell:
Usually tables are introduced with a caption that describes what the table contains. A caption element is introduced with a ##""|?|""## delimiter and terminated with a standard cell delimiter ##""||""##.
**Spans** are used to combine multiple cells or multiple headings vertically or horizontally and are created using **bracketed markup**:
You can also use embedded HTML in table elements:
The table markup introduces a style selector that will be progressively extended to any other Wikka markup. CSS style options can be added to any element by enclosing them within **single braces**, right before the element content, e.g.:
Please note that **braced markup should always follow bracketed markup**, when both are specified for an element:
You can apply existing classes from your stylesheet to any element using the class parameter ##(c:''class'')##. Style specified through braced markup overrides class attributes.

Revision [442]

Edited on 2007-02-08 07:57:58 by DarTar [link to reference page]
Additions:
>>==See also:==
~-[[TableMarkupReference | Wikka Table Markup Reference]]
>>::c::

Revision [439]

Edited on 2007-02-08 07:27:48 by DarTar [moving reference to seperate page]
Deletions:
====X. Table Markup Summary====
|!|{width: 80%}||
|?|Table Elements||
|=|""XHTML Elements""|=|Markup code|=|Notes||
||##<table>##||##""|!|""##||Optional, only useful for adding attributes. **Must** be first in table markup if used. Should be on a line by itself.||
||##<caption>##||##""|?|""##||||
||##<colgroup>##||##""|_|""##||||
||##<col />##||##""|-|""##||Selfclosing - must not be closed!||
||##<thead>##||##""|[|""##||||
||##<tfoot>##||##""|]|""##||||
||##<tbody>##||##""|#|""##||||
||##<tr>##||none||Will be opened for each row of table cells.||
||##<th>##||##""|=|""##||||
||##<td>##||##""||""##||||
|?|Table Attributes||
|=|Attribute|=|Markup key||
|=|Attribute|=|Markup key||
|=|(x:2)Core||
||##id##||##i##||
||##title##||##t##||
||##class##||##c##||
||##style##||##s##||
|=|(x:2)i18n||
||##xml:lang##||##l##||
||##dir##||##d##||
|=|(x:2)Table cells||
||##colspan##||##x##||
||##rowspan##||##y##||
||##scope##||##o##||
||##headers##||##h##||
||##abbr##||##a##||
||##axis##||##z##||
|=|(x:2)Other Table elements||
||##span##||##p##||
||##summary##||##u##||

Revision [438]

Edited on 2007-02-08 07:25:14 by DarTar [minor]
Additions:
##""||""(''span options'')Element content""||""##
Deletions:
##""||(span options)Element content||""##

Revision [437]

Edited on 2007-02-08 05:51:42 by DarTar [minor]
Additions:
{{color bg="#F00" fg="#FFF" text="——————TO BE CONTINUED——————"}}
Deletions:
{{color bg="#F00" fg="#FFF" text="--------------------------TO BE CONTINUED----------------------"}}=====

Revision [436]

Edited on 2007-02-08 05:47:16 by DarTar [classes]
Additions:
====10. Adding style through classes====
You can apply existing classes from your stylesheet to any element using the class parameter ##(c:''class'')##. Style specified through braced markup overrides class attributes.
The following example adds two classes defined in the [[css/wikka.css | default stylesheet]] to table cells. The third row shows how to override a class selector with custom style attributes:
##""|?|Using class selectors to add style to table elements||""##
##""||(c:highlight)This cell uses the ##.highlight## class||""##
##""||(c:smaller)This cell uses the ##.smaller## class||""##
##""||(c:smaller){font-size:150%}This cell uses the ##.smaller## class overridden by custom style settings||""##
|?|Using class selectors to add style to table elements||
||(c:highlight)This cell uses the ##.highlight## class||
||(c:smaller)This cell uses the ##.smaller## class||
||(c:smaller){font-size:150%}This cell uses a ##.smaller## class overridden by custom style settings||
====11. Global table attributes====
====12. Referring to elements: the ##id## attribute====
====13. Accessibility options: adding titles====
====14. Accessibility options: adding a summary====
====15. Accessibility options: table head, table body and table foot====
====16. Accessibility options: heading scope====
Deletions:
====10. Global table attributes====
====11. Referring to elements: the ##id## attribute====
====12. Accessibility options: adding titles====
====13. Accessibility options: adding a summary====
====14. Accessibility options: table head, table body and table foot====
====15. Accessibility options: heading scope====

Revision [435]

Edited on 2007-02-08 05:06:52 by DarTar [row/col scopes and titles]
Additions:
##id## attributes are used to refer to unique elements in a page and to provide an anchor for styling and linking. You can specify an ##id## for any table element by using the ##(i:''id'')## parameter.
For example, the following markup creates a table with the ##id## "main_table" containing two cells with ##id##'s "cell_1" and "cell_2"
====12. Accessibility options: adding titles====
Any table element can be given a ##title## attribute to enhance its accessibility. Titles are typically displayed in graphical browsers by hovering over the corresponding element and are useful to display unobtrusive descriptions about specific elements. You can specify a ##title## for any table element by using the ##(t:''title'')## parameter.
The following example adds titles to several table elements (you can hover over the table to display them):
##""|!|(t:Comparative figures for fruit production in the last year){width: 350px}||""##
##""|=| |=|(t:yearly production of apples)Apples|=|(t:yearly production of pears)Pears|=|""##
##""|=|(t:Mary's contribution to 2006 production)Mary||(t:Mary's production of apples in 2006){text-align:center}300Kg||(t:Mary's production of pears in 2006){text-align:center}320Kg||""##
##""|=|(t:John's contribution to 2006 production)John||(t:John's production of apples in 2006){text-align:center}400Kg||(t:John's production of pears in 2006){text-align:center}630Kg||""##
|!|(t:Comparative figures for fruit production in the last year){width: 350px}||
|=| |=|(t:yearly production of apples)Apples|=|(t:yearly production of pears)Pears|=|
|=|(t:Mary's contribution to 2006 production)Mary||(t:Mary's production of apples in 2006){text-align:center}300Kg||(t:Mary's production of pears in 2006){text-align:center}320Kg||
|=|(t:John's contribution to 2006 production)John||(t:John's production of apples in 2006){text-align:center}400Kg||(t:John's production of pears in 2006){text-align:center}630Kg||
====13. Accessibility options: adding a summary====
====14. Accessibility options: table head, table body and table foot====
====15. Accessibility options: heading scope====
To be semantically correct and accessible to users with non-visual browsers, headings should contain scope attributes describing the cell range they refer to.
~-Column heading scopes can be specified using the ##(o:col)## parameter in the corresponding column heading;
~-Row heading scopes can be specified using the ##(o:row)## parameter in the corresponding row heading;
The following example shows how to correctly add column and row scopes to a table to make it accessible:
Deletions:
##id## attributes are used to refer to unique elements in a page and to provide an anchor for styling and linking. You can specify an id for any table element by using the ##(i:''id'')## parameter.
For example, the following markup creates a table with id "main_table" containing two cells with id "cell_1" and "cell_2"
====12. Accessibility options: adding a summary====
====13. Accessibility options: table head, table body and table foot====
===Summary, caption and scope===
##""|!|(u:The Summary)||""##
##""|?|The Caption||""##
##""|=|(o:row)Name||John Smith||Jane Doe||""##
##""|=|(o:row)Number||1||2||""##
##""|=|(o:row;y:2)Span||This||That||""##
##""||That||This||""##
|!|(u:The Summary)||
|?|The Caption||
|=|(o:row)Name||John Smith||Jane Doe||
|=|(o:row)Number||1||2||
|=|(o:row;y:2)Span||This||That||
||That||This||
===Summary, caption and scope===

Revision [434]

Edited on 2007-02-08 04:41:48 by DarTar [minor]
Additions:
The table markup introduces a style selector that will be progressively extended to any other Wikka markup. CSS style options can be added to any element by enclosing them within **single braces**, right before the element content, e.g.:
##""||""{''style options''}Element content""||""##
Deletions:
The table markup introduces a style selector that will be progressively extended to any other Wikka markup. CSS style options can be added to any element by enclosing them within **single braces**, right before the element content, e.g.: ##""||""{''style options''}Element content""||""##

Revision [433]

Edited on 2007-02-08 04:41:06 by DarTar [minor]
Additions:
The table markup introduces a style selector that will be progressively extended to any other Wikka markup. CSS style options can be added to any element by enclosing them within **single braces**, right before the element content, e.g.: ##""||""{''style options''}Element content""||""##
Deletions:
The table markup introduces a style selector that will be progressively extended to any other Wikka markup. CSS style options can be added to any element by enclosing them within **single braces**, right before the element content, e.g.:
##""||{style options}Element content||""##

Revision [432]

Edited on 2007-02-08 04:38:19 by DarTar [minor]
Additions:
A **cell spanning multiple columns** is generated by prefixing the cell content with a ##(x:''n'')## parameter, where ##''n''## is the number of columns to be spanned. The following example shows how to create a cell spanning two columns:
Spans can also be applied to rows. A **cell spanning multiple rows** is generated by prefixing the cell content with a ##(y:''n'')## parameter, where ##''n''## is the number of rows to be spanned. The following example shows how to create a cell spanning two rows:
Deletions:
A **cell spanning multiple columns** is generated by prefixing the cell content with a ##""(x:n)""## parameter, where ##n## is the number of columns to be spanned. The following example shows how to create a cell spanning two columns:
Spans can also be applied to rows. A **cell spanning multiple rows** is generated by prefixing the cell content with a ##""(y:n)""## parameter, where ##n## is the number of rows to be spanned. The following example shows how to create a cell spanning two rows:

Revision [431]

Edited on 2007-02-08 04:37:06 by DarTar [minor]
Additions:
##id## attributes are used to refer to unique elements in a page and to provide an anchor for styling and linking. You can specify an id for any table element by using the ##(i:''id'')## parameter.
Deletions:
##id## attributes are used to refer to unique elements in a page and to provide an anchor for styling and linking. You can specify an id for any table element by using a ##(i:''id'')## parameter.

Revision [430]

Edited on 2007-02-08 04:36:18 by DarTar [minor]
Additions:
You can also use embedded HTML in table elements:
##id## attributes are used to refer to unique elements in a page and to provide an anchor for styling and linking. You can specify an id for any table element by using a ##(i:''id'')## parameter.
Tables can take an optional ##summary## attribute to describe the purpose and/or structure of the table. The description provided by the summary attribute is particularly helpful to users of non-visual browsers. You can specify a summary by adding a ##(u:''Summary'')## parameter in the table global attributes.
Deletions:
You can also use embedded HTML in table cells:
##id## attributes are used to refer to unique elements in a page and to provide an anchor for styling and linking. You can specify an id for any table element by using a ##(i:id)## parameter.
Tables can take an optional ##summary## attribute to describe the purpose and/or structure of the table. The description provided by the summary attribute is particularly helpful to users of non-visual browsers. You can specify a summary by adding a ##(u:Summary)## parameter in the table global attributes.

Revision [429]

Edited on 2007-02-08 04:33:45 by DarTar [adding documentation on id attributes]
Additions:
The table markup introduces a style selector that will be progressively extended to any other Wikka markup. CSS style options can be added to any element by enclosing them within **single braces**, right before the element content, e.g.:
Deletions:
The table markup introduces a style markup that will be progressively extended to any other Wikka markup. CSS style options can be added to any element by enclosing them within single braces, right before the element content, e.g.:

Revision [428]

Edited on 2007-02-07 17:47:32 by DarTar [adding documentation on id attributes]
Additions:
##""|!|(u:A table with summary, caption, head, foot and body){width: 400px}||""##
|!|(u:A table with summary, caption, head, foot and body){width: 400px}||
|!|{width: 80%}||
Deletions:
##""|!|(u:A table with summary, caption, head, foot and body){width: 80%}||""##
|!|(u:A table with summary, caption, head, foot and body){width: 80%}||

Revision [427]

Edited on 2007-02-07 17:44:55 by DarTar [adding documentation on id attributes]
Additions:
##""|!|(u:A table with summary, caption, head, foot and body){width: 80%}||""##
|!|(u:A table with summary, caption, head, foot and body){width: 80%}||
Deletions:
##""|!|(u:A table with summary, caption, head, foot and body)||""##
|!|(u:A table with summary, caption, head, foot and body)||

Revision [426]

Edited on 2007-02-07 17:43:42 by DarTar [adding documentation on id attributes]
Additions:
##""|!|{border:3px solid blue; background-color: black; color: white; width: 300px; text-align: center}||""##
|!|{border:3px solid blue; background-color: black; color: white; width: 300px; text-align: center}||
Deletions:
##""|!|{background-color: black; color: white; width: 300px; text-align: center}||""##
|!|{border:1px solid #00FF00; background-color: black; color: white; width: 300px; text-align: center}||

Revision [425]

Edited on 2007-02-07 17:42:10 by DarTar [adding documentation on id attributes]
Additions:
##""|?|{border:1px dotted red; color:red}Style can be applied anywhere||""##
|?|{border:1px dotted red; color:red}Style can be applied anywhere||
|!|{border:1px solid #00FF00; background-color: black; color: white; width: 300px; text-align: center}||
Deletions:
##""|?|{border:1px solid red; color:red}Style can be applied anywhere||""##
|?|{border:1px solid red; color:red}Style can be applied anywhere||
|!|{background-color: black; color: white; width: 300px; text-align: center}||

Revision [424]

Edited on 2007-02-07 17:38:37 by DarTar [adding documentation on id attributes]
Additions:
====11. Referring to elements: the ##id## attribute====
Deletions:
====11. Referring to elements: using the ##id## attribute====

Revision [423]

Edited on 2007-02-07 17:37:43 by DarTar [adding documentation on id attributes]
Additions:
~- The ##""|[|""## marker groups the rows it precedes as a **table head** block;
~- The ##""|]|""## marker groups the rows it precedes as a **table foot** block;
~- The ##""|#|""## marker groups the rows it precedes as a **table body**;
Deletions:
~- The ##""|[|""## marker groups the rows it precedes as a table head block;
~- The ##""|]|""## marker groups the rows it precedes as a table foot block;
~- The ##""|#|""## marker groups the rows it precedes as the table body;

Revision [422]

Edited on 2007-02-07 17:35:37 by DarTar [adding documentation on id attributes]
Additions:
====11. Referring to elements: using the ##id## attribute====
##id## attributes are used to refer to unique elements in a page and to provide an anchor for styling and linking. You can specify an id for any table element by using a ##(i:id)## parameter.
For example, the following markup creates a table with id "main_table" containing two cells with id "cell_1" and "cell_2"
##""|!|(i:main_table)||""##
##""|?|Using id to refer to table elements||""##
##""||(i:cell_1)This cell can be referred to by using the ##cell_1## id||""##
##""||(i:cell_2)This cell can be referred to by using the ##cell_2## id||""##
|!|(i:main_table)||
|?|Using id to refer to table elements||
||(i:cell_1)This cell can be referred to by using the ##cell_1## id||
||(i:cell_2)This cell can be referred to by using the ##cell_2## id||
====12. Accessibility options: adding a summary====
====13. Accessibility options: table head, table body and table foot====
The following example shows how to use these elements to create row groups. Note that Wikka uses different backgrounds to differentiate column headings in the table head and foot from row headings in the table body:
##""|=|John Smith||New York||555-1234||""##
##""|=|Jane Smith||Los Angeles||555-2345||""##
##""|=|John Doe||Unknown||Unknown||""##
##""|=|Jane Doe||Unknown||Unknown||""##
|=|John Smith||New York||555-1234||
|=|Jane Smith||Los Angeles||555-2345||
|=|John Doe||Unknown||Unknown||
|=|Jane Doe||Unknown||Unknown||
Deletions:
====11. Accessibility options: adding a summary====
====11. Accessibility options: table head, table body and table foot====
The following example shows how to use these elements to create row groups:
##""||John Smith||New York||555-1234||""##
##""||Jane Smith||Los Angeles||555-2345||""##
##""||John Doe||Unknown||Unknown||""##
##""||Jane Doe||Unknown||Unknown||""##
||John Smith||New York||555-1234||
||Jane Smith||Los Angeles||555-2345||
||John Doe||Unknown||Unknown||
||Jane Doe||Unknown||Unknown||

Revision [421]

Edited on 2007-02-07 17:24:08 by DarTar [adding docs for summary and row groups]
Additions:
~- The ##""|[|""## marker groups the rows it precedes as a table head block;
~- The ##""|]|""## marker groups the rows it precedes as a table foot block;
~- The ##""|#|""## marker groups the rows it precedes as the table body;
Deletions:
~- The ##""|[|""## marker groups the rows it preceds as a table head block;
~- The ##""|]|""## marker groups the rows it preceds as a table foot block;
~- The ##""|#|""## marker groups the rows it preceds as the table body;

Revision [420]

Edited on 2007-02-07 17:23:39 by DarTar [adding docs for summary and row groups]
Additions:
##""|?|Here's how you can group rows||""##
|?|Here's how you can group rows||
Deletions:
##""|?|Grouping rows in table head, body and foot||""##
|?|Grouping rows in table head, body and foot||

Revision [419]

Edited on 2007-02-07 17:22:34 by DarTar [adding docs for summary and row groups]
Additions:
Tables can take an optional ##summary## attribute to describe the purpose and/or structure of the table. The description provided by the summary attribute is particularly helpful to users of non-visual browsers. You can specify a summary by adding a ##(u:Summary)## parameter in the table global attributes.
Deletions:
Tables can take an optional ##summary## attribute to describe the purpose and/or structure of the table. The description provided by the summary attribute is particularly helpful to users of non-visual browsers. You can specify a summary by adding a ##(u:Summary)## parameter among the table global attributes.

Revision [418]

Edited on 2007-02-07 17:21:30 by DarTar [adding docs for summary and row groups]
Additions:
##""|!|{background-color: black; color: white; width: 300px; text-align: center}||""##
|!|{background-color: black; color: white; width: 300px; text-align: center}||
Deletions:
##""|!|{background-color: black; color: white; width; 300px; text-align: center}||""##
|!|{background-color: black; color: white; width; 300px; text-align: center}||

Revision [417]

Edited on 2007-02-07 17:20:49 by DarTar [adding docs for summary and row groups]
Additions:
====10. Global table attributes====
Table-level attributes can be specified by adding at the beginning of the table the following element: ##""|!| ||""##, which is used as a container for global table attributes. For example, you can specify **global style options** for a table by adding them to this element:
##""|!|{background-color: black; color: white; width; 300px; text-align: center}||""##
|!|{background-color: black; color: white; width; 300px; text-align: center}||
====11. Accessibility options: adding a summary====
Tables can take an optional ##summary## attribute to describe the purpose and/or structure of the table. The description provided by the summary attribute is particularly helpful to users of non-visual browsers. You can specify a summary by adding a ##(u:Summary)## parameter among the table global attributes.
For example, the following line:
##""|!|(u:This is a summary)||""##
will add to the table a ##summary## attribute with the value ##This is a summary##.
====11. Accessibility options: table head, table body and table foot====
Rows in a table can be grouped in a table head, table body and table foot. This division enables browsers to support scrolling of table bodies independently of the table head and foot. When long tables are printed, the table head and foot information may be repeated on each page that contains table data. The table head and table foot should contain information about the table's columns. The table body should contain rows of table data.
Wikka allows you to create groups of rows with special markers:
~- The ##""|[|""## marker groups the rows it preceds as a table head block;
~- The ##""|]|""## marker groups the rows it preceds as a table foot block;
~- The ##""|#|""## marker groups the rows it preceds as the table body;
The following example shows how to use these elements to create row groups:
##""|!|(u:A table with summary, caption, head, foot and body)||""##
##""|?|Grouping rows in table head, body and foot||""##
##""||Jane Smith||Los Angeles||555-2345||""##
|!|(u:A table with summary, caption, head, foot and body)||
|?|Grouping rows in table head, body and foot||
||Jane Smith||Los Angeles||555-2345||
Deletions:
===Summary and caption===
##""|=|Name|=|Number|=|(x:2)Span||""##
##""||John Smith||1||This||That||""##
##""||Jane Doe||2||That||This||""##
|=|Name|=|Number|=|(x:2)Span||
||John Smith||1||This||That||
||Jane Doe||2||That||This||
===Table header, body and footer===
##""|!|(u:A table with summary, caption, thead, tfoot and two tbody)||""##
##""|?|thead, tfoot, tbody, tbody||""##
##""||Jane Smith||Loa Angeles||555-2345||""##
|!|(u:A table with summary, caption, thead, tfoot and two tbody)||
|?|thead, tfoot, tbody, tbody||
||Jane Smith||Loa Angeles||555-2345||

Revision [416]

Edited on 2007-02-07 15:44:35 by DarTar [replacing image example]
Additions:
You can use any kind of basic [[TextFormatting | Wikka markup]] to render text within tables.
##""||{{image url="images/ww.jpg" class="center" alt="a w" title="w image"}}||""##
||{{image url="images/ww.jpg" class="center" alt="a w" title="w image"}}||
Deletions:
You can use any kind of basic [[TextFormatting Wikka markup]] to render text within tables.
##""||{{image url="images/ww.jpg" alt="a w" title="w image"}}||""##
||{{image url="images/ww.jpg" alt="a w" title="w image"}}||

Revision [415]

Edited on 2007-02-07 15:40:06 by DarTar [replacing image example]
Additions:
You can use any kind of basic [[TextFormatting Wikka markup]] to render text within tables.
##""||{{image url="images/ww.jpg" alt="a w" title="w image"}}||""##
||{{image url="images/ww.jpg" alt="a w" title="w image"}}||
Deletions:
You can use any kind of basic [[TextFormatting | Wikka markup]] to render text within tables.
##""||Feed: {{image url="images/xml.png" alt="xml" title="xml feed"}}||""##
||Feed: {{image url="images/xml.png" alt="xml" title="xml feed"}}||

Revision [413]

Edited on 2007-02-07 08:30:15 by DarTar [adding table markup summary]
Additions:
====X. Table Markup Summary====
|?|Table Elements||
|=|""XHTML Elements""|=|Markup code|=|Notes||
||##<table>##||##""|!|""##||Optional, only useful for adding attributes. **Must** be first in table markup if used. Should be on a line by itself.||
||##<caption>##||##""|?|""##||||
||##<colgroup>##||##""|_|""##||||
||##<col />##||##""|-|""##||Selfclosing - must not be closed!||
||##<thead>##||##""|[|""##||||
||##<tfoot>##||##""|]|""##||||
||##<tbody>##||##""|#|""##||||
||##<tr>##||none||Will be opened for each row of table cells.||
||##<th>##||##""|=|""##||||
||##<td>##||##""||""##||||
|?|Table Attributes||
|=|Attribute|=|Markup key||
|=|Attribute|=|Markup key||
|=|(x:2)Core||
||##id##||##i##||
||##title##||##t##||
||##class##||##c##||
||##style##||##s##||
|=|(x:2)i18n||
||##xml:lang##||##l##||
||##dir##||##d##||
|=|(x:2)Table cells||
||##colspan##||##x##||
||##rowspan##||##y##||
||##scope##||##o##||
||##headers##||##h##||
||##abbr##||##a##||
||##axis##||##z##||
|=|(x:2)Other Table elements||
||##span##||##p##||
||##summary##||##u##||

Revision [412]

Edited on 2007-02-07 06:31:09 by DarTar [style markup]
Additions:
**Spans** are used to combine multiple cells or multiple headings vertically or horizontally and are created using **bracketed markup**:
##""||(span options)Element content||""##
The table markup introduces a style markup that will be progressively extended to any other Wikka markup. CSS style options can be added to any element by enclosing them within single braces, right before the element content, e.g.:
##""||{style options}Element content||""##
##""|?|Adding some more style||""##
|?|Adding some more style||
##""|?|{border:1px solid red; color:red}Style can be applied anywhere||""##
|?|{border:1px solid red; color:red}Style can be applied anywhere||
##""|?|Give priority||""##
|?|Give priority||
Deletions:
**Spans** are used to combine multiple cells or multiple headings vertically or horizontally.
The table markup introduces a style markup that will be progressively extended to any other Wikka markup. CSS style options can be added to any element by enclosing them within braces, right before the element content.
##""|?|Adding some style||""##
|?|Adding some style||
##""|?|{border:1px solid red; color:red}Adding some style||""##
|?|{border:1px solid red; color:red}Adding some style||

Revision [411]

Edited on 2007-02-07 06:24:19 by DarTar [style markup]
Additions:
You can also apply style to **headings** and **captions**:
##""|?|{border:1px solid red; color:red}Adding some style||""##
##""|=|{color:#000; font-size:150%; font-style:italic; font-family:Georgia, Hoefler Text, Georgia, serif; font-weight:normal; line-height:150%}Emphemeral Quibus|=|""##
##""||Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis auctor auctor pede.||""##
|?|{border:1px solid red; color:red}Adding some style||
|=|{color:#000; font-size:150%; font-style:italic; font-family:Georgia, Hoefler Text, Georgia, serif; font-weight:normal; line-height:150%}Emphemeral Quibus|=|
||Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis auctor auctor pede.||
Please note that **braced markup should always follow bracketed markup**, when both are specified for an element:
CategoryEN
Deletions:
//This section to be moved at the end after the accessibility options//
##""|!|{float:right}||""##
|!|{float:right}||
::c::
===Styling with CSS selectors, 2===
##""|!|(i:Hello;u:What a gorgeous table!){float:left}||""##
##""|?|Ohi, ohi, ohi, ohi!||""##
##""|=|(x:4){color:#000;font-size:150%;font-style:italic;font-family:Hoefler Text, Georgia;font-weight:normal;line-height:150%}Ephemere Quibus||""##
##""|=|(x:2)First things first|=|(x:2)Second things second||""##
##""||##Mono##||A [[WikiHome | forced link]] and an escaped ""CamelCase"" link|| {{wikkaversion}} (action generated content)|| **##Bold mono##** ||""##
##""||//Italics//||===Heading===||++Strike++|| {{image url="http://wiki.tormodh.net/images/xml.png" alt="xml" title="xml feed"}}||""##
##""||%%echo "Even some code!"%%||""embedded<sup>html</sup>""||>>Hello>>||(i:moah){background:#000;text-align:center;color:white}testme||""##
|!|(i:Hello;u:What a gorgeous table!){float:left}||
|?|Ohi, ohi, ohi, ohi!||
|=|(x:4){color:#000;font-size:150%;font-style:italic;font-family:Hoefler Text, Georgia;font-weight:normal;line-height:150%}Ephemere Quibus||
|=|(x:2)First things first|=|(x:2)Second things second||
||##Mono##||A [[WikiHome | forced link]] and an escaped ""CamelCase"" link|| {{wikkaversion}} (action generated content)|| **##Bold mono##** ||
||//Italics//||===Heading===||++Strike++|| {{image url="http://wiki.tormodh.net/images/xml.png" alt="xml" title="xml feed"}}||
||%%echo "Even some code!"%%||""embedded<sup>html</sup>""||>>Hello>>||(i:moah){background:#000;text-align:center;color:white}testme||
::c::
===Wikka markup within cells===
##""||##Mono##||[[HomePage | Forced]]|| {{wikkaversion}}|| **##Bold mono##** ||""##
##""||//Italics//||===Heading===||++Strike++|| {{image url="http://wiki.tormodh.net/images/xml.png" alt="xml" title="xml feed"}}||""##
##""||""SandBox escaped""||""embedded<sup>html</sup>""||@@center@@||{{color c="red" text="testme"}}||""##
||##Mono##||[[HomePage | Forced]]|| {{wikkaversion}}|| **##Bold mono##** ||
||//Italics//||===Heading===||++Strike++|| {{image url="http://wiki.tormodh.net/images/xml.png" alt="xml" title="xml feed"}}||
||""SandBox escaped""||""embedded<sup>html</sup>""||@@center@@||{{color c="red" text="testme"}}||

Revision [410]

Edited on 2007-02-07 06:09:56 by DarTar [style markup]
Additions:
====9. Adding a touch of style====
//This section to be moved at the end after the accessibility options//
The table markup introduces a style markup that will be progressively extended to any other Wikka markup. CSS style options can be added to any element by enclosing them within braces, right before the element content.
For example, to render a cell with **red background** and **white text color**, you can do the following:
##""||{background-color:red; color:white}Hello||""##
||{background-color:red; color:white}Hello||
You can play with **font size** and **text alignment**:
##""|?|Adding some style||""##
##""||{font-size:190%; text-align:right}Please scale me!||""##
##""||{font-size:170%; text-align:right}Please scale me!||""##
##""||{font-size:150%; text-align:right}Please scale me!||""##
##""||{font-size:130%; text-align:right}Please scale me!||""##
##""||{font-size:110%; text-align:right}Please scale me!||""##
##""||{font-size:90%; text-align:right}Please scale me!||""##
##""||{font-size:70%; text-align:right}Please scale me!||""##
|?|Adding some style||
||{font-size:190%; text-align:right}Please scale me!||
||{font-size:170%; text-align:right}Please scale me!||
||{font-size:150%; text-align:right}Please scale me!||
||{font-size:130%; text-align:right}Please scale me!||
||{font-size:110%; text-align:right}Please scale me!||
||{font-size:90%; text-align:right}Please scale me!||
||{font-size:70%; text-align:right}Please scale me!||
Deletions:
===Styling with CSS selectors, 1===

Revision [409]

Edited on 2007-02-07 05:47:08 by DarTar [small fix]
Additions:
Simple, content-generating [[UsingActions | actions]] (including [[AddingImages | images]]) can be added within table cells and headings.
Deletions:
Simple, content-generating [[UsingActions | actions]] (including [[ImageActionInfo | image actions]]) can be added within table cells and headings.

Revision [408]

Edited on 2007-02-06 18:59:06 by DarTar [adding documentation for table markup]

No Differences

Revision [407]

Edited on 2007-02-06 18:57:17 by DarTar [adding documentation for table markup]
Additions:
All the available options to create [[AddingLinks | links]] can be used within table cells or headings:
Deletions:
All the available options to create [[AddingLinks | links]] can be used within table cells and headings.

Revision [406]

Edited on 2007-02-06 18:54:42 by DarTar [adding documentation for table markup]
Additions:
**Row headings** are created in the same way. Since they are usually followed by normal cells, they must be terminated with the ##""||""## delimiter if the next element in the row is a simple cell:
**Spans** are used to combine multiple cells or multiple headings vertically or horizontally.
A **cell spanning multiple columns** is generated by prefixing the cell content with a ##""(x:n)""## parameter, where ##n## is the number of columns to be spanned. The following example shows how to create a cell spanning two columns:
Spans can also be applied to rows. A **cell spanning multiple rows** is generated by prefixing the cell content with a ##""(y:n)""## parameter, where ##n## is the number of rows to be spanned. The following example shows how to create a cell spanning two rows:
Deletions:
**Row headings** are usually followed by normal cells, so they must be terminated with the ##""||""## delimiter if the next element in the row is a simple cell:
**Spans** are used to combine multiple cells or multiple headings vertically or horizontally. A **cell spanning multiple columns** is generated by prefixing the cell content with a ##""(x:n)""## parameter, where ##n## is the number of columns to be spanned.
The following example shows how to create a cell spanning two columns:
Spans can also be applied to rows. A **cell spanning multiple rows** is generated by prefixing the cell content with a ##""(y:n)""## parameter, where ##n## is the number of rows to be spanned.
The following example shows how to create a cell spanning two rows:

Revision [405]

Edited on 2007-02-06 18:53:30 by DarTar [adding documentation for table markup]
Additions:
**Spans** are used to combine multiple cells or multiple headings vertically or horizontally. A **cell spanning multiple columns** is generated by prefixing the cell content with a ##""(x:n)""## parameter, where ##n## is the number of columns to be spanned.
The following example shows how to create a cell spanning two columns:
Spans can also be applied to rows. A **cell spanning multiple rows** is generated by prefixing the cell content with a ##""(y:n)""## parameter, where ##n## is the number of rows to be spanned.
The following example shows how to create a cell spanning two rows:
Deletions:
**Spans** are used to combine multiple cells or multiple headings vertically or horizontally. A cell spanning multiple columns is generated by prefixing the cell content with a ##""(x:n)""## parameter, where ##n## is the number of columns to be spanned.
The following example, shows how to create a cell **spanning two columns**:
Spans can also be applied to rows. A cell spanning multiple rows is generated by prefixing the cell content with a ##""(y:n)""## parameter, where ##n## is the number of rows to be spanned.
The following example shows how to create a cell **spanning two rows**

Revision [404]

Edited on 2007-02-06 18:51:42 by DarTar [adding documentation for table markup]
Additions:
**Spans** are used to combine multiple cells or multiple headings vertically or horizontally. A cell spanning multiple columns is generated by prefixing the cell content with a ##""(x:n)""## parameter, where ##n## is the number of columns to be spanned.
Spans can also be applied to rows. A cell spanning multiple rows is generated by prefixing the cell content with a ##""(y:n)""## parameter, where ##n## is the number of rows to be spanned.
Deletions:
**Spans** are used to combine multiple cells or multiple headings vertically or horizontally. A cell spanning ##n## columns is generated by prefixing the cell content with a ##""(x:n)""## parameter.
Spans can also be applied to rows. A cell spanning ##n## rows is generated by prefixing the cell content with a ##""(y:n)""## parameter.

Revision [403]

Edited on 2007-02-06 18:50:24 by DarTar [adding documentation for table markup]
Additions:
**Spans** are used to combine multiple cells or multiple headings vertically or horizontally. A cell spanning ##n## columns is generated by prefixing the cell content with a ##""(x:n)""## parameter.
Spans can also be applied to rows. A cell spanning ##n## rows is generated by prefixing the cell content with a ##""(y:n)""## parameter.
Deletions:
**Spans** are used to combine multiple cells or multiple headings vertically or horizontally. A cell spanning ##n## columns is generated by introducing the cell content with a ##""(x:n)""## parameter.
Spans can also be applied to rows. A cell spanning ##n## rows is generated by introducing the cell content with a ##""(y:n)""## parameter.

Revision [402]

Edited on 2007-02-06 18:49:27 by DarTar [adding documentation for table markup]
Additions:
Usually tables are introduced with a caption that describes what the table contains. A caption element is introduced with a ##""|?|""## delimiter and terminated with a standard cell delimiter ##""||""##.
Deletions:
Usually tables are introduced with a caption that describes what the table contains. A caption element is introduced with a ##""|?|""## delimiter and terminated with a normal delimiter ##""||""##.

Revision [401]

Edited on 2007-02-06 18:48:27 by DarTar [adding documentation for table markup]
Additions:
**Row headings** are usually followed by normal cells, so they must be terminated with the ##""||""## delimiter if the next element in the row is a simple cell:
##""|=|Apples||300Kg||""##
|=|Apples||300Kg||
Deletions:
**Row headings** are usually followed by normal cells, so they are terminated with the ##""||""## delimiter if the next element in the row is a simple cell:
##""|=|Apples||300Kg|=|""##
|=|Apples||300Kg|=|

Revision [400]

Edited on 2007-02-06 18:47:10 by DarTar [adding documentation for table markup]

No Differences

Revision [399]

Edited on 2007-02-06 18:46:17 by DarTar [adding documentation for table markup]
Additions:
Note that a cell must always be open and closed by delimiters.
Deletions:
A cell must always be preceded and followed by cell delimiters.

Revision [398]

Edited on 2007-02-06 18:45:31 by DarTar [adding documentation for table markup]
Additions:
The most basic element of a table is a **cell**. Single cells can be created using ##""||""## as delimiters, e.g.:
Deletions:
The most basic element of a table is a **cell**. Single cell can be created using ##""||""## as delimiters, e.g.:

Revision [397]

Edited on 2007-02-06 18:45:12 by DarTar [adding documentation for table markup]
Additions:
The most basic element of a table is a **cell**. Single cell can be created using ##""||""## as delimiters, e.g.:
**Rows** can be created by adding on the same line multiple cells:
Deletions:
The most basic element of a table is a **cell**. A table with a single cell can be created using ##""||""## as delimiters, e.g.:
**Rows** can be created by adding multiple cells separated with cell delimiters:

Revision [396]

Edited on 2007-02-06 18:44:15 by DarTar [adding documentation for table markup]
Additions:
As of ##1.1.7##, Wikka introduces a flexible markup for data tables. Any kind of tables allowed by XHTML can be created using this markup, from the most basic examples (e.g. simple rows of cells) to complex tables with full support for accessibility options.
Deletions:
As of ##1.1.7##, Wikka introduces a flexible markup for data tables. Any kind of tables allowed by XHTML can be created using this markup, from the most basic example (simple rows of cells) to complex tables with full accessibility elements.

Revision [395]

Edited on 2007-02-06 18:39:49 by DarTar [adding documentation for table markup]
Additions:
====6. Adding actions and images within tables====
Simple, content-generating [[UsingActions | actions]] (including [[ImageActionInfo | image actions]]) can be added within table cells and headings.
All the available options to create [[AddingLinks | links]] can be used within table cells and headings.
##""||Escaped camelcase links: ""SandBox"" escaped||""##
====8. Adding HTML within tables====
You can also use embedded HTML in table cells:
##""|?|Embedding HTML within tables||""##
##""||Here's some superscript: ""a<sup>2+1</sup>""||""##
##""||And here's some subscript too: ""a<sub>2k</sub>""||""##
##""||I love acronyms: ""<acronym title="What You See Is What You Get">WYSIWYG</acronym>""||""##
|?|Embedding HTML within tables||
||Here's some superscript: ""a<sup>2+1</sup>""||
||And here's some subscript too: ""a<sub>2k</sub>""||
||I love acronyms: ""<acronym title="What You See Is What You Get">WYSIWYG</acronym>""||
{{color bg="#F00" fg="#FFF" text="--------------------------TO BE CONTINUED----------------------"}}=====
Deletions:
====6. Adding actions within tables====
Simple, content-generating [[UsingActions | actions]] can also be added within table cells.
All the available options to create [[AddingLinks | links]] can be used within table cells.
##""||Escaped camelcase links: ""SandBox escaped""||""##
====TBC====
Adding links to cell contents:
Adding actions to cell contents

Revision [394]

Edited on 2007-02-06 18:26:17 by DarTar [adding documentation for table markup]
Additions:
====1. Table basics: cells, rows, columns====
By now you should be able to create simple tables with **multiple rows and columns**.
Usually tables are introduced with a caption that describes what the table contains. A caption element is introduced with a ##""|?|""## delimiter and terminated with a normal delimiter ##""||""##.
Spans are particularly useful to create **subheadings**:
====5. Formatting text within tables====
You can use any kind of basic [[TextFormatting | Wikka markup]] to render text within tables.
The following example adds basic formatting to cell content:
##""|?|Using text formatting within tables||""##
##""||##Monospaced##||//Italics//||**Bold**||__Underlined__||""##
##""||''Highlighted''||++Strikethrough++||(x:2)**//Bold italics//**||""##
|?|Using text formatting within tables||
||##Monospaced##||//Italics//||**Bold**||__Underlined__||
||''Highlighted''||++Strikethrough++||(x:2)**//Bold italics//**||
====6. Adding actions within tables====
Simple, content-generating [[UsingActions | actions]] can also be added within table cells.
##""|?|Using actions within tables||""##
##""||This wiki contains {{countpages}} pages||""##
##""||Feed: {{image url="images/xml.png" alt="xml" title="xml feed"}}||""##
##""||{{color c="red" text="some colored text"}}||""##
|?|Using actions within tables||
||This wiki contains {{countpages}} pages||
||Feed: {{image url="images/xml.png" alt="xml" title="xml feed"}}||
||{{color c="red" text="some colored text"}}||
====7. Adding links within tables====
All the available options to create [[AddingLinks | links]] can be used within table cells.
##""|?|Adding links within tables||""##
##""||Camelcase links: SandBox||""##
##""||Escaped camelcase links: ""SandBox escaped""||""##
##""||Forced links: [[HomePage | main]]||""##
##""||Interwiki links: Wikipedia:Wikka||""##
##""||Forced interwiki links: [[Wikipedia:Wikka | Wikka article on Wikipedia]]||""##
##""||External links: http://www.example.com ||""##
##""||Forced external links: [[http://www.example.com | Example.com]]||""##
##""||Image links: {{image url="images/icons/open.png" alt="book icon" title="Display an index of pages on this wiki" link="PageIndex"}}||""##
|?|Adding links within tables||
||Camelcase links: SandBox||
||Escaped camelcase links: ""SandBox escaped""||
||Forced links: [[HomePage | main]]||
||Interwiki links: Wikipedia:Wikka||
||Forced interwiki links: [[Wikipedia:Wikka | Wikka article on Wikipedia]]||
||External links: http://www.example.com ||
||Forced external links: [[http://www.example.com | Example.com]]||
||Image links: {{image url="images/icons/open.png" alt="book icon" title="Display an index of pages on this wiki" link="PageIndex"}}||
====TBC====
Adding links to cell contents:
Adding actions to cell contents
Deletions:
====1. The basics: cells, rows, columns====
Now you should be able to create simple tables with **multiple rows and columns**.
Usually tables are introduced with a caption that describes what the table contains. A caption element is introduced with a ##""|?||""## delimiter and terminated with a normal delimiter ##""||""##.
Spans are particularly useful to create subheadings:

Revision [393]

Edited on 2007-02-06 18:01:39 by DarTar [adding documentation for table markup]
Additions:
Column and row spans can be combined to created funky table layouts:
##""||(x:2;y:2)2x2||(x:2)2x1||(y:2)1x2||""##
##""||(y:2)1x2||1x1||""##
##""||1x1||1x1||(x:2)2x1||""##
Spans are particularly useful to create subheadings:
##""|?|Fruit production in the last two years||""##
##""|=| |=|(x:2)Apples|=|(x:2)Pears|=|""##
##""|=| |=|2005|=|2006|=|2005|=|2006|=|""##
##""|=|Mary||300Kg||320Kg||400kg||280Kg||""##
##""|=|John||400Kg||630Kg||210Kg||300Kg||""##
|?|Fruit production in the last two years||
|=| |=|(x:2)Apples|=|(x:2)Pears|=|
|=| |=|2005|=|2006|=|2005|=|2006|=|
|=|Mary||300Kg||320Kg||400kg||280Kg||
|=|John||400Kg||630Kg||210Kg||300Kg||

Revision [392]

Edited on 2007-02-06 17:56:41 by DarTar [adding documentation for table markup]
Additions:
HomePage
=====Wikka Table Markup Guide=====
As of ##1.1.7##, Wikka introduces a flexible markup for data tables. Any kind of tables allowed by XHTML can be created using this markup, from the most basic example (simple rows of cells) to complex tables with full accessibility elements.
====1. The basics: cells, rows, columns====
The most basic element of a table is a **cell**. A table with a single cell can be created using ##""||""## as delimiters, e.g.:
##""||Hello||""##
||Hello||
A cell must always be preceded and followed by cell delimiters.
**Rows** can be created by adding multiple cells separated with cell delimiters:
##""||Cell 1||Cell 2||Cell 3||""##
||Cell 1||Cell 2||Cell 3||
**Columns** can be created by adding rows on separate lines:
##""||Cell 1||""##
##""||Cell 2||""##
##""||Cell 3||""##
||Cell 1||
||Cell 2||
||Cell 3||
Now you should be able to create simple tables with **multiple rows and columns**.
##""||Cell 1||""##
##""||Cell 2||""##
##""||Cell 3||""##
||Cell 1||Cell 2||Cell 3||
||Cell 4||Cell 5||Cell 6||
||Cell 7||Cell 8||Cell 9||
====2. Headings====
As soon as you create slightly more complex data tables, you will need to specify column and row **headings**. Headings are special cells that specify what kind of data rows and columns contain. The most basic way of creating a heading is by using ##""|=|""## as a delimiter.
The following is an example of a simple table with **column headings**:
##""|=|Apples|=|Pears|=|""##
##""||300Kg||480Kg||""##
|=|Apples|=|Pears|=|
||300Kg||480Kg||
**Row headings** are usually followed by normal cells, so they are terminated with the ##""||""## delimiter if the next element in the row is a simple cell:
##""|=|Apples||300Kg|=|""##
##""|=|Pears||480Kg||""##
|=|Apples||300Kg|=|
|=|Pears||480Kg||
You should be able by now to create simple tables with row and column headings:
##""|=| |=|Apples|=|Pears|=|""##
##""|=|Mary||300Kg||320Kg||""##
##""|=|John||400Kg||630Kg||""##
|=| |=|Apples|=|Pears|=|
|=|Mary||300Kg||320Kg||
|=|John||400Kg||630Kg||
We will describe later how to add accessibility parameters for row and column headings.
====3. Captions====
Usually tables are introduced with a caption that describes what the table contains. A caption element is introduced with a ##""|?||""## delimiter and terminated with a normal delimiter ##""||""##.
##""|?|Fruit production in 2006||""##
##""|=| |=|Apples|=|Pears|=|""##
##""|=|Mary||300Kg||320Kg||""##
##""|=|John||400Kg||630Kg||""##
|?|Fruit production in 2006||
|=| |=|Apples|=|Pears|=|
|=|Mary||300Kg||320Kg||
|=|John||400Kg||630Kg||
====4. Spans====
**Spans** are used to combine multiple cells or multiple headings vertically or horizontally. A cell spanning ##n## columns is generated by introducing the cell content with a ##""(x:n)""## parameter.
The following example, shows how to create a cell **spanning two columns**:
##""||(x:2)Cell spanning 2 columns||Cell 3||""##
##""||Cell 4||Cell 5||Cell 6||""##
##""||Cell 7||Cell 8||Cell 9||""##
||(x:2)Cell spanning 2 columns||Cell 3||
||Cell 4||Cell 5||Cell 6||
||Cell 7||Cell 8||Cell 9||
Spans can also be applied to rows. A cell spanning ##n## rows is generated by introducing the cell content with a ##""(y:n)""## parameter.
The following example shows how to create a cell **spanning two rows**
##""||(y:2)Cell spanning 2 rows||Cell 2||Cell 3||""##
##""||Cell 5||Cell 6||""##
##""||Cell 7||Cell 8||Cell 9||""##
||(y:2)Cell spanning 2 rows||Cell 2||Cell 3||
||Cell 5||Cell 6||
||Cell 7||Cell 8||Cell 9||
##""||##Mono##||[[HomePage | Forced]]|| {{wikkaversion}}|| **##Bold mono##** ||""##
Deletions:
=====Table Markup Examples=====
//this page validates as XHTML1.0 transitional//
===Something really simple===
##""|=|Heading 1||Content 11||Content 12||""##
##""|=|Heading 2||Content 21||Content 22||""##
|=|Heading 1||Content 11||Content 12||
|=|Heading 2||Content 21||Content 22||
Perhaps it should be mentioned, that headings must be preceded by ""|=|"" and followed by ""||"" if the next cell should countain data ...
##""||Content 11||Content 12|=|Heading 1||""##
##""|=|Heading 2||Content 21||Content 22||""##
||Content 11||Content 12|=|Heading 1||
|=|Heading 2||Content 21||Content 22||
===Something simple with a caption===
##""|?|Caption||""##
##""|=|Name|=|Number||""##
##""||Me||12||""##
##""||Someone||15||""##
|?|Caption||
|=|Name|=|Number||
||Me||12||
||Someone||15||
===Spans===
##""||(x:2;y:2)2x2||(x:2)2x1||(y:2)1x2||""##
##""||(y:2)1x2||1x1||""##
##""||1x1||1x1||(x:2)2x1||""##
##""||##Mono##||[[HomePage Forced]]|| {{wikkaversion}}|| **##Bold mono##** ||""##

Revision [391]

The oldest known version of this page was created on 2007-02-06 16:56:30 by DarTar [adding documentation for table markup]
Valid XHTML :: Valid CSS: :: Powered by WikkaWiki