(Q) (R) (|)

(J) ( (")

(V) (< (> (?)

Table Formatting Features

Basic tables are done like this:

 ||Region||Sales||
 ||East||$100||
 ||West||$500||

which appears like this:

Rich table formatting allows control over the following advanced table formatting features:

• Table-level formatting
• Center
• Float left or right
• Border (or no border)
• Width (percentage)
• Cell-level formatting
• Content alignment (left, right, center)
• Row and column spans
• Cell highlighting
• Breaking (allowed or not)
• Colored cell backgrounds
• Width (percentage)

These rich formatting options are specified using a table formatting expression immediately after the || characters for a cell. The table formatting expression is delimited by { and } (curly-brace characters). Formatting that applies to the whole table must appear prior to the first cell (though it can be duplicated and will be ignored in the other cells).

Table Formatting Rules and Examples

Center - T^

A table can be centered using the table formatting expression T^. For example,

 ||{T^}Region||Sales||
 ||East||$100||
 ||West||$500||

which appears like this:

Floating Tables - T[ and T]

A table can be configured to float on the left or right with surrounding content wrapped around. This is done with T[ and T]. For example,

 ||{T[}Region||Sales||
 ||East||$100||
 ||West||$500||

which appears like this:

Notice that this text wraps around the table. Notice that this text wraps around the table. Notice that this text wraps around the table. Notice that this text wraps around the table. Notice that this text wraps around the table. Notice that this text wraps around the table. Notice that this text wraps around the table. Notice that this text wraps around the table. Notice that this text wraps around the table. Notice that this text wraps around the table. Notice that this text wraps around the table. Notice that this text wraps around the table. Notice that this text wraps around the table. Notice that this text wraps around the table. Notice that this text wraps around the table. Notice that this text wraps around the table. Notice that this text wraps around the table. Notice that this text wraps around the table. Notice that this text wraps around the table. Notice that this text wraps around the table. Notice that this text wraps around the table. Notice that this text wraps around the table. Notice that this text wraps around the table. Notice that this text wraps around the table. Notice that this text wraps around the table. Notice that this text wraps around the table. Notice that this text wraps around the table.

Or, floating on the right:

 ||{T]}Region||Sales||
 ||East||$100||
 ||West||$500||

which appears like this:

Notice that this text wraps around the table. Notice that this text wraps around the table. Notice that this text wraps around the table. Notice that this text wraps around the table. Notice that this text wraps around the table. Notice that this text wraps around the table. Notice that this text wraps around the table. Notice that this text wraps around the table. Notice that this text wraps around the table. Notice that this text wraps around the table. Notice that this text wraps around the table. Notice that this text wraps around the table. Notice that this text wraps around the table. Notice that this text wraps around the table. Notice that this text wraps around the table. Notice that this text wraps around the table. Notice that this text wraps around the table. Notice that this text wraps around the table. Notice that this text wraps around the table. Notice that this text wraps around the table. Notice that this text wraps around the table. Notice that this text wraps around the table.

Border = T-

By default, a table is given a border. You can hide the border using T-. For example:

 ||{T-}Region||Sales||
 ||East||$100||
 ||West||$500||

which appears like this:

Width

You can specify the preferred width of the table (as a percentage of the whole display area for the topic) using TWxx, where xx is the percentage. For example,

 ||{TW25}One Quarter||
 ||This is the story of a man named bill.  This is the story ....||

produces:

whereas:

 ||{TW90}Ninety Percent||
 ||This is the story of a man named bill.  This is the story ....||

produces:

Cell Formatting Features

Row and column spans - Cnnn and Rnnn

Sometimes you want a cell to span more than one column or row. This can be achieved by specifying the Cnnn and Rnnn options.

For example:

 ||{R2}Region||{C2}Sales||
 ||Q1||Q2||
 ||East||$100||$800||
 ||West||$500||$9000||

which causes the Sales cell to span two columns and the Region cell to span two rows:

Cell content alignment - [ ^ ]

You can control the alignment in a cell by using [ (left), ] (right) and ^ (center). Note the position of the word Sales in each of the following three examples:

First row:

 ||{[C2}Sales||

First row:

 ||{^C2}Sales||

First row:

 ||{]C2}Sales||

Cell highlighting - !

By including the '!' table formatting rule, you can cause cells to be highlighted. This is useful, for example, in header rows and for other cells that you want to highlight:

 ||{^!C2}Sales||
 ||Q1||Q2||
 ||$100||$800||
 ||$500||{!}$9000||

produces:

Width

You can specify the preferred width of the column (as a percentage of the width of the whole table) using Wxx, where xx is the percentage. For example,

 ||{W75}Q1||Q2||Q3||Q4||
 ||$100||$800||$500||$900||
 ||$500||$9000||$500||$900||

produces:

Breaking - +

By default, content will be word wrapped in table cell. You can disable this behavior for special circumstances by using the + table formatting rule.

For example, in the following table the wrapping is disabled in the left hand cell, while the right hand cell is normal.

 ||{+} The quick ... || The quick ... ||

Note that you may need to make your browser window narrower to see the impact of this.

Colored Cells - color

color can be used to set the background color of a table cell to the given color. You can use either named colors (like 'red', 'green', etc.) or hex colors ('#FF0000' or '#00FF00').

Some examples:

 ||{*red*}RED RED RED||
 ||{*lightgreen*}LIGHT GREEN||
 ||{*#c0c0c0*}LIGHT GREY||

produces:

Note: colored cells requires build 1699 or later

Combining formatting expressions

If you want to combine two or more of these features (example: Floating Right without Border), you have to insert all expressions in the brace.

 ||{T[T-}'''This is left''' (y)||

produces:

This is left

 ||{T]T-}'''This is right''' (y)||

produces:

This is right

I used this Feature also to align Images. You make a Table without borders and floating right, and the only thing that is in the table is the link to the image.

Advanced table techniques

Paragraphs and bulleted lists in tables

Multi-line paragraphs and lists in cells can be achieved by using simple WikiTalk (because once you are in a table, FlexWiki does not pay attention to most of the standard formatting). For example, the following:

 ||Two paragraphs||@@["I think therefore I am", Newline, "You thought you were and are not", 
 Newline, "Note how the font gets screwed up"]@@||
 ||A bulleted list||@@[Tab,"* Test1", Newline, Tab, "* Test2"]@@||

gives this table:

Multi-line paragraphs and lists in cells can be achieved by using simple WikiTalk. Also note that in the above example the font got smaller (because the CSS is badly written, I guess). This problem can be worked around with the following (which doesn't always work):

 ||Two paragraphs||@@["I think therefore I am", Newline, 
 "%big%You thought you were and are not", Newline, "%big%Note how the font is OK now"]@@||
 ||A bulleted list||@@[Tab,"* %big%Test1", Newline, Tab, "* %big%Test2"]@@||

gives this table:

Tables within tables

With slightly more adanced WikiTalk from above it is possible to embed a table inside another table. While you can't make any kind of table definition in in-line WikiTalk, you can define one in a function and then call that function from inside your table.

For instance:

        :MyInnerTableDefinition:{
        ["||Milk||1 cup||", Newline, "||Eggs||2 grade A||", Newline, "||Flour||2 cups||"]
        }
        ||{C2}Ingredients||
        ||Batter||@@MyInnerTableDefinition()@@||
        ||Filling||Anything you want||

Results in:

The borders were left in the inner table to make it more clear what was happening, but it is easy to make them go away with table formatting.

Images

To put in an image, just link to an external URL that ends in jpeg/gif/jpg:

 http://static.flickr.com/21/29378995_9db88693fc_o.jpg

To make an image into a hyperlink, use the usual syntax:

 "http://static.flickr.com/21/29378995_9db88693fc_o.jpg":http://slworking.textamerica.com/

 @@Image("\\\\computername\\sharename\\folder1\\subfolder1\\myimage.gif","My Image")@@

table column

 @@Image("http://static.flickr.com/21/29378995_9db88693fc_o.jpg", "Bored", "200", "150")@@

 text in the wiki
 @@Image(federation.LinkMaker.LinkToImage("images/SomeFile.jpg"), "10", "10")@@
 more text....

 "\"http://wiki.aspcompiler.com/images/title.gif\":http://aspcompiler.com"

Text Size and Colors

Syntax:

 Setting text color: %color% or %#1122AA% (exactly 6 hex chars)
 Setting text size: %big% or %small%
 Combo: %color big% or %small color%
 End of colored/resized text: %% or end of line

Examples:

 Normal %red% red text %% back to normal

Normal red text back to normal

 %red% red text %blue% blue text
 back to normal

red text blue text

back to normal

 %big% big text %small% small text %% back to normal

big text small text back to normal

 %big red%Big red text %blue small% Small blue text

Big red text Small blue text

 %big big%Very big text %% normal again

Very big text normal again

 %small%small text%% normal again

small text normal again

Modeled after PmWiki, more info is here )

Whitespace Prefix

Any line starting with whitespace becomes preformatted text:

 Public Class MyClass
    Public Sub New()
        DoCoolStuff()
        If IsReallyCool Then
            DoSomethingEvenMoreCool()
        End If
    End Sub
 End Class
 public class CSharpExample {
    CSharpExample() {
       int n = 5;
       object[] test = new object[n];
    }
 }

Text inside of a PRE block doesn't get hyperlinks automatically added to it.

 Here is another '''example.'''

Non-indented preformatted text

It is difficult to cut and paste source files into Wiki and then insert 1 space before every line. The "PRE block" solves this problem. There are 2 usage scenarios: simple syntax and syntax with a key.

Simple Syntax:

{@
your text goes
here and it does not have to start with space or tab
}@

Produces:

your text goes
here and it does not have to start with space or tab

Syntax with key (if for some reason your text contains }@ at the beginning of a line)

{@UniqKey
any text
here including
}@ at line beginning
still inside pre
}@WrongKey
still inside pre
}@UniqKey

Produces:

any text
here including
}@ at line beginning
still inside pre
}@WrongKey
still inside pre

