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