Wikka Documentation : TableMarkupReference

HomePage :: Index :: RecentChanges :: Search :: Login/Register
[1938] Latest edit on 2009-02-28 07:53:25 by DarTar [1.1.7->1.2]


Additions:
NOTE
This feature is available since:
WikkaWiki 1.2
 

Deletions:
NOTE
This feature is available since:
WikkaWiki 1.1.7
 


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


No Differences

[1325] Edited on 2008-11-01 23:23:06 by DarTar [Removed HomePage link]


Deletions:
HomePage

[1085] Edited on 2008-03-25 17:49:03 by DarTar [[m] text]


Additions:


Deletions:



[1084] Edited on 2008-03-25 17:36:00 by DarTar [replacing named color]


Additions:

|*|(attribute parameters){style parameters}content||
  1. Style
    {style parameters} is an optional series of CSS style declarations enclosed in braces. Multiple style declarations can be separated with a semicolon (;).

Deletions:

|*|(attribute parameters)Sorry, but you did not specify a color for highlighting!content||
  1. Style
    Sorry, but you did not specify a color for highlighting! is an optional series of CSS style declarations enclosed in braces. Multiple style declarations can be separated with a semicolon (;).


[462] Edited on 2007-08-15 17:04:55 by DarTar [since]


Additions:
NOTE
This feature is available since:
WikkaWiki 1.1.7
 

Deletions:
 


[449] Edited on 2007-02-08 08:28:38 by DarTar [minor]


Additions:


Deletions:



[447] Edited on 2007-02-08 08:26:44 by DarTar [minor]


Additions:

  1. Closing delimiter
    || is the standard delimiter.

Deletions:

  1. Closing delimiter
    || is the generic closing delimiter.


[446] Edited on 2007-02-08 08:25:51 by DarTar [minor]


Additions:

  1. Attributes
    (attribute parameters) is an optional series of parameter:value declarations enclosed in brackets. Valid parameters are described in the attribute table below. Multiple parameter declarations can be separated with a semicolon (;).
  2. Style
    Sorry, but you did not specify a color for highlighting! is an optional series of CSS style declarations enclosed in braces. Multiple style declarations can be separated with a semicolon (;).

Deletions:

  1. Attributes
    (attribute parameters) is an optional series of parameter:value declarations. Valid parameters are described in the attribute table below. Multiple parameter declarations can be separated with a semicolon (;).
  2. Style
    Sorry, but you did not specify a color for highlighting! is an optional series of CSS style declarations. Multiple style declarations can be separated with a semicolon (;).


[443] Edited on 2007-02-08 08:08:12 by DarTar [adding reference]


Additions:

1. Table Markup Scheme

Example:

Understanding the Table Markup Scheme

  1. Opening delimiter
    |*| is any of the delimiters described in the elements table below.
  2. Attributes
    (attribute parameters) is an optional series of parameter:value declarations. Valid parameters are described in the attribute table below. Multiple parameter declarations can be separated with a semicolon (;).
  3. Style
    Sorry, but you did not specify a color for highlighting! is an optional series of CSS style declarations. Multiple style declarations can be separated with a semicolon (;).
  4. Content
    content can be any valid content for that element (including formatted text).
  5. Closing delimiter
    || is the generic closing delimiter.

2. Elements

3. Attributes


Deletions:

1. Table Markup Scheme

Where:
  • |*| is any of the delimiters described in the elements table below.
  • (attribute parameters) is an optional series of parameter:value declarations. Valid parameters are described in the attribute table below. Multiple parameter declarations can be separated with semicolon (;).
  • Sorry, but you did not specify a color for highlighting! can be any valid CSS style declaration.
  • content can be any valid content for that element (including formatted text).
  • || is the generic closing delimiter.
Example:

2. Elements

3. Attributes



[441] Edited on 2007-02-08 07:57:12 by DarTar [syntax reference]


Additions:

Wikka Table Markup Reference

See also:
 

1. Table Markup Scheme

The generic markup for table elements follows this scheme:
|*|(attribute parameters)Sorry, but you did not specify a color for highlighting!content||
Where:
  • |*| is any of the delimiters described in the elements table below.
  • (attribute parameters) is an optional series of parameter:value declarations. Valid parameters are described in the attribute table below. Multiple parameter declarations can be separated with semicolon (;).
  • Sorry, but you did not specify a color for highlighting! can be any valid CSS style declaration.
  • content can be any valid content for that element (including formatted text).
  • || is the generic closing delimiter.
Example:
|=|(i:main_heading){text-size: 120%}This is the main heading||
Note:
Some elements are self closing and do not accept any attributes, style parameters or content. See the notes in the elements table below.

