表格图像表格对齐问题答案

【问题标题】：Table Image Table Alignment Issues表格图像表格对齐问题
【发布时间】：2018-08-22 04:28:54
【问题描述】：

我有一个表格，在那个表格里面有一个表格，一个图像和一个表格，第一个表格和第二个表格在同一行对齐，第三个和最后一个表格在右边，就像它应该的一样，但在下面的一行第一个表格和图像。有人可以告诉我如何将它们全部对齐在同一行吗？

    <body>

<div id="toptable" align="center">
  <table Style="border:1px solid #FFFF00;"border="0" width="850" id="Nav" cellpadding="0" cellspacing="0" valign="top">
<td style="width:850 height:60 text-align:center;">
        <table style="float:left;border:5px; border-style:outset;border-color:#E80000; height:20px; width:23%; border-spacing:0; border-collapes:collapse;">
        <tr Style="background-color:#595959;color:FFFF00;">
          <th Style="border:1px solid #FFFF00;font-size:12px; width:45;height:20;"><div style="text-align:center; margin-bottom:-1px;">&nbsp;&nbsp;Symbol&nbsp;&nbsp;</div></TH>            
          <th Style="border:1px solid #FFFF00;font-size:12px; width:125;height:20;"><div style="text-align:center; margin-bottom:-1px;">Meaning</div></th>
    </tr>
        <tr> 
      <td style="background-color:#000000;color:FFFF00; border:1px solid #FFFF00;background-image: url(../Images/Not-Scheduled.png); background-size:22px 24px; width:25; height:24; background-repeat:no-repeat; background-position:center;"></td> 
          <td style="background-color:#000000; color:FFFF00; border:1px solid #FFFF00; font-family:'Arial'; font-size:12px; text-align:center; font-weight:bold;">Not Scheduled</td>
        </tr>
        <tr>
      <td style="background-color:#000000;color:FFFF00; border:1px solid #FFFF00;background-image: url(../Images/Gray-Astris3.png); background-size:22px 24px; width:25; height:24; background-repeat:no-repeat; background-position:center;"></TD>
          <td style="background-color:#000000; color:FFFF00; border:1px solid #FFFF00; font-family:'Arial'; font-size:12px; text-align:center; font-weight:bold;">&nbsp;&nbsp;Deactivated Tanks&nbsp;&nbsp;</td>
        </tr>
        <tr>
      <td style="background-color:#000000;color:FFFF00; border:1px solid #FFFF00;background-image: url(../Images/Blue-Test.png); background-size:22px 24px; width:25; height:24; background-repeat:no-repeat; background-position:center;"></td>
      <td style="background-color:#000000; color:FFFF00; border:1px solid #FFFF00; font-family:'Arial'; font-size:12px; text-align:center; font-weight:bold;">Test Scheduled</td>
        </tr>
        <tr> 
      <td style="background-color:#000000;color:FFFF00; border:1px solid #FFFF00;background-image: url(../Images/Green-Test.png); background-size:22px 24px; width:22; height:24; background-repeat:no-repeat; background-position:center;"></td>
          <td style="background-color:#000000; color:FFFF00; border:1px solid #FFFF00; font-family:'Arial'; font-size:12px; text-align:center; font-weight:bold;">Test In Process</TD>
        </tr>
        <tr> 
      <td style="background-color:#000000;color:FFFF00; border:1px solid #FFFF00;background-image: url(../Images/Red-Test.png); background-size:22px 24px; width:22; height:24; background-repeat:no-repeat; background-position:center;"></td>
          <td style="background-color:#000000; color:FFFF00; border:1px solid #FFFF00; font-family:'Arial'; font-size:12px; text-align:center; font-weight:bold;">Test Late</td>
        </tr>
   </table>
<div id="pic" align="center">
  <img style="float:none; margin-left:auto; margin-right:auto; margin-top:17px; border:10px ridge #E80000; width:199; height:101; " src="../Images/Logo.jpg" />
