HTML中的复杂表表达式

时间：2015-07-29 14:05:23

标签： html html-table

我制作了一个html文件来重建文档图像中的表格。

表格图片

enter image description here

我的想法（每个数字代表行序列。）

enter image description here

我做了什么

enter image description here 

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<style>
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
    padding: 4px;
</style>
<table x=452 y=846 width=506 height=461>
  <tr>
    <td align=center width=59 height=56 rowspan=3 colspan=1>X</td>
    <td align=center width=68 height=33 rowspan=2 colspan=1>X</td>
    <td align=center width=140 height=10 rowspan=1 colspan=2>X</td>
    <td align=center width=68 height=56 rowspan=3 colspan=1>X</td>
    <td align=center width=131 height=10 rowspan=1 colspan=2>X</td>
  </tr>
  <tr>
    <td align=center width=68 height=19 rowspan=1 colspan=1>X</td>
    <td align=center width=68 height=19 rowspan=1 colspan=1>X</td>
    <td align=center width=68 height=19 rowspan=1 colspan=1>X</td>
    <td align=center width=59 height=19 rowspan=1 colspan=1>X</td>
  </tr>
  <tr>
    <td align=center width=140 height=19 rowspan=1 colspan=2>X</td>
    <td align=center width=68 height=19 rowspan=1 colspan=1>X</td>
    <td align=center width=68 height=19 rowspan=1 colspan=1>X</td>
    <td align=center width=59 height=65 rowspan=3 colspan=1>X</td>
  </tr>
  <tr>
    <td align=center width=59 height=19 rowspan=1 colspan=1>X</td>
    <td align=center width=140 height=19 rowspan=1 colspan=2>X</td>
    <td align=center width=212 height=19 rowspan=1 colspan=3>X</td>
  </tr>
  <tr>
    <td align=center width=59 height=19 rowspan=1 colspan=1>X</td>
    <td align=center width=140 height=19 rowspan=1 colspan=2>X</td>
    <td align=center width=68 height=42 rowspan=2 colspan=1>X</td>
    <td align=center width=140 height=19 rowspan=1 colspan=2>X</td>
  </tr>
  <tr>
    <td align=center width=59 height=19 rowspan=1 colspan=1>X</td>
    <td align=center width=140 height=19 rowspan=1 colspan=2>X</td>
    <td align=center width=203 height=19 rowspan=1 colspan=3>X</td>
  </tr>
  <tr>
    <td align=center width=59 height=110 rowspan=4 colspan=1>X</td>
    <td align=center width=140 height=64 rowspan=2 colspan=2>X</td>
    <td align=center width=68 height=19 rowspan=1 colspan=1>X</td>
    <td align=center width=203 height=19 rowspan=1 colspan=3>X</td>
  </tr>
  <tr>
    <td align=center width=68 height=87 rowspan=3 colspan=1>X</td>
    <td align=center width=203 height=87 rowspan=3 colspan=3>X</td>
  </tr>
  <tr>
    <td align=center width=68 height=19 rowspan=1 colspan=1>X</td>
    <td align=center width=68 height=19 rowspan=1 colspan=1>X</td>
  </tr>
  <tr>
    <td align=center width=68 height=19 rowspan=1 colspan=1>X</td>
    <td align=center width=68 height=19 rowspan=1 colspan=1>X</td>
  </tr>
  <tr>
    <td align=center width=59 height=19 rowspan=1 colspan=1>X</td>
    <td align=center width=284 height=19 rowspan=1 colspan=4>X</td>
    <td align=center width=68 height=19 rowspan=1 colspan=1>X</td>
    <td align=center width=59 height=42 rowspan=2 colspan=1>X</td>
  </tr>
  <tr>
    <td align=center width=203 height=19 rowspan=1 colspan=3>X</td>
    <td align=center width=68 height=19 rowspan=1 colspan=1>X</td>
    <td align=center width=68 height=42 rowspan=2 colspan=1>X</td>
    <td align=center width=68 height=42 rowspan=2 colspan=1>X</td>
  </tr>
  <tr>
    <td align=center width=203 height=111 rowspan=5 colspan=3>X</td>
    <td align=center width=68 height=19 rowspan=1 colspan=1>X</td>
    <td align=center width=59 height=19 rowspan=1 colspan=1>X</td>
  </tr>
  <tr>
    <td align=center width=68 height=19 rowspan=1 colspan=1>X</td>
    <td align=center width=68 height=19 rowspan=1 colspan=1>X</td>
    <td align=center width=68 height=19 rowspan=1 colspan=1>X</td>
    <td align=center width=59 height=19 rowspan=1 colspan=1>X</td>
  </tr>
  <tr>
    <td align=center width=68 height=19 rowspan=1 colspan=1>X</td>
    <td align=center width=68 height=19 rowspan=1 colspan=1>X</td>
    <td align=center width=131 height=42 rowspan=2 colspan=2>X</td>
  </tr>
  <tr>
    <td align=center width=68 height=65 rowspan=3 colspan=1>X</td>
    <td align=center width=68 height=65 rowspan=3 colspan=1>X</td>
    <td align=center width=131 height=19 rowspan=1 colspan=2>X</td>
  </tr>
  <tr>
    <td align=center width=59 height=19 rowspan=1 colspan=1>X</td>
    <td align=center width=140 height=19 rowspan=1 colspan=2>X</td>
    <td align=center width=131 height=19 rowspan=1 colspan=2>X</td>
  </tr>
  <tr>
    <td align=center width=59 height=10 rowspan=1 colspan=1>X</td>
    <td align=center width=419 height=10 rowspan=1 colspan=6>X</td>
  </tr>