Extended Syntax

For purposes of showing large amounts of code, a lot of developers are used to seeing code presented with color syntax highlighting. To allow for this, you can use the {+ ... }+ syntax and then use the normal FlexWiki FormattingRules to apply styles. For example, this code

 {+
    %blue%public void%% Foo()
    {
        %green%// comment here%%
        %blue%string%% s;
...
    }
 }+

Would result in this output

   public void Foo()
   {
       // comment here
       string s;
       ...
   }

which will look extremely familiar to all of the Visual Studio developers out there.

Most of the normal FlexWiki processing is done on this text, it just maintains the fixed-width font and the whitespace presentation that is normally associated with the {@ ... }@ FlexWiki tag or the <pre> HTML tag. This processing includes Simple , Linking, Text size and Color, and Alternative or Textile formatting rules.

Bugs

This next long line will not show as it should in IE7. It works fine in IE6 though as the whole page will have a horizontal scrollbar. In IE7 it gives the preformatted text a scrollbar itself which makes the scrollbar take up all the room resulting in that you can't see the text there:

 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 12345

You could do a small workaround where you add an empty line but this makes it look worse in IE6:

 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 12345

To reference a topic on an external site (that is a topic not from this website), you add (anywhere before the link)

  @siteName=http://myserver/mywiki/default.aspx/$$$

