html 表 colspan 行跨度 Piet Mondrian答案

【问题标题】：html table colspan rowspan Piet Mondrianhtml 表 colspan 行跨度 Piet Mondrian
【发布时间】：2020-11-15 12:19:43
【问题描述】：

我正在尝试构建 Piet Mondrian's famous photo 的类似 html 表的版本：

我已经成功（我认为）rowspan 和 colspan 的东西，但宽度和高度似乎与原始照片不太一样。

这是我所做的：

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    <style>
      td
      {
        border:solid 1px black;
        width:20px;
        height:20px;
      }
    </style>
    </head>
    <body>
    <table>
      <tr id="tr0">
        <td colspan="2" rowspan="3"></td>
        <td colspan="6"rowspan="6"></td>
      </tr>
      <tr id="tr1">
      </tr>
      <tr id="tr2">
      </tr>
      <tr id="tr3">
        <td colspan="2" rowspan="3"></td>
      </tr>
      <tr id="tr4">
      </tr>
      <tr id="tr5">
      </tr>
      <tr id="tr6">
        <td colspan="2" rowspan="2"></td>
        <td colspan="5" rowspan="2"></td>
        <td></td>
      </tr>
      <tr id="tr7">
        <td></td>
      </tr>
    </table>
  </body>
</html>

感谢您的帮助。

【问题讨论】：

不要使用表格进行布局。使用它们来呈现数据..
我知道，但这对我来说只是一个游戏，我希望它能奏效......

标签： html css html-table css-tables

【解决方案1】：

我想问题在于它的大小适合其内容，所以我在每行中添加了一个隐藏列和一个包含 8 列的隐藏行，这样表格就可以根据我需要的列数来适应它的大小。现在我遇到了一个不同的问题，那里有一条线，我不知道为什么......

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    <style>
      td
      {
        border:solid 3px black;
        width:20px;
        height:20px;
      }
      .nob
      {
        border:0px;
      }
      table
      {
        border-collapse:collapse;
      }
    </style>
    </head>
    <body>
    <table>
      <tr>
        <td class="nob"></td>
        <td class="nob"></td>
        <td class="nob"></td>
        <td class="nob"></td>
        <td class="nob"></td>
        <td class="nob"></td>
        <td class="nob"></td>
        <td class="nob"></td>
        <td class="nob"></td>
      </tr>
      <tr id="tr0">
        <td colspan="2" rowspan="3"></td>
        <td colspan="6"rowspan="6" style="background-color:red;"></td>
        <td class="nob"></td>
      </tr>
      <tr id="tr1">
        <td class="nob"></td>
      </tr>
      <tr id="tr2">
        <td class="nob"></td>
      </tr>
      <tr id="tr3">
        <td colspan="2" rowspan="3"></td>
        <td class="nob"></td>
      </tr>
      <tr id="tr4">
        <td class="nob"></td>
      </tr>
      <tr id="tr5">
        <td class="nob"></td>
      </tr>
      <tr id="tr6">
        <td colspan="2" rowspan="2"  style="background-color:blue;"></td>
        <td colspan="5" rowspan="2"></td>
        <td></td>
        <td class="nob"></td>
      </tr>
      <tr id="tr7">
        <td style="background-color:yellow;"></td>
        <td class="nob"></td>
      </tr>
    </table>
  </body>
</html>

【讨论】：