1# dokuwiki-plugin-mobiletable
2
3https://www.dokuwiki.org/plugin:mobiletable
4
5This plugin creates a second representation of a table, where all columns are stacked on top of each other, which is only shown for mobile devices.
6This improves the mobile experience for wide tables as it prevents horizontal scrolling.
7
8In the mobile presentation (specified by your theme's `__phone_width__`) this:
9
10<table>
11    <tr>
12        <th> Name </th><th> Color </th><th> Size </th><th> Speed </th>
13    </tr>
14    <tr>
15        <th> Item 1 </th><td> Red </td><td> Small </td><td> 50 km/h </td>
16    </tr>
17    <tr>
18        <th> Item 2 </th><td> Green </td><td> Large </td><td> 30 km/h </td>
19    </tr>
20</table>
21
22```
23<mobiletable 1>
24^ Name   ^ Color ^ Size  ^ Speed   ^
25^ Item 1   | Red   | Small | 50 km/h |
26^ Item 2   | Green | Large | 30 km/h |
27</mobiletable>
28```
29
30...becomes this:
31
32<table>
33    <tr>
34        <th colspan="2"> Item 1 </th>
35    </tr>
36    <tr>
37        <td> Color </td><td> Red </td>
38    </tr>
39    <tr>
40        <td> Size </td><td> Small </td>
41    </tr>
42    <tr>
43        <td> Speed </td><td> 50 km/h </td>
44    </tr>
45    <tr>
46        <th colspan="2"> Item 2 </th>
47    </tr>
48    <tr>
49        <td> Color </td><td> Green </td>
50    </tr>
51    <tr>
52        <td> Size </td><td> Large </td>
53    </tr>
54    <tr>
55        <td> Speed </td><td> 30 km/h </td>
56    </tr>
57</table>
58
59## Syntax
60
61To activate mobile tables, wrap it in `<mobiletable>...</mobiletable>` syntax:
62
63```
64<mobiletable>
65^ Name   ^ Color ^ Size  ^ Speed   ^
66^ Item 1  | Red   | Small | 50 km/h |
67^ Item 2  | Green | Large | 30 km/h |
68</mobiletable>
69```
70
71This would create a mobile table like this:
72
73<table>
74    <tr>
75        <td> Name </td><td> Item 1 </td>
76    </tr>
77    <tr>
78        <td> Color </td><td> Red </td>
79    </tr>
80    <tr>
81        <td> Size </td><td> Small </td>
82    </tr>
83    <tr>
84        <td> Speed </td><td> 50 km/h </td>
85    </tr>
86    <tr>
87        <td> Name </td><td> Item 2 </td>
88    </tr>
89    <tr>
90        <td> Color </td><td> Green </td>
91    </tr>
92    <tr>
93        <td> Size </td><td> Large </td>
94    </tr>
95    <tr>
96        <td> Speed </td><td> 30 km/h </td>
97    </tr>
98</table>
99
100You may specify the index (starting with 1) of the column you want to make the main/index column.
101Using the first example again, your could also make the _Color_ column the main column:
102
103```
104<mobiletable 2>
105^ Name   ^ Color ^ Size  ^ Speed   ^
106^ Item 1  | Red    | Small | 50 km/h |
107^ Item 2  | Green  | Large | 30 km/h |
108</mobiletable>
109```
110
111<table>
112    <tr>
113        <th colspan="2"> Red </th>
114    </tr>
115    <tr>
116        <td> Name </td><td> Item 1 </td>
117    </tr>
118    <tr>
119        <td> Size </td><td> Small </td>
120    </tr>
121    <tr>
122        <td> Speed </td><td> 50 km/h </td>
123    </tr>
124    <tr>
125        <th colspan="2"> Green </th>
126    </tr>
127    <tr>
128        <td> Name </td><td> Item 2 </td>
129    </tr>
130    <tr>
131        <td> Size </td><td> Large </td>
132    </tr>
133    <tr>
134        <td> Speed </td><td> 30 km/h </td>
135    </tr>
136</table>
137
138Note that the previous example could also be expressed using the ''!''-syntax for backwards compatibility:
139
140```
141!^ Name   ^! Color ^ Size  ^ Speed   ^
142...
143```
144
145However, this syntax is not recommended anymore as it breaks section editing.
146