table.html 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217
  1. <style>
  2. table {
  3. border-collapse: collapse;
  4. border-spacing: 0;
  5. border-color: #000000;
  6. }
  7. table, th, td {
  8. padding: 5px;
  9. border: 1px inset #000000;
  10. }
  11. table th,
  12. table td {
  13. min-width: 1em;
  14. }
  15. table th {
  16. background: #dadada;
  17. font-weight: normal;
  18. }
  19. table thead th {
  20. color: #ffffff;
  21. background: #666666;
  22. }
  23. </style>
  24. <div id="editor">
  25. <p>Table with everything:</p>
  26. <table>
  27. <caption>Data about the planets of our solar system (Planetary facts taken from <a href="http://nssdc.gsfc.nasa.gov/planetary/factsheet/" class="external external-icon" rel="noopener">Nasa's Planetary Fact Sheet - Metric</a>.</caption>
  28. <thead>
  29. <tr>
  30. <td colspan="2">&nbsp;</td>
  31. <th scope="col">Name</th>
  32. <th scope="col">Mass (10<sup>24</sup>kg)</th>
  33. <th scope="col">Diameter (km)</th>
  34. <th scope="col">Density (kg/m<sup>3</sup>)</th>
  35. <th scope="col">Gravity (m/s<sup>2</sup>)</th>
  36. <th scope="col">Length of day (hours)</th>
  37. <th scope="col">Distance from Sun (10<sup>6</sup>km)</th>
  38. <th scope="col">Mean temperature (°C)</th>
  39. <th scope="col">Number of moons</th>
  40. <th scope="col">Notes</th>
  41. </tr>
  42. </thead>
  43. <tbody>
  44. <tr>
  45. <th colspan="2" rowspan="4" scope="rowgroup">Terrestial planets</th>
  46. <th scope="row">Mercury</th>
  47. <td>0.330</td>
  48. <td>4,879</td>
  49. <td>5427</td>
  50. <td>3.7</td>
  51. <td>4222.6</td>
  52. <td>57.9</td>
  53. <td>167</td>
  54. <td>0</td>
  55. <td>Closest to the Sun</td>
  56. </tr>
  57. <tr>
  58. <th scope="row">Venus</th>
  59. <td>4.87</td>
  60. <td>12,104</td>
  61. <td>5243</td>
  62. <td>8.9</td>
  63. <td>2802.0</td>
  64. <td>108.2</td>
  65. <td>464</td>
  66. <td>0</td>
  67. <td>&nbsp;</td>
  68. </tr>
  69. <tr>
  70. <th scope="row">Earth</th>
  71. <td>5.97</td>
  72. <td>12,756</td>
  73. <td>5514</td>
  74. <td>9.8</td>
  75. <td>24.0</td>
  76. <td>149.6</td>
  77. <td>15</td>
  78. <td>1</td>
  79. <td>Our world</td>
  80. </tr>
  81. <tr>
  82. <th scope="row">Mars</th>
  83. <td>0.642</td>
  84. <td>6,792</td>
  85. <td>3933</td>
  86. <td>3.7</td>
  87. <td>24.7</td>
  88. <td>227.9</td>
  89. <td>-65</td>
  90. <td>2</td>
  91. <td>The red planet</td>
  92. </tr>
  93. <tr>
  94. <th scope="rowgroup" rowspan="4">Jovian planets</th>
  95. <th scope="rowgroup" rowspan="2">Gas giants</th>
  96. <th scope="row">Jupiter</th>
  97. <td>1898</td>
  98. <td>142,984</td>
  99. <td>1326</td>
  100. <td>23.1</td>
  101. <td>9.9</td>
  102. <td>778.6</td>
  103. <td>-110</td>
  104. <td>67</td>
  105. <td>The largest planet</td>
  106. </tr>
  107. <tr>
  108. <th scope="row">Saturn</th>
  109. <td>568</td>
  110. <td>120,536</td>
  111. <td>687</td>
  112. <td>9.0</td>
  113. <td>10.7</td>
  114. <td>1433.5</td>
  115. <td>-140</td>
  116. <td>62</td>
  117. <td>&nbsp;</td>
  118. </tr>
  119. <tr>
  120. <th scope="rowgroup" rowspan="2">Ice giants</th>
  121. <th scope="row">Uranus</th>
  122. <td>86.8</td>
  123. <td>51,118</td>
  124. <td>1271</td>
  125. <td>8.7</td>
  126. <td>17.2</td>
  127. <td>2872.5</td>
  128. <td>-195</td>
  129. <td>27</td>
  130. <td>&nbsp;</td>
  131. </tr>
  132. <tr>
  133. <th scope="row">Neptune</th>
  134. <td>102</td>
  135. <td>49,528</td>
  136. <td>1638</td>
  137. <td>11.0</td>
  138. <td>16.1</td>
  139. <td>4495.1</td>
  140. <td>-200</td>
  141. <td>14</td>
  142. <td>&nbsp;</td>
  143. </tr>
  144. <tr>
  145. <th colspan="2" scope="rowgroup">Dwarf planets</th>
  146. <th scope="row">Pluto</th>
  147. <td>0.0146</td>
  148. <td>2,370</td>
  149. <td>2095</td>
  150. <td>0.7</td>
  151. <td>153.3</td>
  152. <td>5906.4</td>
  153. <td>-225</td>
  154. <td>5</td>
  155. <td>Declassified as a planet in 2006, but this <a href="http://www.usatoday.com/story/tech/2014/10/02/pluto-planet-solar-system/16578959/" class="external external-icon" rel="noopener">remains controversial</a>.</td>
  156. </tr>
  157. </tbody>
  158. </table>
  159. <p>Table with 2 tbody:</p>
  160. <table>
  161. <tbody>
  162. <tr>
  163. <td>a</td>
  164. <td>b</td>
  165. <td>c</td>
  166. </tr>
  167. </tbody>
  168. <tbody>
  169. <tr>
  170. <td>a</td>
  171. <td>b</td>
  172. <td>c</td>
  173. </tr>
  174. </tbody>
  175. </table>
  176. <p>Table with no tbody:</p>
  177. <table>
  178. <tr>
  179. <td>a</td>
  180. <td>b</td>
  181. <td>c</td>
  182. </tr>
  183. <tr>
  184. <td>a</td>
  185. <td>b</td>
  186. <td>c</td>
  187. </tr>
  188. </table>
  189. <p>Table with thead section between two tbody sections</p>
  190. <table>
  191. <tbody>
  192. <tr>
  193. <td>2</td>
  194. </tr>
  195. </tbody>
  196. <thead>
  197. <tr>
  198. <td>1</td>
  199. </tr>
  200. </thead>
  201. <tbody>
  202. <tr>
  203. <td>3</td>
  204. </tr>
  205. </tbody>
  206. </table>
  207. </div>