Html 如何使表格单元格合并两行两列？_Html_Css

Html 如何使表格单元格合并两行两列？

html css

Html 如何使表格单元格合并两行两列？,html,css,Html,Css,以下是我需要做的：红色：两列两行紫色：两列蓝色：两排黄色和白色：正常细胞这是我目前的桌子：以下是我的html代码： <body> <div id="container"> <table id="board"> <tr> <td colspan="2"></td> <

以下是我需要做的：

红色：两列两行

紫色：两列

蓝色：两排

黄色和白色：正常细胞

这是我目前的桌子：

以下是我的html代码：

      <body>
   <div id="container">
    <table id="board">
        <tr>
          <td colspan="2"></td>
          <td></td>
          <td colspan="2"></td>
    
        </tr>
        <tr>
            <td colspan="2" rowspan="2"></td>
            <td rowspan="2"></td>
            <td></td>
            <td></td>
     
          </tr>
          <tr>
            <td></td>
            <td></td>
      
          </tr>
          <tr>
            <td colspan="2"></td>
            <td ></td>
            <td colspan="2"></td>
        
          </tr>

      </table>
    </div>

   </body>

不知何故，应该占据两行和两个单元格的单元格（第一幅图中为红色）似乎只占据了两行，尽管代码中另有说明。它是css上的东西吗？如何修复此问题？

您的HTML已经修复了此问题。要看到这一点，请执行以下操作。第一条评论

<td colspan="2"></td>

不要将

表格

用于布局。

table

标记只能用于表格数据。

<td colspan="2"></td>

<td></td>
<td></td>