2. Elements

Table Elements
XHTML ElementsDelimiterNotes
<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>noneWill be opened for each row of table cells.
<th>|=|
<td>||

3. Attributes


Deletions:
Table Attributes
AttributeMarkup key
AttributeMarkup key
Core
idi
titlet
classc
styles
i18n
xml:langl
dird
Table cells
colspanx
rowspany
scopeo
headersh
abbra
axisz
Other Table elements
spanp
summaryu

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 examples (e.g. simple rows of cells) to complex tables with full support for accessibility options.

1. Table basics: cells, rows, columns

The most basic element of a table is a cell. Single cells can be created using || as delimiters, e.g.:
||Hello||
Note that a cell must always be open and closed by delimiters.
Hello

Rows can be created by adding on the same line multiple cells:
||Cell 1||Cell 2||Cell 3||
Cell 1Cell 2Cell 3
Columns can be created by adding rows on separate lines:
||Cell 1||
||Cell 2||
||Cell 3||
By now you should be able to create simple tables with
Cell 1
Cell 2
Cell 3
multiple rows and columns.
||Cell 1||Cell 2||Cell 3||
||Cell 4||Cell 5||Cell 6||
||Cell 7||Cell 8||Cell 9||
Cell 1Cell 2Cell 3
Cell 4Cell 5Cell 6
Cell 7Cell 8Cell 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||
ApplesPears
300Kg480Kg
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:
|=|Apples||300Kg||
|=|Pears||480Kg||
You should be able by now to create simple tables with row and column headings:
Apples300Kg
Pears480Kg

|=| |=|Apples|=|Pears|=|
|=|Mary||300Kg||320Kg||
|=|John||400Kg||630Kg||
We will describe later how to add accessibility parameters for row and column headings.
ApplesPears
Mary300Kg320Kg
John400Kg630Kg

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 standard cell delimiter ||.
|?|Fruit production in 2006||
|=| |=|Apples|=|Pears|=|
|=|Mary||300Kg||320Kg||
|=|John||400Kg||630Kg||
Fruit production in 2006
ApplesPears
Mary300Kg320Kg
John400Kg630Kg

4. Spans

