Help:Table: Difference between revisions

← Older edit Newer edit →

VisualWikitext

@@ Line 1: / Line 1: @@
-todo
+Tables can be used to layout contents horizontally and vertically. Tables can be made sortable, columns may be aligned, cells may be combined. See the following examples.
 :''For basic usage see [[Help:Editing #Tables]]''
@@ Line 5: / Line 5: @@
 == Some Examples ==
-table layout without border lines
+=== Table layout without border lines ===
+Layout contents vertically and horizontally (without making obvious that you use tables for this). Using the exclamation mark (<code>!</code>) instead of the pipe symbol (<code>|</code>) center-aligns the cell text and sets it to '''bold''' face.
   <nowiki>{|
-|-
 ! A
 ! B
@@ Line 20: / Line 21: @@
 {|
-|-
 ! A
 ! B
@@ Line 31: / Line 31: @@
 |}
-standard wiki table layout
+=== Standard wiki table layout ===
+A table with obvious heading style and decent lines to optically separate cells. You get this by adding <code>class="wikitable"</code> to the first line of the table.
   <nowiki>{| class="wikitable"
-|-
 ! A
 ! B
@@ Line 46: / Line 47: @@
 {| class="wikitable"
-|-
 ! A
 ! B
@@ Line 57: / Line 57: @@
 |}
-heading style for left and top cells
+=== Heading style for left and top cells ===
+Sometimes it's helpful to place the legend on the left side.
   <nowiki>{| class="wikitable"
-|-
 ! ??
 ! 1
@@ Line 75: / Line 76: @@
 {| class="wikitable"
-|-
 ! ??
 ! 1
@@ Line 89: / Line 89: @@
 |}
-sortable tables
+=== Sortable tables ===
+Tables can be sorted automatically by adding the <code>sortable</code> class. If you wish to disable sorting for a column (typically description or comments) add <code>class="unsortable"</code> to the column heading.
   <nowiki>{| class="wikitable sortable"
-|-
 ! Steps per Octave !! Step Size
 ! class="unsortable" | comments
@@ Line 106: / Line 107: @@
 {| class="wikitable sortable"
-|-
 ! Steps per Octave !! Step Size
 ! class="unsortable" | comments
@@ Line 121: / Line 121: @@
 == Special needs ==
-=== Adjusting Text Alignment ===
+=== Table title or description ===
+As to add a description or title to your table, use the pipe-plus combination <code>|+</code> at the beginning of the line. For better readability you may add an optional row separator (<code>|-</code>) in the following line.
+ <nowiki>{| class="wikitable"
+|+ title or description
+|-
+! A
+! B
+|-
+| 1
+| 2
+|-
+| x
+| xx
+|}</nowiki>
+{| class="wikitable"
+|+ title or description
+|-
+! A
+! B
+|-
+| 1
+| 2
+|-
+| x
+| xx
+|}
+=== Adjusting text alignment ===
+If you want to override the default text alignment for all cells, add the class <code>"center-all"</code> to the <code>class="wikitable"</code> statement at beginning of the table.
+==== for whole columns ====
+Add a the appropriate class(es) to the <code>class="wikitable"</code> statement at beginning of the table. Their name starts with the alignment specification (<code>left</code>, <code>center</code>, or <code>right</code>) and a number (1 to 9) after a minus sign (<code>-</code>).
+If you want to override the default text (left) alignment to make the first column right-aligned and second column center-aligned, add the class <code>"right-1"</code> and <code>"center-2"</code> to the <code>class="wikitable"</code> statement at beginning of the table.
+'''todo: example'''
+==== for single cells ====
 The table cells are left aligned by default, the heading cells are center aligned. You may change this via inline CSS style definitions:
@@ Line 141: / Line 184: @@
 |}
-If you want to override the default text alignment for all cells, place the inline CSS (for example <code>style="text-align:center;"</code>) directly at the beginning of the table, right after the <code>class="wikitable"</code> statement.
+== Combining table cells ==
+todo: internal description of colspans and rowspans
 === External helper tools ===
@@ Line 187: / Line 232: @@
 == See also ==
 * [[Help:Help]]
 * [[Help:Editing]]
 [[Category:Help]]
-[[Category:todo:expand|?]]
+[[Category:Todo:add example|?]]