</div>
<div id="toptable2" align="center">
   <table style="float:right;border:5px; border-style:outset;border-color:#E80000; height:20px; width:23%; border-spacing:0; border-collapes:collapse; vertical-align:top;">
        <tr Style="background-color:#595959;color:FFFF00;">
          <th Style="border:1px solid #FFFF00;font-size:12px; width:125;height:20;"><div style="text-align:center; margin-bottom:-1px;">Meaning</th>
          <th Style="border:1px solid #FFFF00;font-size:12px; width:45;height:20;"><div style="text-align:center; margin-bottom:-1px;">&nbsp;&nbsp;Symbol&nbsp;&nbsp;</th>
        </tr>
        <tr> 
      <tf\d style="background-color:#000000; color:FFFF00; border:1px solid #FFFF00; font-family:'Arial'; font-size:12px; text-align:center; font-weight:bold;">Not Scheduled</td>
          <td style="background-color:#000000;color:FFFF00; border:1px solid #FFFF00;background-image: url(../Images/Not-Scheduled.png); background-size:22px 24px; width:25; height:24; background-repeat:no-repeat; background-position:center;"></td>
        </tr>
        <tr>
      <td style="background-color:#000000; color:FFFF00; border:1px solid #FFFF00; font-family:'Arial'; font-size:12px; text-align:center; font-weight:bold;">&nbsp;&nbsp;Deactivated Tanks&nbsp;&nbsp;</td>
      <td style="background-color:#000000;color:FFFF00; border:1px solid #FFFF00;background-image: url(../Images/Gray-Astris3.png); background-size:22px 24px; width:25; height:24; background-repeat:no-repeat; background-position:center;"></td>
        </tr>
    <tr>
      <td style="background-color:#000000; color:FFFF00; border:1px solid #FFFF00; font-family:'Arial'; font-size:12px; text-align:center; font-weight:bold;">Test Scheduled</td>
          <td style="background-color:#000000;color:FFFF00; border:1px solid #FFFF00;background-image: url(../Images/Blue-Test.png); background-size:22px 24px; width:25; height:24; background-repeat:no-repeat; background-position:center;"></td>
        </tr>
        <tr>
      <td style="background-color:#000000; color:FFFF00; border:1px solid #FFFF00; font-family:'Arial'; font-size:12px; text-align:center; font-weight:bold;">Test In Process</td>
          <td style="background-color:#000000;color:FFFF00; border:1px solid #FFFF00;background-image: url(../Images/Green-Test.png); background-size:22px 24px; width:22; height:24; background-repeat:no-repeat; background-position:center;"></td>
        </tr>
        <tr>
      <td style="background-color:#000000; color:FFFF00; border:1px solid #FFFF00; font-family:'Arial'; font-size:12px; text-align:center; font-weight:bold;">Test Late</td>
          <td style="background-color:#000000;color:FFFF00; border:1px solid #FFFF00;background-image: url(../Images/Red-Test.png); background-size:22px 24px; width:22; height:24; background-repeat:no-repeat; background-position:center;"></td>
        </tr>
  </table>
    </table>
  </td>
</div>

【问题讨论】：

对于初学者来说，这是无效的标记。
@jayharris 有什么问题吗？或者它在哪里无效我该如何解决？
align 属性在 html 5 中不受支持，在 html 4.01 中已被弃用。和 html 标签是小写的
修复了标签，所以我应该摆脱 align 属性，这将解决我遇到的问题？
'Java' 之于 'JavaScript' 就像 'Car' 之于 'Carpet'。

标签： javascript css html-table

【解决方案1】：

HTML 中的表格非常适合管理它们。因此，为了更好地了解表格在 html 中的工作方式，请点击此链接 How to create table in HTML

<div id="toptable" align="center">
 <table Style="border:1px solid #FFFF00;"border="0" width="850" id="Nav" cellpadding="0" cellspacing="0" valign="top">
<td style="width:850 height:60 text-align:center;">
    <table style="float:left;border:5px; border-style:outset;border-color:#E80000; height:20px; width:23%; border-spacing:0; border-collapes:collapse;">
    <TR Style="background-color:#595959;color:FFFF00;">
      <TH Style="border:1px solid #FFFF00;font-size:12px; width:45;height:20;"><div style="text-align:center; margin-bottom:-1px;">&nbsp;&nbsp;Symbol&nbsp;&nbsp;</div></TH>            
      <TH Style="border:1px solid #FFFF00;font-size:12px; width:125;height:20;"><div style="text-align:center; margin-bottom:-1px;">Meaning</div></TH>
