如何跳过 html table 中的单元格？

Question

我正在尝试制作一个在线棋盘游戏，为此，我希望单元格在棋盘上四处走动。有谁知道我怎样才能跳过中间的单元格？到目前为止，我已经尝试过使用  ，但这并没有真正起作用。

这是我的代码示例：

#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>

Answer 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>

如何跳过 html table 中的单元格？

How can I skip cells in an html table?

html

css

html-table