html - HTML表格问题

Question

我有一个 HTML 表格问题，我想更好地理解。

假设我有一个 3 行 HTML

<table>
    <tr>
        <td style="text-align:right;">A1</td>
        <td>A2</td>
    </tr>
    <tr>
        <td style="text-align:right;">B1</td>
        <td>B2</td>
    </tr>
    <tr>
        <td colspan="2">A very loooooooong string here</td>
    </tr>
</table>

对于很长的文本，前 2 行中的内容看起来几乎居中。但是，如果我将整个“非常长的字符串”移动<td>到行内的一个单独<table>的行中，我会看到其他内容没有居中。为什么当<td>内容在另一个表中时显示不同？

Answer 1

如果您的问题以 2 个表格结束，原始表格如下：

<table>
 <tr>
  <td style="text-align:right;">A1</td>
  <td>A2</td>
 </tr>
 <tr>
  <td style="text-align:right;">B1</td>
  <td>B2</td>
 </tr>
</table>

并且 looooong 文本变成了自己的：

<table>
 <tr>
  <td colspan="2">A very loooooooong string here</td>
 </tr>
</table>

那么第一个表的前两行不再看起来像居中的原因是因为它们不是 -仅当您相对于第二个表进行比较时。

如果您border="1"在 TABLE 属性中进行调试，您将看到包含它们的表折叠到尽可能宽的表数据单元格。正因为如此，他们看起来不像是居中的，尽管他们仍然是。

向第一个表格添加一些任意宽度，您会看到它们仍然居中。

Answer 2

你能提供你的第二个例子吗？当我创建以下内容时，它看起来仍然相同。您可能没有正确地将表格嵌入到 colspan 为 2 的表格单元格中。

<table border="1">
 <tr>
  <td style="text-align:right;">A1</td>
  <td>A2</td>
 </tr>
 <tr>
  <td style="text-align:right;">B1</td>
  <td>B2</td>
 </tr>
 <tr>
  <td colspan="2">
    <table border="1"><tr>
        <td>A very loooooooong string here</td>
    </tr></table>
  </td>
 </tr>
</table>

Answer 3

在解释 HTML 的问题时，最好指出用于测试的浏览器......
无论如何，我用 FF3 和 IE6 进行了快速测试，我没有看到你描述的行为：使用嵌套表，长字符串的填充稍微多一些，但其他内容仍然在视觉上居中。
你应该显示你的其他代码。我的是：

<table>
 <tr>
  <td style="text-align:right;">A1</td>
  <td>A2</td>
 </tr>
 <tr>
  <td style="text-align:right;">B1</td>
  <td>B2</td>
 </tr>
 <tr>
  <td colspan="2"><table><tr><td>A very loooooooong string here</td></tr></table></td>
 </tr>
</table>

Answer 4

我想我知道你的意思，是你问题的第二部分基于：

<table>
 <tr>
  <td style="text-align:right;">A1</td>
  <td>A2</td>
 </tr>
 <tr>
  <td style="text-align:right;">B1</td>
  <td>B2</td>
 </tr>
 <tr>
  <table><td colspan="2">A very loooooooong string here</td></table>
 </tr>
</table>

那么我猜表格内容呈现左对齐的原因是内部表格标签隐藏了外部表格的colspan。

答案是停止使用 html 来设置表格样式并改用 CSS！