8
0

small-tables-inline-css.html 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347
  1. <h2>
  2. <span style="font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;text-decoration: line-through; font-family: &quot;Trebuchet MS&quot;, Helvetica, sans-serif; font-size: 32px; background-color: rgb(194, 224, 244); color: rgb(224, 62, 45);">Sample text</span>
  3. <span style="font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;text-decoration: line-through; font-family: &quot;Trebuchet MS&quot;, Helvetica, sans-serif; font-size: 32px; background-color: rgb(194, 224, 244); color: rgb(224, 62, 45);">Sample text</span>
  4. <span style="font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;text-decoration: line-through; font-family: &quot;Trebuchet MS&quot;, Helvetica, sans-serif; font-size: 32px; background-color: rgb(194, 224, 244); color: rgb(224, 62, 45);">Sample text</span>
  5. </h2>
  6. <figure>
  7. <table style="border: 1px solid green;background:#fdfd77;width:200px;height:140px">
  8. <thead>
  9. <tr>
  10. <td><p>Column A</p></td>
  11. <td style="border:2px dashed black;background-color: lightblue"><p>Column B</p></td>
  12. <td style="background: palevioletred"><p>Column C</p></td>
  13. </tr>
  14. </thead>
  15. <tbody>
  16. <tr>
  17. <td style="border-color: deeppink deepskyblue;border-style: solid;border-width: 1px;border-bottom-width: 2px;border-right-style: dotted;">
  18. <p>A1</p>
  19. </td>
  20. <td style="border: 1px solid blue;"><p>B1</p></td>
  21. <td style="border: 1px solid red;"><p>C1</p></td>
  22. </tr>
  23. <tr>
  24. <td style="border-right:1px solid blue;"><p>A2</p></td>
  25. <td style="background:transparent;"><p>B2</p></td>
  26. <td><p>C3</p></td>
  27. </tr>
  28. </tbody>
  29. </table>
  30. </figure>
  31. <figure>
  32. <table class=MsoTableGrid border=1 cellspacing=0 cellpadding=0 style='border-collapse:collapse;border:none;mso-border-alt:solid windowtext .5pt;
  33. mso-yfti-tbllook:1184;mso-padding-alt:0in 5.4pt 0in 5.4pt'>
  34. <tr style='mso-yfti-irow:0;mso-yfti-firstrow:yes'>
  35. <td width=30 valign=top style='width:22.25pt;border:solid windowtext 1.0pt;
  36. mso-border-alt:solid windowtext .5pt;background:#92D050;padding:0in 5.4pt 0in 5.4pt'>
  37. <p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
  38. normal'>w
  39. </p>
  40. </td>
  41. <td width=220 valign=top style='width:164.75pt;border-top:solid windowtext 1.0pt;
  42. border-left:none;border-bottom:dotted #FFC000 3.0pt;border-right:solid windowtext 1.0pt;
  43. mso-border-left-alt:solid windowtext .5pt;mso-border-alt:solid windowtext .5pt;
  44. mso-border-bottom-alt:dotted #FFC000 3.0pt;padding:0in 5.4pt 0in 5.4pt'>
  45. <p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
  46. normal'>
  47. </p>
  48. </td>
  49. <td width=125 valign=top style='width:93.5pt;border:solid windowtext 1.0pt;
  50. border-left:none;mso-border-left-alt:solid windowtext .5pt;mso-border-alt:
  51. solid windowtext .5pt;padding:0in 5.4pt 0in 5.4pt'>
  52. <p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
  53. normal'>
  54. </p>
  55. </td>
  56. <td width=125 valign=top style='width:93.5pt;border:solid windowtext 1.0pt;
  57. border-left:none;mso-border-left-alt:solid windowtext .5pt;mso-border-alt:
  58. solid windowtext .5pt;padding:0in 5.4pt 0in 5.4pt'>
  59. <p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
  60. normal'>
  61. </p>
  62. </td>
  63. <td width=138 valign=top style='width:93.5pt;border:solid windowtext 1.0pt;
  64. border-left:none;mso-border-left-alt:solid windowtext .5pt;mso-border-alt:
  65. solid windowtext .5pt;padding:0in 5.4pt 0in 5.4pt'>
  66. <p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
  67. normal'>
  68. </p>
  69. </td>
  70. </tr>
  71. <tr style='mso-yfti-irow:1'>
  72. <td width=30 valign=top style='width:22.25pt;border-top:none;border-left:
  73. solid windowtext 1.0pt;border-bottom:solid windowtext 1.0pt;border-right:
  74. dotted #FFC000 3.0pt;mso-border-top-alt:solid windowtext .5pt;mso-border-alt:
  75. solid windowtext .5pt;mso-border-right-alt:dotted #FFC000 3.0pt;background:
  76. #92D050;padding:0in 5.4pt 0in 5.4pt'>
  77. <p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
  78. normal'>
  79. </p>
  80. </td>
  81. <td width=220 valign=top style='width:164.75pt;border-top:none;border-left:
  82. none;border-bottom:dotted #FFC000 3.0pt;border-right:dotted #FFC000 3.0pt;
  83. mso-border-top-alt:dotted #FFC000 3.0pt;mso-border-left-alt:dotted #FFC000 3.0pt;
  84. padding:0in 5.4pt 0in 5.4pt'>
  85. <p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
  86. normal'>Funny border
  87. </p>
  88. </td>
  89. <td width=125 valign=top style='width:93.5pt;border-top:none;border-left:
  90. none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt;
  91. mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:dotted #FFC000 3.0pt;
  92. mso-border-alt:solid windowtext .5pt;mso-border-left-alt:dotted #FFC000 3.0pt;
  93. padding:0in 5.4pt 0in 5.4pt'>
  94. <p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
  95. normal'>
  96. </p>
  97. </td>
  98. <td width=125 valign=top style='width:93.5pt;border-top:none;border-left:
  99. none;border-bottom:dashed red 1.0pt;border-right:solid windowtext 1.0pt;
  100. mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
  101. mso-border-alt:solid windowtext .5pt;mso-border-bottom-alt:dashed red .5pt;
  102. padding:0in 5.4pt 0in 5.4pt'>
  103. <p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
  104. normal'>Border bottom
  105. </p>
  106. </td>
  107. <td width=138 valign=top style='width:93.5pt;border-top:none;border-left:
  108. none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt;
  109. mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
  110. mso-border-alt:solid windowtext .5pt;padding:0in 5.4pt 0in 5.4pt'>
  111. <p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
  112. normal'>
  113. </p>
  114. </td>
  115. </tr>
  116. <tr style='mso-yfti-irow:2;height:70.35pt'>
  117. <td width=30 valign=top style='width:22.25pt;border:solid windowtext 1.0pt;
  118. border-top:none;mso-border-top-alt:solid windowtext .5pt;mso-border-alt:solid windowtext .5pt;
  119. background:#92D050;padding:0in 5.4pt 0in 5.4pt;height:70.35pt'>
  120. <p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
  121. normal'>
  122. </p>
  123. </td>
  124. <td width=220 valign=top style='width:164.75pt;border-top:none;border-left:
  125. none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt;
  126. mso-border-top-alt:dotted #FFC000 3.0pt;mso-border-left-alt:solid windowtext .5pt;
  127. mso-border-alt:solid windowtext .5pt;mso-border-top-alt:dotted #FFC000 3.0pt;
  128. padding:0in 5.4pt 0in 5.4pt;height:70.35pt'>
  129. <p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
  130. normal'>
  131. </p>
  132. </td>
  133. <td width=125 valign=top style='width:93.5pt;border-top:none;border-left:
  134. none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt;
  135. mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
  136. mso-border-alt:solid windowtext .5pt;padding:0in 5.4pt 0in 5.4pt;height:70.35pt'>
  137. <p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
  138. normal'>
  139. </p>
  140. </td>
  141. <td width=125 valign=top style='width:93.5pt;border-top:none;border-left:
  142. none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt;
  143. mso-border-top-alt:dashed red .5pt;mso-border-left-alt:solid windowtext .5pt;
  144. mso-border-alt:solid windowtext .5pt;mso-border-top-alt:dashed red .5pt;
  145. padding:0in 5.4pt 0in 5.4pt;height:70.35pt'>
  146. <p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
  147. normal'>
  148. </p>
  149. </td>
  150. <td width=138 valign=top style='width:93.5pt;border-top:none;border-left:
  151. none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt;
  152. mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
  153. mso-border-alt:solid windowtext .5pt;padding:.1in .5in .5in .5in;height:70.35pt'>
  154. <p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
  155. normal'>margin
  156. </p>
  157. </td>
  158. </tr>
  159. <tr style='mso-yfti-irow:3;height:31.0pt'>
  160. <td width=30 valign=top style='width:22.25pt;border:solid windowtext 1.0pt;
  161. border-top:none;mso-border-top-alt:solid windowtext .5pt;mso-border-alt:solid windowtext .5pt;
  162. background:#92D050;padding:0in 5.4pt 0in 5.4pt;height:31.0pt'>
  163. <p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
  164. normal'>
  165. </p>
  166. </td>
  167. <td width=220 valign=top style='width:164.75pt;border-top:none;border-left:
  168. none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt;
  169. mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
  170. mso-border-alt:solid windowtext .5pt;padding:0in 5.4pt 0in 5.4pt;height:31.0pt'>
  171. <p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
  172. normal'>
  173. </p>
  174. </td>
  175. <td width=125 valign=top style='width:93.5pt;border-top:none;border-left:
  176. none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt;
  177. mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
  178. mso-border-alt:solid windowtext .5pt;padding:0in 5.4pt 0in 5.4pt;height:31.0pt'>
  179. <p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
  180. normal'>TL
  181. </p>
  182. </td>
  183. <td width=125 valign=top style='width:93.5pt;border-top:none;border-left:
  184. none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt;
  185. mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
  186. mso-border-alt:solid windowtext .5pt;padding:0in 5.4pt 0in 5.4pt;height:31.0pt'>
  187. <p class=MsoNormal align=center style='margin-bottom:0in;margin-bottom:.0001pt;
  188. text-align:center;line-height:normal'>TC
  189. </p>
  190. </td>
  191. <td width=138 valign=top style='width:93.5pt;border-top:none;border-left:
  192. none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt;
  193. mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
  194. mso-border-alt:solid windowtext .5pt;padding:0in 5.4pt 0in 5.4pt;height:31.0pt'>
  195. <p class=MsoNormal align=right style='margin-bottom:0in;margin-bottom:.0001pt;
  196. text-align:right;line-height:normal'>TR
  197. </p>
  198. </td>
  199. </tr>
  200. <tr style='mso-yfti-irow:4;height:31.0pt'>
  201. <td width=30 valign=top style='width:22.25pt;border:solid windowtext 1.0pt;
  202. border-top:none;mso-border-top-alt:solid windowtext .5pt;mso-border-alt:solid windowtext .5pt;
  203. background:#92D050;padding:0in 5.4pt 0in 5.4pt;height:31.0pt'>
  204. <p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
  205. normal'>
  206. </p>
  207. </td>
  208. <td width=220 valign=top style='width:164.75pt;border:none;border-right:solid windowtext 1.0pt;
  209. mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
  210. mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
  211. mso-border-right-alt:solid windowtext .5pt;padding:0in 5.4pt 0in 5.4pt;
  212. height:31.0pt'>
  213. <p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
  214. normal'>
  215. </p>
  216. </td>
  217. <td width=125 style='width:93.5pt;border-top:none;border-left:none;
  218. border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt;
  219. mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
  220. mso-border-alt:solid windowtext .5pt;padding:0in 5.4pt 0in 5.4pt;height:31.0pt'>
  221. <p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
  222. normal'>L
  223. </p>
  224. </td>
  225. <td width=125 style='width:93.5pt;border-top:none;border-left:none;
  226. border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt;
  227. mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
  228. mso-border-alt:solid windowtext .5pt;padding:0in 5.4pt 0in 5.4pt;height:31.0pt'>
  229. <p class=MsoNormal align=center style='margin-bottom:0in;margin-bottom:.0001pt;
  230. text-align:center;line-height:normal'>C
  231. </p>
  232. </td>
  233. <td width=138 style='width:93.5pt;border-top:none;border-left:none;
  234. border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt;
  235. mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
  236. mso-border-alt:solid windowtext .5pt;padding:0in 5.4pt 0in 5.4pt;height:31.0pt'>
  237. <p class=MsoNormal align=right style='margin-bottom:0in;margin-bottom:.0001pt;
  238. text-align:right;line-height:normal'>R
  239. </p>
  240. </td>
  241. </tr>
  242. <tr style='mso-yfti-irow:5;mso-yfti-lastrow:yes;height:30.1pt'>
  243. <td width=30 valign=top style='width:22.25pt;border-top:none;border-left:
  244. solid windowtext 1.0pt;border-bottom:solid windowtext 1.0pt;border-right:
  245. none;mso-border-top-alt:solid windowtext .5pt;mso-border-top-alt:solid windowtext .5pt;
  246. mso-border-left-alt:solid windowtext .5pt;mso-border-bottom-alt:solid windowtext .5pt;
  247. background:#92D050;padding:0in 5.4pt 0in 5.4pt;height:30.1pt'>
  248. <p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
  249. normal'>
  250. </p>
  251. </td>
  252. <td width=220 valign=top style='width:164.75pt;border:none;padding:0in 5.4pt 0in 5.4pt;
  253. height:30.1pt'>
  254. <p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
  255. normal'>No border
  256. </p>
  257. </td>
  258. <td width=125 valign=bottom style='width:93.5pt;border-top:none;border-left:
  259. none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt;
  260. mso-border-top-alt:solid windowtext .5pt;mso-border-top-alt:solid windowtext .5pt;
  261. mso-border-bottom-alt:solid windowtext .5pt;mso-border-right-alt:solid windowtext .5pt;
  262. padding:0in 5.4pt 0in 5.4pt;height:30.1pt'>
  263. <p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
  264. normal'>BL
  265. </p>
  266. </td>
  267. <td width=125 valign=bottom style='width:93.5pt;border-top:none;border-left:
  268. none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt;
  269. mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
  270. mso-border-alt:solid windowtext .5pt;padding:0in 5.4pt 0in 5.4pt;height:30.1pt'>
  271. <p class=MsoNormal align=center style='margin-bottom:0in;margin-bottom:.0001pt;
  272. text-align:center;line-height:normal'>BC
  273. </p>
  274. </td>
  275. <td width=138 valign=bottom style='width:93.5pt;border-top:none;border-left:
  276. none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt;
  277. mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
  278. mso-border-alt:solid windowtext .5pt;padding:0in 5.4pt 0in 5.4pt;height:30.1pt'>
  279. <p class=MsoNormal align=right style='margin-bottom:0in;margin-bottom:.0001pt;
  280. text-align:right;line-height:normal'>BR
  281. </p>
  282. </td>
  283. </tr>
  284. </table>
  285. </figure>