</table>
</body>
</html>

有谁知道为什么不正确？我用“tag td”制作了59个细胞，但是我能看到的细胞更多。

1 个答案:

答案 0 :(得分：2)

    <!DOCTYPE html>
<html>
<head>
  <title></title>

  <style>
  table{ border-top: 1px solid #ddd; border-left: 1px solid #ddd; margin:0; padding:0; border-spacing:0; text-align: center;}
  table td { border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; margin:0; padding:0; width:50px;}
  table tr { height: 22px; }

  .first-row { background-color: red; }
  .second-row { background-color: orange; }
  .third-row { background-color: yellow; }
  .forth-row { background-color: green; }
  .fifth-row { background-color: cornflowerblue; }
  .sixth-row { background-color: blue; }
  .seventh-row { background-color: purple; }
  </style>
</head>
<body>

<table>
  <!-- 1 row -->
  <tr class="first-row">
    <td rowspan="3">1</td>
    <td rowspan="2">&nbsp;</td>
    <td colspan="2">&nbsp;</td>
    <!-- <td></td> -->
    <td rowspan="3">&nbsp;</td>
    <td colspan="2">&nbsp;</td>
    <!-- <td></td> -->
  </tr>

  <!-- 2 row -->
  <tr class="second-row">
    <!-- <td></td> -->
    <!-- <td></td> -->
    <td>2</td>
    <td>&nbsp;</td>
    <!-- <td></td> -->
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>

  <!-- 3 row -->
  <tr class="third-row">
    <!-- <td></td>  -->
    <td colspan="2">3</td>
    <!-- <td></td>  -->
    <td>&nbsp;</td>
    <!-- <td></td>  -->
    <td>&nbsp;</td>
    <td rowspan="3">&nbsp;</td>
  </tr>

  <!-- 4 row -->
  <tr class="forth-row">
    <td>4</td>
    <td colspan="2">&nbsp;</td>
    <!-- <td></td> -->
    <td colspan="3">&nbsp;</td>
    <!-- <td></td> -->
    <!-- <td></td> -->
    <!-- <td></td> -->
  </tr>

  <!-- 5 row -->
  <tr class="fifth-row">
    <td>5</td>
    <td colspan="2">&nbsp;</td>
    <!-- <td></td> -->
    <td rowspan="2">&nbsp;</td>
    <td colspan="2">&nbsp;</td>
    <!-- <td></td> -->
    <!-- <td></td> -->
  </tr>

  <!-- 6 row -->
  <tr class="sixth-row">
    <td>6</td>
    <td colspan="2">&nbsp;</td>
    <!-- <td></td> -->
    <!-- <td></td> -->
    <td colspan="3">&nbsp;</td>
    <!-- <td></td> -->
    <!-- <td></td> -->
  </tr>
  <!-- 7 row -->
  <tr class="seventh-row">
    <td rowspan="4">7</td>
    <td rowspan="2" colspan="2">&nbsp;</td>
    <!-- <td></td> -->
    <td>&nbsp;</td>
    <td colspan="3">&nbsp;</td>
    <!-- <td></td> -->
    <!-- <td></td> -->
  </tr>
  <!-- 8 row -->
  <tr class="first-row">
    <!-- <td></td> -->
    <!-- <td></td> -->
    <!-- <td></td> -->
    <td rowspan="3">8</td>
    <td rowspan="3" colspan="3">&nbsp;</td>
    <!-- <td></td> -->
    <!-- <td></td> -->
  </tr>
  <!-- 9 row -->
  <tr class="second-row">
    <!-- <td></td> -->
    <td>9</td>
    <td></td>
    <!-- <td></td> -->
    <!-- <td></td> -->
    <!-- <td></td> -->
    <!-- <td></td> -->
  </tr>
  <!-- 10 row -->
  <tr class="third-row">
    <!-- <td></td> -->
    <td>10</td>
    <td></td>
    <!-- <td></td> -->
    <!-- <td></td> -->
    <!-- <td></td> -->
    <!-- <td></td> -->
  </tr>
  <!-- 11 row -->
  <tr class="forth-row">
    <td>11</td>
    <td colspan="4">&nbsp;</td>
    <!-- <td></td> -->
    <!-- <td></td> -->
    <!-- <td></td> -->
    <td></td>
    <td rowspan="2">&nbsp;</td>
  </tr>
  <!-- 12 row -->
  <tr class="fifth-row">
    <td colspan="3">12</td>
    <!-- <td></td> -->
    <!-- <td></td> -->
    <td>&nbsp;</td>
    <td rowspan="2">&nbsp;</td>
    <td rowspan="2">&nbsp;</td>
    <!-- <td></td> -->
  </tr>
  <!-- 13 row -->
  <tr class="sixth-row">
    <td colspan="3" rowspan="5">13</td>
    <!-- <td></td> -->
    <!-- <td></td> -->
    <td>&nbsp;</td>
    <!-- <td></td> -->
    <!-- <td></td> -->
    <td>&nbsp;</td>
  </tr>
  <!-- 14 row -->
  <tr class="seventh-row">
    <!-- <td></td> -->
    <!-- <td></td> -->
    <!-- <td></td> -->
    <td>14</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <!-- 15 row -->
  <tr class="first-row">
    <!-- <td></td> -->
    <!-- <td></td> -->
    <!-- <td></td> -->
    <td>15</td>
    <td>&nbsp;</td>
    <td colspan="2" rowspan="2">&nbsp;</td>
    <!-- <td></td> -->
  </tr>
  <!-- 16 row -->
  <tr class="second-row">
    <!-- <td></td> -->
    <!-- <td></td> -->
    <!-- <td></td> -->
    <td rowspan="3">16</td>
    <td rowspan="3">&nbsp;</td>
    <!-- <td></td> -->
    <!-- <td></td> -->
  </tr>
  <!-- 17 row -->
  <tr class="second-row">
    <!-- <td></td> -->
    <!-- <td></td> -->
    <!-- <td></td> -->
    <!-- <td></td> -->
    <!-- <td></td> -->
    <td colspan="2">&nbsp;</td>
    <!-- <td></td> -->
  </tr>
  <!-- 18 row -->
  <tr class="third-row">
    <td>17</td>
    <td colspan="2">&nbsp;</td>
    <!-- <td></td> -->
    <!-- <td></td> -->
    <!-- <td></td> -->
    <td colspan="2"></td>
    <!-- <td></td> -->
  </tr>
  <!-- 19 row -->
  <tr class="forth-row">
    <td>18</td>
    <td colspan="6">&nbsp;</td>
    <!-- <td></td> -->
    <!-- <td></td> -->
    <!-- <td></td> -->
    <!-- <td></td> -->
    <!-- <td></td> -->
  </tr>
</table>

</body>
</html>
第16行实际上是两行。请参阅示例。

相关问题
最新问题