html - HTML 中的复杂表表达式

标签 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 个单元格，但我可以看到更多单元格。

最佳答案 

    <!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行实际上是两行。请参阅示例。

关于html - HTML 中的复杂表表达式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31702846/

上一篇：html - 如何在全屏上拉伸(stretch) flexbox？

下一篇：javascript - jQuery .prop() 未按预期工作

相关文章：

javascript - 简单但奇怪的 HTML，jQuery 问题。无缘无故的函数循环

css - 将此 CSS 样式应用于 gridview

html - 在表格标题中以全宽输入 float div

php - PHP 中的变量表行跨度回显

html - 表不收缩

html - spring thymeleaf 文字下一行

jquery - 支持视频+图片的 slider

internet-explorer - Internet Explorer 8 是否支持 HTML 5？

html - 链接在表中不起作用

php - Laravel <br> 到换行符

©2024 IT工具网  联系我们