Spans are used to combine multiple cells or multiple headings vertically or horizontally and are created using bracketed markup:
||(span options)Element content||
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:
||(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 2 columnsCell 3
Cell 4Cell 5Cell 6
Cell 7Cell 8Cell 9
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:
||(y:2)Cell spanning 2 rows||Cell 2||Cell 3||
||Cell 5||Cell 6||
||Cell 7||Cell 8||Cell 9||
Spans are particularly useful to create
Cell spanning 2 rowsCell 2Cell 3
Cell 5Cell 6
Cell 7Cell 8Cell 9
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||
Column and row spans can be combined to created funky table layouts:
Fruit production in the last two years
ApplesPears
2005200620052006
Mary300Kg320Kg400kg280Kg
John400Kg630Kg210Kg300Kg

||(x:2;y:2)2x2||(x:2)2x1||(y:2)1x2||
||(y:2)1x2||1x1||
||1x1||1x1||(x:2)2x1||
2x22x11x2
1x21x1
1x11x12x1

5. Formatting text within tables

You can use any kind of basic 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
MonospacedItalicsBoldUnderlined
HighlightedStrikethroughBold italics

6. Adding actions and images within tables

Simple, content-generating actions (including images) can be added within table cells and headings.
|?|Using actions within tables||
||This wiki contains {{countpages}} pages||
||{{image url="images/ww.jpg" class="center" alt="a w" title="w image"}}||
||{{color c="red" text="some colored text"}}||
Using actions within tables
This wiki contains 378 pages
a w
some colored text

7. Adding links within tables

All the available options to create links can be used within table cells or headings:
|?|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: main
Interwiki links: Wikipedia:Wikka
Forced interwiki links: Wikka article on Wikipedia
External links: http://www.example.com
Forced external links: Example.com
Image links: book icon

8. Adding HTML within tables

You can also use embedded HTML in table elements:
|?|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: a2+1
And here's some subscript too: a2k
I love acronyms: WYSIWYG

9. Adding a touch of style

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||
For example, to render a cell with red background and white text color, you can do the following:
||{background-color:red; color:white}Hello||
You can play with
Hello
font size and text alignment:
|?|Adding some more 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!||
You can also apply style to
Adding some more style
Please scale me!
Please scale me!
Please scale me!
Please scale me!
Please scale me!
Please scale me!
Please scale me!
headings and captions:
|?|{border:1px dotted red; color:red}Style can be applied anywhere||
|=|{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
Style can be applied anywhere
Emphemeral Quibus
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis auctor auctor pede.
braced markup should always follow bracketed markup, when both are specified for an element:
|?|Give priority||
||(x:2;y:2){background-color:pink}2x2||(x:2){background-color:lightblue}2x1||(y:2){background-color:lightyellow}1x2||
||(y:2){background-color:lightyellow}1x2||{background-color:#333;color:white}1x1||
||{background-color:lightblue}1x1||{background-color:#333;color:white}1x1||(x:2){background-color:pink}2x1||
Give priority
2x22x11x2
1x21x1
1x11x12x1

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 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
This cell uses the .highlight class
This cell uses the .smaller class
This cell uses a .smaller class overridden by custom style settings

11. 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:
|!|{border:3px solid blue; background-color: black; color: white; width: 300px; text-align: center}||
||Cell 1||
||Cell 2||
||Cell 3||
Cell 1
Cell 2
Cell 3

12. Referring to elements: 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 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"
|!|(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||
Using id to refer to table elements
This cell can be referred to by using the cell_1 id
This cell can be referred to by using the cell_2 id

13. 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}||
|?|Fruit production in 2006||
|=| |=|(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||
Fruit production in 2006
ApplesPears
Mary300Kg320Kg
John400Kg630Kg

14. 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 in 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.

15. 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 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;
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:
|!|(u:A table with summary, caption, head, foot and body){width: 400px}||
|?|Here's how you can group rows||
|[|
|=|Name|=|Place|=|Telephone||
|]|
|=|Name|=|Place|=|Telephone||
|#|
|=|John Smith||New York||555-1234||
|=|Jane Smith||Los Angeles||555-2345||
|=|John Doe||Unknown||Unknown||
|=|Jane Doe||Unknown||Unknown||
Here's how you can group rows
NamePlaceTelephone
NamePlaceTelephone
John SmithNew York555-1234
Jane SmithLos Angeles555-2345
John DoeUnknownUnknown
Jane DoeUnknownUnknown

16. 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:
|!|(u:The number of employees and the foundation year of some imaginary companies.)||
|?|Table 1: Company data||
|[|
|||=|(o:col)Employees|=|(o:col)Founded||
|#|
|=|(o:row)ACME Inc||1000||1947||
|=|(o:row)XYZ Corp||2000||1973||
Table 1: Company data
EmployeesFounded
ACME Inc10001947
XYZ Corp20001973
覧覧覧TO BE CONTINUED覧覧覧

[440] The oldest known version of this page was created on 2007-02-08 07:27:59 by DarTar [Cloned from TableMarkup]

History of recent changes for TableMarkupReference
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 examples (e.g. simple rows of cells) to complex tables with full support for accessibility options.

1. Table basics: cells, rows, columns


The most basic element of a table is a cell. Single cells can be created using || as delimiters, e.g.:

||Hello||

Hello

Note that a cell must always be open and closed by delimiters.

Rows can be created by adding on the same line multiple cells:

||Cell 1||Cell 2||Cell 3||

Cell 1Cell 2Cell 3

Columns can be created by adding rows on separate lines:

||Cell 1||
||Cell 2||
||Cell 3||

Cell 1
Cell 2
Cell 3

By now you should be able to create simple tables with multiple rows and columns.

||Cell 1||Cell 2||Cell 3||
||Cell 4||Cell 5||Cell 6||
||Cell 7||Cell 8||Cell 9||

Cell 1Cell 2Cell 3
Cell 4Cell 5Cell 6
Cell 7Cell 8Cell 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||

ApplesPears
300Kg480Kg

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:

|=|Apples||300Kg||
|=|Pears||480Kg||

Apples300Kg
Pears480Kg

You should be able by now to create simple tables with row and column headings:

|=| |=|Apples|=|Pears|=|
|=|Mary||300Kg||320Kg||
|=|John||400Kg||630Kg||

ApplesPears
Mary300Kg320Kg
John400Kg630Kg

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 standard cell delimiter ||.

|?|Fruit production in 2006||
|=| |=|Apples|=|Pears|=|
|=|Mary||300Kg||320Kg||
|=|John||400Kg||630Kg||

Fruit production in 2006
ApplesPears
Mary300Kg320Kg
John400Kg630Kg

4. Spans


Spans are used to combine multiple cells or multiple headings vertically or horizontally and are created using bracketed markup:

||(span options)Element content||

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:

||(x:2)Cell spanning 2 columns||Cell 3||
||Cell 4||Cell 5||Cell 6||
||Cell 7||Cell 8||Cell 9||

Cell spanning 2 columnsCell 3
Cell 4Cell 5Cell 6
Cell 7Cell 8Cell 9

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:

||(y:2)Cell spanning 2 rows||Cell 2||Cell 3||
||Cell 5||Cell 6||
||Cell 7||Cell 8||Cell 9||

Cell spanning 2 rowsCell 2Cell 3
Cell 5Cell 6
Cell 7Cell 8Cell 9

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
ApplesPears
2005200620052006
Mary300Kg320Kg400kg280Kg
John400Kg630Kg210Kg300Kg

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||

2x22x11x2
1x21x1
1x11x12x1


5. Formatting text within tables


You can use any kind of basic 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
MonospacedItalicsBoldUnderlined
HighlightedStrikethroughBold italics

6. Adding actions and images within tables


Simple, content-generating actions (including images) can be added within table cells and headings.

|?|Using actions within tables||
||This wiki contains {{countpages}} pages||
||{{image url="images/ww.jpg" class="center" alt="a w" title="w image"}}||
||{{color c="red" text="some colored text"}}||

Using actions within tables
This wiki contains 378 pages
a w
some colored text

7. Adding links within tables


All the available options to create links can be used within table cells or headings:

|?|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: main
Interwiki links: Wikipedia:Wikka
Forced interwiki links: Wikka article on Wikipedia
External links: http://www.example.com
Forced external links: Example.com
Image links: book icon

8. Adding HTML within tables


You can also use embedded HTML in table elements:

|?|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: a2+1
And here's some subscript too: a2k
I love acronyms: WYSIWYG

9. Adding a touch of style


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||

For example, to render a cell with red background and white text color, you can do the following:

||{background-color:red; color:white}Hello||

Hello

You can play with font size and text alignment:

|?|Adding some more 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 more style
Please scale me!
Please scale me!
Please scale me!
Please scale me!
Please scale me!
Please scale me!
Please scale me!

You can also apply style to headings and captions:

|?|{border:1px dotted red; color:red}Style can be applied anywhere||
|=|{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.||

Style can be applied anywhere
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:

|?|Give priority||
||(x:2;y:2){background-color:pink}2x2||(x:2){background-color:lightblue}2x1||(y:2){background-color:lightyellow}1x2||
||(y:2){background-color:lightyellow}1x2||{background-color:#333;color:white}1x1||
||{background-color:lightblue}1x1||{background-color:#333;color:white}1x1||(x:2){background-color:pink}2x1||

Give priority
2x22x11x2
1x21x1
1x11x12x1

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 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
This cell uses the .highlight class
This cell uses the .smaller class
This cell uses a .smaller class overridden by custom style settings

11. 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:

|!|{border:3px solid blue; background-color: black; color: white; width: 300px; text-align: center}||
||Cell 1||
||Cell 2||
||Cell 3||

Cell 1
Cell 2
Cell 3

12. Referring to elements: 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 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"

|!|(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||

Using id to refer to table elements
This cell can be referred to by using the cell_1 id
This cell can be referred to by using the cell_2 id

13. 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}||
|?|Fruit production in 2006||
|=| |=|(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||

Fruit production in 2006
ApplesPears
Mary300Kg320Kg
John400Kg630Kg

14. 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 in 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.

15. 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 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;

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:

|!|(u:A table with summary, caption, head, foot and body){width: 400px}||
|?|Here's how you can group rows||
|[|
|=|Name|=|Place|=|Telephone||
|]|
|=|Name|=|Place|=|Telephone||
|#|
|=|John Smith||New York||555-1234||
|=|Jane Smith||Los Angeles||555-2345||
|=|John Doe||Unknown||Unknown||
|=|Jane Doe||Unknown||Unknown||

Here's how you can group rows
NamePlaceTelephone
NamePlaceTelephone
John SmithNew York555-1234
Jane SmithLos Angeles555-2345
John DoeUnknownUnknown
Jane DoeUnknownUnknown

16. 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:

|!|(u:The number of employees and the foundation year of some imaginary companies.)||
|?|Table 1: Company data||
|[|
|||=|(o:col)Employees|=|(o:col)Founded||
|#|
|=|(o:row)ACME Inc||1000||1947||
|=|(o:row)XYZ Corp||2000||1973||

Table 1: Company data
EmployeesFounded
ACME Inc10001947
XYZ Corp20001973

覧覧覧TO BE CONTINUED覧覧覧

CategoryEN
2009-02-28 07:53:25 feed icon :: Owner: DarTar ::
Creative Common Attribution-ShareAlike License
Valid XHTML 1.0 Transitional :: Valid CSS :: Powered by WikkaWiki
Page was generated in 0.1466 seconds