← Back to branch summary

~ubuntu-branches/ubuntu/natty/moin/natty-updates

« back to all changes in this revision

Viewing changes to wiki/underlay/pages/HelpOnTables/revisions/00000001

  • Committer: Bazaar Package Importer
  • Author(s): Jonas Smedegaard
  • Date: 2008-06-22 21:17:13 UTC
  • mto: This revision was merged to the branch mainline in revision 18.
  • Revision ID: james.westby@ubuntu.com-20080622211713-inlv5k4eifxckelr
Import upstream version 1.7.0

Show diffs side-by-side

added added

removed removed

Lines of Context:
wiki/underlay/pages/HelpOnTables/revisions/00000001
 
1
## Please edit system and help pages ONLY in the master wiki!
 
2
## For more information, please see MoinMoin:MoinDev/Translation.
 
3
##master-page:Unknown-Page
 
4
##master-date:Unknown-Date
 
5
#acl -All:write Default
 
6
#format wiki
 
7
#language en
 
8
== Table Markup ==
 
9
To create a table, you start and end a line using the table marker "{{{||}}}". Between those start and end markers, you can create any number of cells by separating them with "{{{||}}}". To get a centered cell that spans several columns, you start that cell with more than one cell marker. Adjacent lines of the same indent level containing table markup are combined into one table.
 
10
 
 
11
For more information on the possible markup, see HelpOnEditing.
 
12
 
 
13
=== Table Attributes ===
 
14
 
 
15
Apart from the option to repeat cell markers to get columns spanning several other columns, you can directly set many HTML table attributes. Any attributes have to be placed between angle brackets {{{<...>}}} directly after the cell marker.
 
16
 
 
17
The wiki-like markup has the following options:
 
18
 * {{{<-2>}}}: colspan
 
19
 * {{{<|2>}}}: rowspan
 
20
 
 
21
 * {{{<style="...">}}} will put that style info into cell (td) html
 
22
 * {{{<rowstyle="...">}}} will put that style info into row (tr) html
 
23
 * {{{<tablestyle="...">}}} will put that style info into table (table) html
 
24
 
 
25
 * {{{<class="...">}}} will put that CSS class into cell (td) html
 
26
 * {{{<rowclass="...">}}} will put that CSS class into row (tr) html
 
27
 * {{{<tableclass="...">}}} will put that class into table (table) html
 
28
 * {{{<id="...">}}} will put that CSS id into cell (td) html
 