Then, anywhere after that you can use

  TopicName@siteName

The $$$ in the definition URL will be replaced with the topic name provided.

Here is an example: Microsoft The casing of "siteName" is arbitrary, there are no restrictions.

Also, you can create a topic called ExternalWikis containing these site=URL lines and it will be loaded for every topic, allowing for a "header file" of common external wikis.

Therefore if you use @siteName later in this document Failed to find InterWiki 'siteName'. will point to http://myserver/mywiki/default.aspx

 "Test Format":http://www.example.com

Test Format

You can use the following syntax to include the contents of one topic inside another:

 {{NameOfTopicToInclude}}

This is basically as simple as it looks with one subtle addition. If you add some tabs before the include, the number of tabs you use will be used to show headings in included topics as deeper level than they would appear in the original topic. For example, two tabs before the include directive would cause a level 1 heading (i.e., preceeded by one !) as level 3. You can use this to make a WikiSpec.

Alternate Method

Using WikiTalk the following will also insert a topic:

 @@topics.<topic name>._Body@@

Q: Can this alternative method also work by including a topic in a different namespace?

For an example, see the HomePage.

Comments

I had a problem with this feature: The webserver responded with "Error: Topic is ambiguous." I resolved this problem by changing the link like this:

 {{NameSpace.NameOfTopicToInclude}}

