Tables are a very powerful way to organize information on a wiki page. As is often the case with power comes complexity and confusion. So this is where the advanced editing techniques part of the tutorial begins. I hope you will continue reading, because I think simple tables will benefit you greatly. Even if you never create a table, it will help you gain the confidence to edit pages that have tables on them.
Basic Table construction
Table are made up of columns and rows that intersect to create individual cells. There are four basic symbols used to make up a table.
| {| | The beginning of a table |
| |- | A New row |
| || | A new column |
| |} | The end of a table |
A simple table looks like this:
{|
|-
| a || b
|-
| c || d
|}
The result:
| a | b |
| c | d |
The table can also be built like this with the same result.
{|
|-
| a
| b
|-
| c
| d
|}
Options
Wiki tables support the same options as XHTML tables and CSS styles. The most common options you will see are:
XHTML – separated by a single space
border = “1” Adds a border to the table. Larger numbers equal a thicker border
cellspacing = “1” Controls the distance between the edges of cells. Larger numbers equal greater distance
cellpadding =”1” Controls the amount of whitespace around text in a cell. Larger numbers equal more whitespace
CSS Styles - separated by a semi-colon “;”
style = “border-collapse:collapse” Collapses the raised border into a line
style = “background:#fff” Controls the background color of the table, row, or cell. Uses both HTML color codes and names
style = “color:#fff” Controls the color of the text in the table, row or cell. Uses both HTML color codes and names
These codes can be used one at a time or combined. I’m going to combine a few.
{| border=”1″ style=”border-collapse:collapse;background:lightblue ”
|-
| a || b
|-
| c || d
|}
Result:
| a | b |
| c | d |
Apply an option to a Table, Row, or Cell
In the previous example I applied the options to the whole table by place them on the first line right after {|. You can also apply these options to a single cell or a row. There’s no easy way to apply them to an entire column. The best method is to nest tables. That’s a bit too advanced for this tutorial. Instructions on how to do that can be found in the wiki Help Section here.
To apply an option to a specific row place the option after the row delimiter |-.
|- style=”background:lightblue”
To apply an option to a specific cell add the option a | after the cell delimiter.
|- style=”background:pink” | c || style=”background:red” | d
Different colors applied to a row and to a cell.
{| border=”1″ style=”border-collapse:collapse;background:#fff”
|- style=”background:lightblue”
| a || b
|-
| style=”background:pink” | c || d
|}
Result:
| a | b |
| c | d |
Merging Cells
Merging cells across multiple rows and columns can be useful. Use the rowspan and colspan options to do this.
Rowspan will cause a cell to span 2 rows. See Cell C below.
Colspan will cause a cell to span multiple columns. See Cell f below.
{|border=1 style=”border-collapse:collapse;background:#fff”
|-
| a || b || rowspan=”2″ | c
|-
| d || e
|-
| colspan=”2″ | f || g
|}
Result:
| a | b | c |
| d | e | |
| f | g | |
Controlling Width
By default the table will adjust its width based on the length of the text, which is not always desirable. The width of a table or columns can be controlled using the width option. On the first line the option controls the overall width of the table relative to the width of the webpage. By applying the option to each cell the width of the individual columns can be controlled. You can specify the width with either pixels or percentages. If you use percentages, the sum of the widths for the columns must equal 100%.
{| border=1 style=”border-collapse:collapse;background:#fff” width=”75%”
|-
| width=”25%” | a || width=”75%” | b
|-
| c || d
|}
Result:
| a | b |
| c | d |
This is a basic overview of how tables can be constructed and customized with wiki mark-up. There are many more options available for custmizing tables. For more options and examples visit the Help Page.
Next: Become a Contributor Part 5: Custom Editing Features of WikiKnitting
Quick Links
Part 1: Become a Contributor to WikiKnitting
Part 2: Wiki Editing Basics
Part 3: Adding Images
0 Responses to “Become a Contributor Part 4 - Using Tables”