Question

我目前正在开展一个项目，我需要让我的桌子的单元格如下所示：

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

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

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

有没有办法用CSS语法，HTML标签或我错过的那种程度解决这个问题？

Answer 1

也许你忘了＆lt; TR＆GT;标签，正确的表格语法：

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

你也可以做类似于此的事情，但请注意布局纯粹是为了说明你可以玩它并让它适合你，我更喜欢无桌面布局，如果你确实在制作布局：{{ 3}}

将细胞放置在彼此旁边而不是彼此之下

2 个答案: