我如何才能最好地改进这个不规则的表及其笨拙的代码？

Question

我希望创建一个受此basic board.

启发的HTML设计板

这是我的结果之后的一些问题：

＆＃13;

＆＃13;

<table width="500px" cellspacing="0" cellpadding="0" height="100px">
  <tbody>
    <tr>
      <td style="border: 2px solid white;" width="100px" height="100px">
        <div style="background-color:tomato; height:100%; width: 100%;">A</div>
      </td>
      <td style="border: 2px solid white;" width="100px" height="100px">
        <div style="background-color:tomato; height:100%; width: 100%;"></div>
      </td>
      <td style="border: 2px solid white;" width="100px" height="100px">
        <div style="background-color:tomato; height:100%; width: 100%;"></div>
      </td>
      <td style="border: 2px solid white;" width="100px" height="100px">
        <div style="background-color:tomato; height:100%; width: 100%;"></div>
      </td>
      <td style=" border: 1px solid white;" width="100px" height="100px">
        <div style="background-color:tomato; height:100%; width: 100%;"></div>
      </td>
    </tr>
  </tbody>
</table>
<table width="498px" cellspacing="0" cellpadding="0" height="200px">
  <tbody>
    <tr>
      <td>
        <div style="background-color:white; border: 1px solid white; height:100%; width: 100%; background-color: tomato;"></div>
      </td>
    </tr>
  </tbody>
</table>
<table width="502px" cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td colspan="1" style="width: 400px; height:180px; background-color:tomato;border: 2px solid white;border-top: 4px solid white;">H</td>
      <td colspan="1" style="width: 168px;background-color:tomato;border: 1px solid white;border-top: 4px solid white;">I</td>
    </tr>
  </tbody>
</table>
<table cellspacing="0" cellpadding="0" width="501px">
  <tbody>
    <tr>
      <td style="border: 2px solid white; background-color:tomato;" width="132px">A</td>
      <td style=" border: 2px solid white;" width="217px" height="238px">
        <div style="background-color:skyblue; height: 100%; width: 100%;">s</div>
      </td>
      <td style=" border: 1px solid white;" width="147px">
        <div style="background-color:tomato; height:285px; width: 100%; margin-top:-50px; border: 1px solid white;border-top: 4px solid white;"></div>
      </td>
    </tr>
  </tbody>
</table>
<div style="position: absolute; left: 282px; top:367px;">
  <div style="width: 100px; height: 100px; margin: 25px; -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); overflow: hidden; border: 4px solid white;">
    <div style="background: tomato; width: 150px; height: 150px; margin: -25px; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg);"></div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

正如你所看到的，它的丑陋和笨拙，以及HTML和div的笨拙混合，但（基本上......有点......）完成了工作。 （我知道它有很多错误，但我甚至都没有尝试清理它。如果有一种首选的方法，我宁愿不再向这个野兽倾倒。）

代码的纯粹错综复杂表明，实现这一目标可能更容易。但是，存在基本问题，其中方法可用于设计目的。最终将使用此代码的地方不允许内联之外的CSS，并且它不能使用JavaScript。

在这一点上可能很明显，我根本没有真正体验过这种事情，所以如果这是一个令人难以置信的愚蠢问题，我会事先道歉。

但是，鉴于这些限制，这种HTML / CSS汞合金是处理这种性质设计的最佳方式吗？或者有人可以推荐一种更清洁的方法来完成它吗？

Answer 1

关于＆＃34;清理它的目标＆＃34;，我建议使用外部CSS样式表而不是HTML元素使用的内联样式定义。这应该使您能够将CSS样式定义与基本HTML布局分开。最终结果应该要求HTML文件中的文本少得多。

这个w3schools page涵盖了这一点，它们的内联CSS文件引用示例如下图所示。