• View
• Edit
• History
• Print

Table Directives

FansubWiki has two types of table markup; the markup described in this page is useful for creating tables with lots of small cells, while table directive(s) markups help with larger scale tables.

• Basic Tables
• Advanced Tables

Simple Tables

Simple tables are created via use of the double pipe character: ||. Lines beginning with this markup denote rows in a table; within such lines the double-pipe is used to delimit cells. In the examples below a border is added for illustration (the default is no border).

|| border=1
|| cell 1 || cell 2 || cell 3 ||
|| cell 1 || cell 2 || cell 3 ||

Header cells can be created by placing ! as the first character of a cell. Note that these are table headers, not headings, so it doesn't extend to !!, !!!, etc.

|| border=1
||! cell 1 ||! cell 2 ||! cell 3 ||
|| cell 1  ||  cell 2 ||  cell 3 ||

A table can have a caption, indicated by ||!caption!||. Any caption must appear prior to other rows of the table.

|| border=1
||! A special table !||
||! cell 1 ||! cell 2 ||! cell 3 ||
|| cell 1  ||  cell 2 ||  cell 3 ||

Formatting cell contents

Cell contents may be aligned left, centered, or aligned right.

• To left-align contents, place the cell contents next to the leading ||.
• To center contents, add a space before and after the cell contents.
• To right-align contents, place a space before the cell contents and leave the cell contents next to the trailing ||.

|| border=1 width=100%
||!cell 1      ||! cell 2  ||!       cell 3||
||left-aligned || centered || right-aligned||

|| border=1 width=100%
||!cell default||!cell left ||
||default-aligned||left-aligned ||

Note that header and detail cells have different default alignments.

To get a cell to span multiple columns, follow the cell with empty cells. (At present there is no markup for spanning rows.)

|| border=1 width=100%
|| |||| right column ||
|| || middle column ||||
|| left column ||||||
|| left column || middle column || right column ||

Table attributes

Any line that begins with || but doesn't have a closing || sets the table attributes for any tables that follow. These attributes can control the size and position of the table, borders, background color, and cell spacing. (In fact these are just standard HTML attributes that are placed in the <table> tag.)

Use the width= attribute to set a table's width, using either a percentage value or an absolute size.

|| border=1 width=100% 
|| cell 1 || cell 2 || cell 3 ||
|| c1 || cellcellcellcell2 || cell 3 ||

The border= attribute sets the size of a table's borders.

|| border=10 
||!cell 1      ||! cell 2  ||!       cell 3||
||left-aligned || centered || right-aligned||

|| border=0
||!cell 1      ||! cell 2  ||!       cell 3||
||left-aligned || centered || right-aligned||

Use align=center, align=left, and align=right to center, left, or right align a table. Note that align=left and align=right create a floating table, such that text wraps around the table.

|| border=1 align=center
||!cell 1      ||! cell 2  ||!       cell 3||
||left-aligned || centered || right-aligned||

|| border=1 align=left
||!cell 1      ||! cell 2  ||!       cell 3||
||left-aligned || centered || right-aligned||
Notice how text wraps to the right of a table using "align=left".

The bgcolor= attribute sets the background color for a table. At present there is no way to specify the color of individual rows or cells in this type of table.

|| border=1 align=center bgcolor=yellow
|| !cell 1 ||! cell 2  || !cell 3 ||
||left-aligned || centered || right-aligned||

However, FansubWiki has custom CSS classes for tables with different colored title bars. Simply by choosing one of the available colors ( red, blue, yellow, green , gray , purple ) and typing class=<color> into the table attributes line, you can create tables of this variety:

|| border=1 align=center width=70% class=red
||! cell 1 ||! cell 2  ||! cell 3 ||
||left-aligned || centered || right-aligned||

|| border=1 align=center width=70% class=blue
||! cell 1 ||! cell 2  ||! cell 3 ||
||left-aligned || centered || right-aligned||

|| border=1 align=center width=70% class=yellow
||! cell 1 ||! cell 2  ||! cell 3 ||
||left-aligned || centered || right-aligned||

|| border=1 align=center width=70% class=green
||! cell 1 ||! cell 2  ||! cell 3 ||
||left-aligned || centered || right-aligned||

|| border=1 align=center width=70% class=purple
||! cell 1 ||! cell 2  ||! cell 3 ||
||left-aligned || centered || right-aligned||

|| border=1 align=center width=70% class=gray
||! cell 1 ||! cell 2  ||! cell 3 ||
||left-aligned || centered || right-aligned||

Advanced Tables

There are four directives for advanced table processing. All must be at the beginning of a line to have any effect.

(:table (attr...):)

