dom_table.html 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15">
  5. <style>
  6. body { font-family: verdana, sans-serif;}
  7. table {
  8. margin-bottom: 2em;
  9. }
  10. thead {
  11. background-color: #eeeeee;
  12. }
  13. tbody {
  14. background-color: #ffffee;
  15. }
  16. th,td {
  17. padding: 3pt;
  18. }
  19. table.separate {
  20. border-collapse: separate;
  21. border-spacing: 5pt;
  22. border: 3pt solid #33d;
  23. }
  24. table.separate td {
  25. border: 2pt solid #33d;
  26. }
  27. table.collapse {
  28. border-collapse: collapse;
  29. border: 1pt solid black;
  30. }
  31. table.collapse td {
  32. border: 1pt solid black;
  33. }
  34. </style>
  35. </head>
  36. <body>
  37. border-collapse: separate
  38. <table class="separate">
  39. <thead>
  40. <tr>
  41. <th>head 1</th>
  42. <th>head 2</th>
  43. <th>head 3</th>
  44. <th>head 4</th>
  45. </tr>
  46. </thead>
  47. <tr>
  48. <td rowspan="2">cell 1</td>
  49. <td>cell 2</td>
  50. <td colspan="2">cell 3</td>
  51. </tr>
  52. <tr>
  53. <td style="border: 4px double black" colspan="2">cell 4</td>
  54. <td rowspan="2">cell 5</td>
  55. </tr>
  56. <tr>
  57. <td colspan="3">cell 6</td>
  58. </tr>
  59. <tr>
  60. <td colspan="4">cell 7</td>
  61. </tr>
  62. </table>
  63. border-collapse: collapse
  64. <table class="collapse">
  65. <thead>
  66. <tr>
  67. <th>head 1</th>
  68. <th>head 2</th>
  69. <th>head 3</th>
  70. <th>head 4</th>
  71. </tr>
  72. </thead>
  73. <tbody>
  74. <tr>
  75. <td>cell 1</td>
  76. <td>cell 2</td>
  77. <td>cell 3</td>
  78. <td>cell 4</td>
  79. </tr>
  80. <tr>
  81. <td colspan="2">cell 5</td>
  82. <td>cell 6</td>
  83. <td>cell 7</td>
  84. </tr>
  85. <tr>
  86. <td>cell 8</td>
  87. <td>cell 9</td>
  88. <td colspan="2">cell 10</td>
  89. </tr>
  90. </tbody>
  91. <tr>
  92. <td colspan="4">cell 11</td>
  93. </tr>
  94. </table>
  95. </body> </html>