tableselection.html 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195
  1. <style>
  2. body {
  3. font-family: Helvetica, Arial, sans-serif;
  4. font-size: 14px;
  5. }
  6. .print-selected {
  7. background: #b8e3ff;
  8. }
  9. /* This shouldn't be needed. See https://github.com/ckeditor/ckeditor5/issues/6314 */
  10. .external-source td, .external-source th {
  11. border: solid 1px hsl(0, 0%, 85%);
  12. }
  13. /* It should not create entire viewport scroll. */
  14. pre {
  15. overflow: auto;
  16. }
  17. </style>
  18. <h3>A "content" test editor</h3>
  19. <div id="editor-content">
  20. <p>Jelly-o topping chocolate danish. Powder donut dragée cupcake sesame snaps cotton candy. Cotton candy pudding apple pie liquorice
  21. sugar plum cookie. Powder gummi bears macaroon. Gingerbread soufflé liquorice jelly-o marzipan pudding. Toffee sweet candy canes danish
  22. macaroon cotton candy fruitcake. Sesame snaps cake cookie chocolate cupcake. Ice cream pie apple pie sweet. Wafer ice cream gingerbread
  23. fruitcake donut jelly sweet. Sugar plum chocolate gummi bears. Jelly-o oat cake wafer brownie gingerbread pie dragée. Marshmallow
  24. marzipan candy canes. Cotton candy liquorice cake soufflé pie candy.</p>
  25. <figure class="table">
  26. <table>
  27. <thead>
  28. <tr>
  29. <th>0</th>
  30. <th>1</th>
  31. <th>2</th>
  32. <th>3</th>
  33. <th>4</th>
  34. </tr>
  35. </thead>
  36. <tbody>
  37. <tr>
  38. <td>a</td>
  39. <td>b</td>
  40. <td><strong>c</strong></td>
  41. <td><a href="https://example.com">d</a></td>
  42. <td>e</td>
  43. </tr>
  44. <tr>
  45. <td><i>f</i></td>
  46. <td><i>g</i></td>
  47. <td><i><strong>h</strong></i></td>
  48. <td><i>i</i></td>
  49. <td><i>j</i></td>
  50. </tr>
  51. <tr>
  52. <td>k</td>
  53. <td>l</td>
  54. <td><strong>m</strong></td>
  55. <td>
  56. <p>n</p>
  57. <figure class="image image-style-side">
  58. <img src="sample.jpg" />
  59. <figcaption>Caption!</figcaption>
  60. </figure>
  61. </td>
  62. <td>o</td>
  63. </tr>
  64. <tr>
  65. <td>p</td>
  66. <td>
  67. <ul>
  68. <li>q</li>
  69. <li>q</li>
  70. </ul>
  71. </td>
  72. <td>
  73. <ol>
  74. <li>r</li>
  75. <li>r</li>
  76. </ol>
  77. </td>
  78. <td>s</td>
  79. <td>
  80. <blockquote><p>t</p></blockquote>
  81. <p>t</p></td>
  82. </tr>
  83. </tbody>
  84. </table>
  85. </figure>
  86. <p>Halvah oat cake lemon drops. Cake tart caramels. Topping soufflé cheesecake. Chocolate bar sugar plum pastry sesame snaps bear claw
  87. gummies cotton candy topping. Tootsie roll topping cake chocolate bar marshmallow lemon drops. Cheesecake cookie croissant chupa
  88. chups. Biscuit jujubes lollipop fruitcake sesame snaps halvah. Marzipan croissant dessert chocolate cheesecake halvah jelly beans.
  89. Caramels pastry bear claw oat cake sugar plum muffin sweet roll cake. Chocolate bar sweet roll sweet roll bonbon apple pie pastry
  90. lemon drops icing. Apple pie wafer marzipan. Cake donut macaroon pudding. Gummi bears wafer toffee chocolate bar bear claw.
  91. Fruitcake jelly chocolate bar.</p>
  92. </div>
  93. <h3>A "geometry" test editor</h3>
  94. <div id="editor-geometry">
  95. <figure class="table">
  96. <table>
  97. <thead>
  98. <tr>
  99. <th>a</th>
  100. <th>b</th>
  101. <th>c</th>
  102. <th>d</th>
  103. <th>e</th>
  104. <th>f</th>
  105. <th>g</th>
  106. <th>h</th>
  107. <th>i</th>
  108. </tr>
  109. </thead>
  110. <tbody>
  111. <tr>
  112. <td>00</td>
  113. <td>01</td>
  114. <td rowspan="4">02</td>
  115. <td>03</td>
  116. <td colspan="2" rowspan="7">04</td>
  117. <td>06</td>
  118. <td>07</td>
  119. <td>08</td>
  120. </tr>
  121. <tr>
  122. <td>10</td>
  123. <td>11</td>
  124. <td>13</td>
  125. <td>16</td>
  126. <td>17</td>
  127. <td>18</td>
  128. </tr>
  129. <tr>
  130. <td>20</td>
  131. <td>21</td>
  132. <td>23</td>
  133. <td colspan="3">26</td>
  134. </tr>
  135. <tr>
  136. <td>30</td>
  137. <td>31</td>
  138. <td>33</td>
  139. <td>36</td>
  140. <td colspan="2">37</td>
  141. </tr>
  142. <tr>
  143. <td colspan="4">40</td>
  144. <td>46</td>
  145. <td>47</td>
  146. <td>48</td>
  147. </tr>
  148. <tr>
  149. <td>50</td>
  150. <td>51</td>
  151. <td>52</td>
  152. <td>53</td>
  153. <td rowspan="4">56</td>
  154. <td>57</td>
  155. <td>58</td>
  156. </tr>
  157. <tr>
  158. <td>60</td>
  159. <td colspan="3">61</td>
  160. <td>67</td>
  161. <td>68</td>
  162. </tr>
  163. <tr>
  164. <td>70</td>
  165. <td rowspan="2">71</td>
  166. <td>72</td>
  167. <td>73</td>
  168. <td>74</td>
  169. <td>75</td>
  170. <td>77</td>
  171. <td>78</td>
  172. </tr>
  173. <tr>
  174. <td>80</td>
  175. <td>82</td>
  176. <td>83</td>
  177. <td>84</td>
  178. <td>85</td>
  179. <td>87</td>
  180. <td>88</td>
  181. </tr>
  182. </tbody>
  183. </table>
  184. </figure>
  185. </div>
  186. <h2>Model contents:</h2>
  187. <pre><code id="model"></code></pre>