</TR>
    <TR> 
  <TD style="background-color:#000000;color:FFFF00; border:1px solid #FFFF00;background-image: url(../Images/Not-Scheduled.png); background-size:22px 24px; width:25; height:24; background-repeat:no-repeat; background-position:center;"></TD> 
      <TD style="background-color:#000000; color:FFFF00; border:1px solid #FFFF00; font-family:'Arial'; font-size:12px; text-align:center; font-weight:bold;">Not Scheduled</TD>
    </TR>
    <TR>
    <TD style="background-color:#000000;color:FFFF00; border:1px solid #FFFF00;background-image: url(../Images/Gray-Astris3.png); background-size:22px 24px; width:25; height:24; background-repeat:no-repeat; background-position:center;"></TD>
    <TD style="background-color:#000000; color:FFFF00; border:1px solid #FFFF00; font-family:'Arial'; font-size:12px; text-align:center; font-weight:bold;">&nbsp;&nbsp;Deactivated Tanks&nbsp;&nbsp;</TD>
    </TR>
    <TR>
    <TD style="background-color:#000000;color:FFFF00; border:1px solid #FFFF00;background-image: url(../Images/Blue-Test.png); background-size:22px 24px; width:25; height:24; background-repeat:no-repeat; background-position:center;"></TD>
  <TD style="background-color:#000000; color:FFFF00; border:1px solid #FFFF00; font-family:'Arial'; font-size:12px; text-align:center; font-weight:bold;">Test Scheduled</TD>
    </TR>
    <TR> 
  <TD style="background-color:#000000;color:FFFF00; border:1px solid #FFFF00;background-image: url(../Images/Green-Test.png); background-size:22px 24px; width:22; height:24; background-repeat:no-repeat; background-position:center;"></TD>
      <TD style="background-color:#000000; color:FFFF00; border:1px solid #FFFF00; font-family:'Arial'; font-size:12px; text-align:center; font-weight:bold;">Test In Process</TD>
    </TR>
    <TR> 
  <TD style="background-color:#000000;color:FFFF00; border:1px solid #FFFF00;background-image: url(../Images/Red-Test.png); background-size:22px 24px; width:22; height:24; background-repeat:no-repeat; background-position:center;"></TD>
      <TD style="background-color:#000000; color:FFFF00; border:1px solid #FFFF00; font-family:'Arial'; font-size:12px; text-align:center; font-weight:bold;">Test Late</TD>
    </TR>
</table>
 <div id="pic" style="float:left" align="center">
  <img style="float:none; margin-left:auto; margin-right:auto; margin-top:17px; border:10px ridge #E80000; width:199; height:101; " src="../Images/Logo.jpg" />
</div>
<div id="toptable2" align="center" style='float:left;'>
 <table style="float:right;border:5px; border-style:outset;border-color:#E80000; height:20px; width:23%; border-spacing:0; border-collapes:collapse; vertical-align:top;">
    <TR Style="background-color:#595959;color:FFFF00;">
      <TH Style="border:1px solid #FFFF00;font-size:12px; width:125;height:20;"><div style="text-align:center; margin-bottom:-1px;">Meaning</TH>
      <TH Style="border:1px solid #FFFF00;font-size:12px; width:45;height:20;"><div style="text-align:center; margin-bottom:-1px;">&nbsp;&nbsp;Symbol&nbsp;&nbsp;</TH>
    </TR>
    <TR> 
  <TD style="background-color:#000000; color:FFFF00; border:1px solid #FFFF00; font-family:'Arial'; font-size:12px; text-align:center; font-weight:bold;">Not Scheduled</TD>
      <TD style="background-color:#000000;color:FFFF00; border:1px solid #FFFF00;background-image: url(../Images/Not-Scheduled.png); background-size:22px 24px; width:25; height:24; background-repeat:no-repeat; background-position:center;"></TD>
    </TR>
    <TR>
  <TD style="background-color:#000000; color:FFFF00; border:1px solid #FFFF00; font-family:'Arial'; font-size:12px; text-align:center; font-weight:bold;">&nbsp;&nbsp;Deactivated Tanks&nbsp;&nbsp;</TD>
  <TD style="background-color:#000000;color:FFFF00; border:1px solid #FFFF00;background-image: url(../Images/Gray-Astris3.png); background-size:22px 24px; width:25; height:24; background-repeat:no-repeat; background-position:center;"></TD>
    </TR>