29
 
 
30
The style stuff is ''all you need'' for styling your tables. Just use CSS formatted style there and it will be inlined in the generated HTML tag. Alternatively, the admin and the user (the admin in the theme file, the user via user preferences can extend moin's CSS by his own definitions, so users can refer to them using class or id. You can use several options at the same time by writing them one after the other within the same angle brackets (e.g. {{{<tablestyle="..." rowstyle="...">}}} on the first cell, to set both the table-wide style and the first-row style).
 
31
 
 
32
We still support the old table markup, but generate the effect by appending additional values to the `style` parameter:
 
33
 * {{{<50%>}}}: cell width (will append `width: 50%;` to style)
 
34
 * {{{<width="50%">}}}: does the same
 
35
 * {{{<tablewidth="100%">}}}: set table width to 100% (only valid in first table row)
 
36
 
 
37
 * {{{<(>}}}: left aligned (will append `text-align: left;` to style)
 
38
 * {{{<:>}}}: centered (will append `text-align: center;` to style)
 
39
 * {{{<)>}}}: right aligned (will append `text-align: right;` to style)
 
40
 * {{{<^>}}}: aligned to top (will append `vertical-align: top;` to style)
 
41
 * {{{<v>}}}: aligned to bottom (will append `vertical-align: bottom;` to style)
 
42
 
 
43
 * {{{<#XXXXXX>}}}: background color (will append `background-color: #XXXXXX;` to style)
 
44
 * {{{<bgcolor="#XXXXXX">}}} does the same
 
45
 * {{{<rowbgcolor="#XXXXXX">}}} set row background color (only valid in first cell)
 
46
 * {{{<tablebgcolor="#XXXXXX">}}} set table background color
 
47
 
 
48
If you use several conflicting options like {{{<(:)>}}}, the last option wins. There is no explicit option for vertical centering (''middle''), since that is always the default.
 
49
 
 
50
=== Example ===
 
51
{{{
 
52
 NEW STYLE: General table layout and HTML like options::
 
53
 ||||||<tablestyle="width: 80%">'''Heading'''||
 
54
 ||cell 1||cell2||cell 3||
 
55
 ||<rowspan=2> spanning rows||||<style="background-color: #E0E0FF;"> spanning 2 columns||
 
56
 ||<rowstyle="background-color: #FFFFE0;">cell2||cell 3||
 
57
 Cell width::
 
58
 || narrow ||<style="width: 99%; text-align: center;"> wide ||
 
59
 Spanning rows and columns::
 
60
 ||<|2> 2 rows || row 1 ||
 
61
 || row 2 ||
 
62
 ||<-2> row 3 over 2 columns ||
 
63
 Alignment::
 
64
 ||<style="text-align: left;">left ||<style="vertical-align: top; text-align: center;"|3> top ||<style="vertical-align: bottom;"|3> bottom ||
 
65
 ||<style="text-align: center;"> centered ||
 
66
 ||<style="text-align: right;"> right ||
 
67
 Fonts::
 
68
 || normal ||<style="font-weight: bold;"> bold ||<style="color: #FF0000;"> red ||<style="color: #FF0000; font-weight: bold;"> boldred ||
 
69
 Colors::
 
70
 ||<style="background-color: red;"> red ||<style="background-color: green;"> green ||<style="background-color: blue;"> blue ||
 
71
 
 
72
 OLD STYLE: General table layout and HTML like options::
 
73
 ||||||<tablewidth="80%">'''Heading'''||
 
74
 ||cell 1||cell2||cell 3||
 
75
 ||<rowspan=2> spanning rows||||<bgcolor="#E0E0FF"> spanning 2 columns||
 
76
 ||<rowbgcolor="#FFFFE0">cell2||cell 3||
 
77
 Cell width::
 
78
 || narrow ||<:99%> wide ||
 
79
 Spanning rows and columns::
 
80
 ||<|2> 2 rows || row 1 ||
 
81
 || row 2 ||
 
82
 ||<-2> row 3 over 2 columns ||
 
83
 Alignment::
 
84
 ||<(> left ||<^|3> top ||<v|3> bottom ||
 
85
 ||<:> centered ||
 
86
 ||<)> right ||
 
87
 Colors::
 
88
 ||<#FF8080> red ||<#80FF80> green ||<#8080FF> blue ||
 
89
 Line breaks within cells::
 
90
 || line 1[[BR]]line 2||
 
91
}}}
 
92
 
 
93
=== Display ===
 
94
 NEW STYLE: General table layout and HTML like options::
 
95
 ||||||<tablestyle="width: 80%">'''Heading'''||
 
96
 ||cell 1||cell2||cell 3||
 
97
 ||<rowspan=2> spanning rows||||<style="background-color: #E0E0FF;"> spanning 2 columns||
 
98
 ||<rowstyle="background-color: #FFFFE0;">cell2||cell 3||
 
99
 Cell width::
 
100
 || narrow ||<style="width: 99%; text-align: center;"> wide ||
 
101
 Spanning rows and columns::
 
102
 ||<|2> 2 rows || row 1 ||
 
103
 || row 2 ||
 
104
 ||<-2> row 3 over 2 columns ||
 
105
 Alignment::
 
106
 ||<style="text-align: left;">left ||<style="vertical-align: top; text-align: center;"|3> top ||<style="vertical-align: bottom;"|3> bottom ||
 
107
 ||<style="text-align: center;"> centered ||
 
108
 ||<style="text-align: right;"> right ||
 
109
 Fonts::
 
110
 || normal ||<style="font-weight: bold;"> bold ||<style="color: #FF0000;"> red ||<style="color: #FF0000; font-weight: bold;"> boldred ||
 
111
 Colors::
 
112
 ||<style="background-color: red;"> red ||<style="background-color: green;"> green ||<style="background-color: blue;"> blue ||
 
113
 
 
114
 OLD STYLE: General table layout and HTML like options::
 
115
 ||||||<tablewidth="80%">'''Heading'''||
 
116
 ||cell 1||cell2||cell 3||
 
117
 ||<rowspan=2> spanning rows||||<bgcolor="#E0E0FF"> spanning 2 columns||
 
118
 ||<rowbgcolor="#FFFFE0">cell2||cell 3||
 
119
 Cell width::
 
120
 || narrow ||<:99%> wide ||
 
121
 Spanning rows and columns::
 
122
 ||<|2> 2 rows || row 1 ||
 
123
 || row 2 ||
 
124
 ||<-2> row 3 over 2 columns ||
 
125
 Alignment::
 
126
 ||<(> left ||<^|3> top ||<v|3> bottom ||
 
127
 ||<:> centered ||
 
128
 ||<)> right ||
 
129
 Colors::
 
130
 ||<#FF8080> red ||<#80FF80> green ||<#8080FF> blue ||
 
131
 Line breaks within cells::
 
132
 || line 1<<BR>>line 2||
 
133
 
 
134
 
 
135
=== Insert Table Data from other sources ===
 
136
 * comma separated values: see [[HelpOnParsers#csvparser]]
 
137
 * include wiki pages: see [[HelpOnMacros/Include|Include]]
 
138
 
 
139
=== Bulleted lists and other complex content within cells ===
 
140
{{attachment:MiniPage.png}}
 
141
 * see [[MoinMoin:MacroMarket/MiniPage|MiniPage macro]]