Maybe this error appears only if you have more than one WikiNamespace. -- SimonSchmid

If the NameOfTopicToInclude is a single word, something like {{[Shakespeare]}} does not seem to work. - MichaelWaltuch

Also, if {{NameSpace1.NameOfTopicToInclude}} is specified in Namespace2 topic and Import is not present in _ContentBaseDefinition, the include doesn't work. -- MichaelWaltuch

  :With:MyLib1, MyLib2

--DoomCryer

Bug:

FlexWiki hangs when you view pages that include circular references - presumably it enters an infinite loop trying to retrieve page after page. This is easy to do by accident, especially with many similarly-named topics. I would suggest that FlexWiki be patched to prevent a given topic including itself (as a bare minimum) when edits are previewed/saved, and perhaps could check an additional N levels (configurable) of includes.

Example

Type this:

 ----
 {{WikiMeansQuick}}
 ----

to get this:

Postulated as a tenet of the WikiWay.

You can do the same with WikiTalk.

It will also work with single Words and more Namespaces.

Look There

Textile formatting

 text: _emphasis_
 text: *strong* 
 text: ??citation?? 
 text: -deleted text- 
 text: +inserted text+ 
 text: ^superscript^ 234 ^2^
 text: ~subscript~ CO ~2~ 
 text: @code@ 
 text: "this is a link (optional tooltip)":http://www.microsoft.com

Which renders:

• text: emphasis
• text: strong
• text: citation
• text: deleted text
• text: inserted text
• text: ^superscript 234 ²
• text: _subscript CO ₂
• text: code
• text: this is a link

For more information about Textile, see: http://www.textism.com/tools/textile/index.html

Wiki properties are created simply by typing a property name and a colon at the start of a line. The value is everything else on the line. Look, for example, at the top of this page. There's a property called Summary and it's got a value of this page provides information about properties

For properties with multiple values (e.g., Keyword), use commas to separate the values. For example:

        Keywords: Wiki, Properties

Properties are a rich and powerful mechanism. This short page provides information about how to create them, but there's much more information at WikiPageProperties.

If you want to prevent TopicNames from being linked and other kinds of formatting rules from being applied, you can use the double-quote escape: surround the text with a pair of double-quotes on each side and you'll prevent the formatter from treating the contained text specially (e.g. creating links from WikiWords).

This works for most run-level formatting (e.g., bold, italic, URL linking, etc.).

Example:

 ""NormallyThisWouldBeLinked"" and ""'''this would be bold'''"".

Will produce:

NormallyT_hisWouldBeLinked and '''this would be bold'''

Note

Bug - escaping Emoticons doesn't work... EG. a capital M character enclosed by round brackets is shown as instead of (M) and escaping it simply encloses it in quotes rather than prevent emoticonification --> ""