如何跳过 html 表格中的单元格？答案

【问题标题】：How can I skip cells in an html table?如何跳过 html 表格中的单元格？
【发布时间】：2021-07-20 02:21:01
【问题描述】：

我正在尝试制作一个在线棋盘游戏，为此，我希望细胞在棋盘周围移动。有谁知道我如何跳过中间的单元格？到目前为止，我已经尝试过使用&nbsp;，但这并没有真正奏效。

这是我的代码示例：

#board {
  border: 1px solid black;
  background-color: forestgreen;
  height: 375px;
  width: 889px;
}

.square {
  border: 1px solid black;
  background-color: deepskyblue;
  height: 125px;
  width: 125px;
  padding: 10px;
  font-family: "Trebuchet MS";
  float: left;
  font-size: 20px;
}

<table id="board">
        <tr>
            <td class="square">Start!</td>
            <td class="square">Text!</td>
            <td class="square">text?</td>
            <td class="square">text</td>
            <td class="square">cool text</td>
            <td class="square">text!!!</td>
        </tr>
        <tr>
            <td class="square">text</td> 
        </tr>
        <tr>
            <td class="square">text</td>
        </tr>
        <tr>
            <td class="square">text</td>
            <td class="square">text</td>
            <td class="square">text.</td>
            <td class="square">very cool text</td>
            <td class="square">text?</td>
            <td class="square">text!!!</td>
        </tr>
    </table>

【问题讨论】：

通过使用 colspan?
您的列数是静态的吗？或者显示的列数会根据数据、日期时间、浏览器窗口大小等而变化？
整个棋盘是静态的，在整个游戏过程中几乎没有变化。

标签： html css html-table

【解决方案1】：

猜你在谈论这样的事情，如果我理解正确，你只是错过了colspan 并删除了float。如果这是您的设计选择，这里有一些 more playing you can do with tables。

#board {
  border: 1px solid black;
  background-color: forestgreen;
/*
  height: 375px;
  width: 889px;
*/
}

.square {
  border: 1px solid black;
  background-color: deepskyblue;
  height: 125px;
  width: 125px;
  padding: 10px;
  font-family: "Trebuchet MS";
  font-size: 20px;
}

#center-tile {
  background: url(https://picsum.photos/700) no-repeat center center;
}

<table id="board">
    <tr>
        <td class="square">Start!</td>
        <td class="square">Text!</td>
        <td class="square">text?</td>
        <td class="square">text</td>
        <td class="square">cool text</td>
        <td class="square">text!!!</td>
    </tr>
    <tr>
        <td class="square">text</td>
        <td id="center-tile" rowspan="2" colspan="4">Center</td>
        <td class="square">text</td>
    </tr>
    <tr>
        <td class="square">text</td>
        <td class="square">text</td>
    </tr>
    <tr>
        <td class="square">text</td>
        <td class="square">text</td>
        <td class="square">text.</td>
        <td class="square">very cool text</td>
        <td class="square">text?</td>
        <td class="square">text!!!</td>
    </tr>
</table>

【讨论】：

谢谢！我运行了代码，它几乎可以完美运行！但是，现在方块已经分开了，有什么办法可以让它们完美接触吗？
@LitFishie121 查看更新的答案，如果我建议您查看 html 表格基础知识中的some resources。请注意根据您的请求添加的rowspan。语义很重要:)
非常感谢您的帮助！ :) 我会查看提供的资源