<TR>
  <TD style="background-color:#000000; color:FFFF00; border:1px solid #FFFF00; font-family:'Arial'; font-size:12px; text-align:center; font-weight:bold;">Test Scheduled</TD>
      <TD style="background-color:#000000;color:FFFF00; border:1px solid #FFFF00;background-image: url(../Images/Blue-Test.png); background-size:22px 24px; width:25; height:24; background-repeat:no-repeat; background-position:center;"></TD>
    </TR>
    <TR>
  <TD style="background-color:#000000; color:FFFF00; border:1px solid #FFFF00; font-family:'Arial'; font-size:12px; text-align:center; font-weight:bold;">Test In Process</TD>
      <TD style="background-color:#000000;color:FFFF00; border:1px solid #FFFF00;background-image: url(../Images/Green-Test.png); background-size:22px 24px; width:22; height:24; background-repeat:no-repeat; background-position:center;"></TD>
    </TR>
    <TR>
  <TD style="background-color:#000000; color:FFFF00; border:1px solid #FFFF00; font-family:'Arial'; font-size:12px; text-align:center; font-weight:bold;">Test Late</TD>
      <TD style="background-color:#000000;color:FFFF00; border:1px solid #FFFF00;background-image: url(../Images/Red-Test.png); background-size:22px 24px; width:22; height:24; background-repeat:no-repeat; background-position:center;"></TD>
    </TR>
  </table>
  </table>
 </td>
 </div>

【讨论】：

【解决方案2】：

这得到了我想要的，我只是希望我知道为什么我不能使用 margin-left/right auto 来使图像居中。我不喜欢以这种方式手动操作。难道我不能不浮动图像，然后对每个边距使用 auto 吗？

 <div id="toptable" align="center">
  <table Style="border:1px solid #FFFF00;"border="0" width="850" id="Nav" cellpadding="0" cellspacing="0" valign="top">
<td style="width:850 height:60 text-align:center;">
        <table style="float:left;border:5px; border-style:outset;border-color:#E80000; height:20px; width:23%; border-spacing:0; border-collapes:collapse;">
        <TR Style="background-color:#595959;color:FFFF00;">
          <TH Style="border:1px solid #FFFF00;font-size:12px; width:45;height:20;"><div style="text-align:center; margin-bottom:-1px;">&nbsp;&nbsp;Symbol&nbsp;&nbsp;</div></TH>            
          <TH Style="border:1px solid #FFFF00;font-size:12px; width:125;height:20;"><div style="text-align:center; margin-bottom:-1px;">Meaning</div></TH>
    </TR>
        <TR> 
      <TD style="background-color:#000000;color:FFFF00; border:1px solid #FFFF00;background-image: url(../Images/Not-Scheduled.png); background-size:22px 24px; width:25; height:24; background-repeat:no-repeat; background-position:center;"></TD> 
          <TD style="background-color:#000000; color:FFFF00; border:1px solid #FFFF00; font-family:'Arial'; font-size:12px; text-align:center; font-weight:bold;">Not Scheduled</TD>
        </TR>
        <TR>
      <TD style="background-color:#000000;color:FFFF00; border:1px solid #FFFF00;background-image: url(../Images/Gray-Astris3.png); background-size:22px 24px; width:25; height:24; background-repeat:no-repeat; background-position:center;"></TD>
          <TD style="background-color:#000000; color:FFFF00; border:1px solid #FFFF00; font-family:'Arial'; font-size:12px; text-align:center; font-weight:bold;">&nbsp;&nbsp;Deactivated Tanks&nbsp;&nbsp;</TD>
        </TR>
        <TR>
      <TD style="background-color:#000000;color:FFFF00; border:1px solid #FFFF00;background-image: url(../Images/Blue-Test.png); background-size:22px 24px; width:25; height:24; background-repeat:no-repeat; background-position:center;"></TD>
      <TD style="background-color:#000000; color:FFFF00; border:1px solid #FFFF00; font-family:'Arial'; font-size:12px; text-align:center; font-weight:bold;">Test Scheduled</TD>
        </TR>
        <TR> 
      <TD style="background-color:#000000;color:FFFF00; border:1px solid #FFFF00;background-image: url(../Images/Green-Test.png); background-size:22px 24px; width:22; height:24; background-repeat:no-repeat; background-position:center;"></TD>
          <TD style="background-color:#000000; color:FFFF00; border:1px solid #FFFF00; font-family:'Arial'; font-size:12px; text-align:center; font-weight:bold;">Test In Process</TD>
        </TR>
        <TR> 
      <TD style="background-color:#000000;color:FFFF00; border:1px solid #FFFF00;background-image: url(../Images/Red-Test.png); background-size:22px 24px; width:22; height:24; background-repeat:no-repeat; background-position:center;"></TD>
          <TD style="background-color:#000000; color:FFFF00; border:1px solid #FFFF00; font-family:'Arial'; font-size:12px; text-align:center; font-weight:bold;">Test Late</TD>
        </TR>
   </table>