Generates a new HTML <table> tag with the attributes provided in attr.... Closes the previous table, if any. Valid attributes and values are:

• border (a positive integer)
• bordercolor (a color name or hex number; doesn't display in all browsers)
• cellspacing (a positive integer indicating the space between cells)
• cellpadding (a positive integer indicating the interior border of a cell)
• width (a positive integer or percent)
• bgcolor (a color name or hex number)
• align (left, center or right)
• summary (does not display; used primarily to help visually disabled people navigate)

(:cell (attr...):)

Generates a new cell with the attributes given by attr.... Closes the previous table cell, if any. In HTML, this creates a new "<td attr>" tag (and possibly <table>, <tr>, and </td> tags if they are needed to produce a valid HTML table).

Valid attributes and values are:

• align (left, center or right)
• valign (top, middle or bottom)
• colspan (a positive integer)
• rowspan (a positive integer)
• bgcolor (a color name or hex number)
• width (a positive integer or percent)

(:cellnr (attr..):)

Generates a new cell at the beginning of the next row. Closes the previous table cell, if any. In HTML, this creates a "<tr><td attr>" tag, and possibly <table>, </td>, and </tr> tags if they are needed for valid HTML. Valid attributes and values are:

• align (left, center or right)
• valign (top, middle or bottom)
• colspan (a positive integer)
• rowspan (a positive integer)
• bgcolor (a color name or hex number)
• width (a positive integer or percent)

(:tableend:)

Closes the previous table cell and closes off any table. Generates </td>, </tr>, and </table> tags as needed.

Notes

For the table, cell, and cellnr tags the author can specify any attributes that would be valid in the HTML <table> or <td> tags. Thus you can specify rowspan, colspan, etc. arguments to build arbitrary tables. However, it's not possible to nest a (:table:) inside of a (:cell:) or (:cellnr:) -- the next paragraph explains why.

Many are likely to ask why we didn't just use the standard HTML table markup (<table>, <tr>, <td>, <th>) instead of creating a new markup, and allowing nested tables as a result. There are two answers: first, the HTML table markup is very ugly for naive authors, and second, it'd be very easy for authors to create tables that are incorrect HTML and that display incorrectly (or not at all) on some browsers. Even seasoned web professionals sometimes get the table markup wrong, so it's a bit unrealistic to expect the average author to always get it right, or to be able to read arbitrary HTML table markup that someone else has created.

It's difficult to write the code needed to make PmWiki understand and fix arbitrary table markup, so PmWiki uses the simplified version above. Still, this version is able to handle most table requirements (with the possible exception of nested tables).

And, this is not to say that nested HTML tables are impossible in PmWiki --they just can't be easily created by wiki authors using the default wiki markup. A site administrator can of course create header/footer HTML code and other local customizations that make use of nested tables.

Example 1. A table using advanced markup.

(:table border=1 cellpadding=5 cellspacing=0:)
(:cell:) a1
(:cell:) b1
(:cell:) c1
(:cell:) d1
(:cellnr:) a2
(:cell:) b2
(:cell:) c2
(:cell:) d2
(:tableend:)

In HTML, this is the same as

<table border='1' cellpadding='5' cellspacing='0'>
  <tr>
    <td>a1</td>
    <td>b1</td>
    <td>c1</td>
    <td>d1</td>
  </tr>
  <tr>
    <td>a2</td>
    <td>b2</td>
    <td>c2</td>
    <td>d2</td>
  </tr>
</table>

Floating Table with bulleted navigation list

What if you wanted to create a nice little table like a table of contents in a page like this? In this example, the table is floating right and contains some links in a bulleted list. This is a nice demonstration of how it's possible to build a little table of contents in the page, which might navigate to other pages just within the same wiki group. Note that having a bulleted list won't work in a simple table - it only works inside an advanced table such as the example code used here.

(:table border=1 width=30% align=right bgcolor=#cccc99 cellspacing=0 :)
(:cellnr:)
'''Navigation Links'''
(:cellnr:)
*[[Tables]]
*[[Table directives]]
(:tableend:)

(:table border=1 width=30% align=right bgcolor=#cccc99 cellspacing=0 :)
(:cellnr colspan=2 align=center:)
'''Navigation Links'''
(:cellnr align=center:)
[[Tables]]
(:cell align=center:)
[[Table directives]]
(:tableend:)

Looking at the markup here, notice that we have used a #cccc99 hex color for the table background. also the (:cellnr:) markup creates a new row, a new cell and closes the row at the end.

You could take this concept a little further: since you might want each page in the group to contain the same table of contents, you can make ONE table like the above and put it in its own page. Then use an include (other pages) on any of your pages and bring in the table. The float (align) property will be honored in each page where it's included. Pretty sweet!