html - 将细胞彼此相邻放置，而不是彼此下方

Question

我目前正在做一个项目，我需要使表格的单元格如下所示：

|       |   [Cell One] [Cell Two]
| Image | 
|       | [Cell Three] [Cell Four]

尽管谷歌搜索并阅读了我的教科书，但我似乎找不到这样做的方法，因为我的代码告诉我这样做：

|       | [ Cell One]
|       | [ Cell Two]
| Image | [ Cell Three] 
|       | [ Cell Four]

有没有办法用 CSS 语法、HTML 标记或我错过的那种程度的东西来解决这个问题？

Answer 1

也许你忘记了 < tr> 标签，正确的表格语法：

<img style="float:left" src="images/custom_br.png" alt="img">
<table style="float:left" border="1">
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

这可以按您的意愿工作。

Answer 2

您需要使用 rowspan 以使其以 HTML 方式工作，如下所示：

<table>
  <tr>
    <td rowspan="4"><!-- Image here --></td>
    <td rowspan="1"></td>
  </tr>
  <tr>
    <td rowspan="1"></td>
  </tr>
  <tr>
    <td rowspan="1"></td>
  </tr>
  <tr>
    <td rowspan="1"></td>
  </tr>
</table>

在此处查看 jsFiddle：http: //jsfiddle.net/dhvnP/

您也可以做类似的事情，但请注意布局纯粹是为了说明您可以使用它并使其适合您，如果您确实正在制作布局，我更喜欢无表格布局：http://jsfiddle .net/NRsbV/