<div id="pic" align="center"">
  <img style="float:left; margin-left:120px; margin-right:auto; margin-top:17px; border:10px ridge #E80000; width:199; height:101; " src="../Images/Logo.jpg" />
</div>
<div id="toptable2" align="center"">
   <table style="float:right;border:5px; border-style:outset;border-color:#E80000; height:20px; width:23%; border-spacing:0; border-collapes:collapse; vertical-align:top;">
        <TR Style="background-color:#595959;color:FFFF00;">
          <TH Style="border:1px solid #FFFF00;font-size:12px; width:125;height:20;"><div style="text-align:center; margin-bottom:-1px;">Meaning</TH>
          <TH Style="border:1px solid #FFFF00;font-size:12px; width:45;height:20;"><div style="text-align:center; margin-bottom:-1px;">&nbsp;&nbsp;Symbol&nbsp;&nbsp;</TH>
        </TR>
        <TR> 
      <TD style="background-color:#000000; color:FFFF00; border:1px solid #FFFF00; font-family:'Arial'; font-size:12px; text-align:center; font-weight:bold;">Not Scheduled</TD>
          <TD style="background-color:#000000;color:FFFF00; border:1px solid #FFFF00;background-image: url(../Images/Not-Scheduled.png); background-size:22px 24px; width:25; height:24; background-repeat:no-repeat; background-position:center;"></TD>
        </TR>
        <TR>
      <TD style="background-color:#000000; color:FFFF00; border:1px solid #FFFF00; font-family:'Arial'; font-size:12px; text-align:center; font-weight:bold;">&nbsp;&nbsp;Deactivated Tanks&nbsp;&nbsp;</TD>
      <TD style="background-color:#000000;color:FFFF00; border:1px solid #FFFF00;background-image: url(../Images/Gray-Astris3.png); background-size:22px 24px; width:25; height:24; background-repeat:no-repeat; background-position:center;"></TD>
        </TR>
    <TR>
      <TD style="background-color:#000000; color:FFFF00; border:1px solid #FFFF00; font-family:'Arial'; font-size:12px; text-align:center; font-weight:bold;">Test Scheduled</TD>
          <TD style="background-color:#000000;color:FFFF00; border:1px solid #FFFF00;background-image: url(../Images/Blue-Test.png); background-size:22px 24px; width:25; height:24; background-repeat:no-repeat; background-position:center;"></TD>
        </TR>
        <TR>
      <TD style="background-color:#000000; color:FFFF00; border:1px solid #FFFF00; font-family:'Arial'; font-size:12px; text-align:center; font-weight:bold;">Test In Process</TD>
          <TD style="background-color:#000000;color:FFFF00; border:1px solid #FFFF00;background-image: url(../Images/Green-Test.png); background-size:22px 24px; width:22; height:24; background-repeat:no-repeat; background-position:center;"></TD>
        </TR>
        <TR>
      <TD style="background-color:#000000; color:FFFF00; border:1px solid #FFFF00; font-family:'Arial'; font-size:12px; text-align:center; font-weight:bold;">Test Late</TD>
          <TD style="background-color:#000000;color:FFFF00; border:1px solid #FFFF00;background-image: url(../Images/Red-Test.png); background-size:22px 24px; width:22; height:24; background-repeat:no-repeat; background-position:center;"></TD>
        </TR>
  </table>
    </table>
  </td>
</div>

【讨论】：