HTML：表格后面的段落，显示在表格的右侧_Html_Alignment

HTML：表格后面的段落，显示在表格的右侧

html

HTML：表格后面的段落，显示在表格的右侧,html,alignment,Html,Alignment,我们正在设计一个应用程序，向经理发送电子邮件，提醒他们必须进行某些批准。电子邮件是HTML格式的，包含一个表。我们不明白我们做错了什么，导致最后一段出现在表格右侧而不是下方下面是一个例子。我所依赖的工具“tidy”这一次没有提示 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta content= "HTML Tidy for Linux

我们正在设计一个应用程序，向经理发送电子邮件，提醒他们必须进行某些批准。电子邮件是HTML格式的，包含一个表。我们不明白我们做错了什么，导致最后一段出现在表格右侧而不是下方

下面是一个例子。我所依赖的工具“tidy”这一次没有提示

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content=
"HTML Tidy for Linux/x86 (vers 6 November 2007), see www.w3.org"
name="generator">
<meta content='text/html; charset=us-ascii' http-equiv=
"Content-Type">
<style type="text/css">
   body {font-family: Calibri;   }
   caption {font-family: Calibri;color: 'black'; font-size: '125%;  }
   table.main tr { };
   table.main td.bottomcaption {text-align: 'center'; vertical-align: 'middle'; font-family: 'Calibri'; color: 'black'; font-color: 'black'; font-size: '125%';   }
   table.main th {vertical-align: 'bottom'; color: blue; background-color: lightyellow;   }
</style>
<title>Payable Time awaiting approval</title>
</head>
<body>
<p>Hello, <strong>Daffy Duck</strong>:</p>
<p>According to our records, the following Payable Time is awaiting
approval. Items shown below must be approved in order for
compensation to take place.<br></p>
<p>For questions, please contact <a href=
"MAILTO:SUPPORT@OUR_ORG.COM">Support</a></p>
<table align="left" border="1" class='main' summary="Pending details">
<caption ><strong>Awaiting approval by your reporting
structure</strong></caption>
<tr>
<th align="left">&nbsp;<br>
Name</th>
<th align="center">&nbsp;<br>
ID</th>
<th align="center">Work<br>
Date</th>
<th align="center">&nbsp;<br>
Type</th>
<th align="center">&nbsp;<br>
Hours</th>
</tr>
<tr>
<td colspan="5">Reporting to Mickey M Mouse (MMM)</td>
</tr>
<tr>
<td align="left">Daisy</td>
<td align="left">D_DUCK</td>
<td align="center">04/29/2013</td>
<td align="left">REG</td>
<td align="right">8.00</td>
</tr>
<tr>
<td align="left">Daisy</td>
<td align="left">D_DUCK</td>
<td align="center">05/01/2013</td>
<td align="left">REG</td>
<td align="right">8.00</td>
</tr>
<tr>
<td align="left">Daisy</td>
<td align="left">D_DUCK</td>
<td align="center">05/02/2013</td>
<td align="left">OT</td>
<td align="right">7.50</td>
</tr>
</table>
<p>&nbsp;<br></p>
<p>&nbsp;</p>
<p>This message comes from The Support Team</p>
</body>
</html>


正文{font-family:Calibri；}
标题{字体系列：Calibri；颜色：'black'；字体大小：'125%；}
表1.1主要tr{}；
table.main td.bottomcaption{文本对齐：“中间”；垂直对齐：“中间”；字体系列：“Calibri”；颜色：“黑色”；字体颜色：“黑色”；字体大小：“125%”；}
table.main th{垂直对齐：'底部'；颜色：蓝色；背景色：浅黄色；}
等待批准的应付时间
你好，达菲鸭：
根据我们的记录，以下应付时间正在等待
批准以下所示项目必须经过批准才能进行
进行补偿。

如有疑问，请联系
等待您的报告部门批准
结构


名称


身份证件
工作

日期


类型


小时
向米老鼠汇报（MMM）
雏菊
鸭
04/29/2013
规则
8
雏菊
鸭
05/01/2013
规则
8
雏菊
鸭
05/02/2013
OT
7.50



此消息来自支持团队

我们非常希望文本“此消息来自…”显示在表格下方，但它显示在表格右侧，与表格顶部对齐。IE7、IE8和Firefox 12也是如此

如果有任何建议能帮助解决这个问题，我将不胜感激

问候,，

丹尼斯

轻松解决。将此添加到最后一句：

<p style="float:left;">This message comes from the support team.</p>

此消息来自支持团队

您可以使用类似的标记：

只需将

align=“left”

移到表中即可

请参阅链接：

在IE10、FF24、Chrome 30上进行测试

将align=“left”移到表格上是的，@Francis是正确的。此外，您的CSS在

标题

规则中的

125%

后缺少引号，并且在

table.main tr

后有一个分号需要删除。很抱歉，刚刚意识到您没有尝试添加与该表密切相关的文本。感谢您的帮助；这是一种享受。还感谢您指出不推荐使用的标题属性。如果您有多个表行，则第一种方法不起作用。它的页脚将在表的最底部呈现。这似乎是Chrome渲染引擎中的一个缺陷。太棒了，它在2021年为mw工作。你的答案没有回答这个问题。他想把课文放在桌子下面。

<table border="1">
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>

  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">This is the text you want under the table</td>
    </tr>
  </tfoot>
</table>

<table border="1">
  <caption align="bottom">My savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

<table border="1">
  <caption style="caption-side:bottom">My savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>