创建一个精心制作的 table

Question

我目前正在开发一个新网站，在构建一个新网站时出现了一些问题 table。如图所示，table layout 的设置比普通的 table 稍微复杂一些。我遇到的问题是在我将一堆文本添加到单元格 2 后，单元格 3、4、5 和 6 被向下推到单元格 2 的底部边框下方。

这是当前代码：

<table border="0" cellpadding="0" width="100%">
  <tr>
    <td style="vertical-align:top" width="27%" colspan="3">
      <center><img src="IMAGE_URL" hspace="10"/><br/><a href="URL" title="TITLE" target="_blank"><img src="IMAGE_URL" onmouseover="this.src='IMAGE_URL'" onmouseout="this.src='IMAGE_URL'"/></a></center>
    </td>
    <td align="justify" style="vertical-align:top; line-height:20px" width="73%" rowspan="10">
      <font size="3">TEXT</font>
    </td>
  </tr>
  <tr>
    <td style="vertical-align:top; line-height:20px; font-size:15pt;" colspan="3">
      <br/><center><b>TEXT</b></center>
    </td>
  </tr>
  <tr>
    <td style="vertical-align:top; line-height:20px" width="10px">
      <p align="right">TEXT<br/>TEXT<br/>TEXT</p>
    </td>
    <td style="vertical-align:top; line-height:20px" width="10px">
      <p align="right">TEXT<br/>TEXT<br/>TEXT</p>
    </td>
    <td style="vertical-align:top; line-height:20px" width="10px">
      <p align="left">TEXT<br/>TEXT<br/>TEXT</p>
    </td>
  </tr>
</table>

Answer 1

我不打算写下实际代码，因为它相当简单。你需要做的是：

有一个大的 table 一行两列（单元格）
在第一个单元格中创建一个新的 table，图表左侧有三行（一行代表“1”，一行代表“3”，另一行代表“4”“5” " 和 "6")
在“2”的主要 table 内容的第二个单元格中

就是这样。请注意，单元格“1”的高度将取决于您放入其中的内容。我相信其余的会很好，并且拥有大主 table 将强制单元格“2”与所有其他单元格具有相同的高度。

创建一个精心制作的 table

Creating an elaborate table

html

layout

html-table

cells