對齊HTML表中的行內容

初學HTML的學習者在這裏，他卡住了！我已經開發了下面的html代碼，輸出是我在代碼下面放置的圖像。我需要將圖像向上推並將其頂部與第二行（XXXX）對齊，但是無論我嘗試過什麼，都行不通！對齊HTML表中的行內容

這是頁面的樣子：

<HTML><HEAD><TITLE>XXXXX Page </TITLE> 
 
    
 
    <style type="text/css"> 
 
    * { 
 
     padding: 0; 
 
     margin: 0; 
 
     font-family: georgia, palatino, "times new roman", times; 
 
    } 
 
    body { 
 
     font-size: 1em; 
 
     width: 80em; 
 
     margin: 10em 2em 1em 2em; 
 
     background-color: #F8F8F8; 
 
    } 
 
    * tt { 
 
     font-family: "lucida console", menlo, monaco, "courier new", courier, monospace; 
 
    } 
 
    * td { 
 
     font-weight: normal; 
 
     padding: 0em 0.25em 0.5em 0.25em; 
 
     text-align: left; 
 
    } 
 
    * a { text-decoration: none; color: #0033EE; } 
 
    </style> 
 
    
 
    </HEAD> 
 
    <BODY> 
 
    <TABLE border=0 cellpadding=20 cellspacing=10> 
 
     <TBODY> 
 
     <TR> 
 
     <TD valign=bottom> 
 
      <TABLE BORDER=0> 
 
      <TBODY> 
 
      <TR> 
 
       <TD align=left valign=bottom> 
 
       <IMG 
 
       alt="XXXX" border=0 height=200 
 
       src="XXXX.jpg" width=200> 
 
      </TD></TR></TBODY></TABLE> 
 
      <div id="copyright"> 
 
      <center><font size="1">[XXXX]</font></center> 
 
     </div> 
 
     </TD> 
 
     <TD valign=bottom> 
 
      <TABLE> 
 
      <TBODY> 
 
      <TR> 
 
       <TD vAlign=top><FONT size=+3>XXXX </FONT> [at gmail dot com] </TD> 
 
      </TR> 
 
      <TR> 
 
       <TD><font size=+1>XXXX</font></TD> 
 
      </TR> 
 
      <TR> 
 
       <TD><font size=+1>XXXXX</font> 
 
      </TD></TR> 
 
       <TR> 
 
       <TD><font size=+1>XXXXX<br><br> 
 
       XXXX<br> 
 
       XXXX <br> 
 
       XXXX </font> 
 
      </TD></TR> 
 
       <TR> 
 
       <TD>&nbsp;</TD> 
 
      </TR> 
 
      <TR> 
 
       <TD><font size=+1><b>XXXX</b></font> 
 
      </TD></TR> 
 
      <TR> 
 
       <TD valign=bottom><font size="+1"><B>XXXX</B> 
 
       &nbsp; | &nbsp; <A href="Alpha.pdf">YYYY</A> 
 
       </font> 
 
       </TD> 
 
      </TR> 
 
      </TBODY> 
 
     </TABLE> 
 
     </TD> 
 
    </TR> 
 
    </TBODY> 
 
    </TABLE> 
 
    </BODY> 
 
    </HTML>

來源

2016-11-21 user3639557

您的HTML和CSS中存在如此多的缺陷，您應該尋找最新的教程。 –

https://www.hotdesign.com/seybold/everything.html – Quentin

添加到您的CSS：

td { vertical-align: top; }

來源

2016-11-21 10:19:29 chrki

太棒了！有沒有辦法用數字來定義這個空間，而不是使用「頂部」？ – user3639557

@ user3639557您可以在元素上使用邊距（margin-top，margin-left等）或填充（padding-top，-left等）來創建一些間距。 'vertical-align：top'只會給內容流提供一個大致的方向。這裏有一些演示代碼可供玩耍：https://plnkr.co/edit/W2mAy9QzpzJ3Q1SKR6FP?p=preview – chrki

<HTML><HEAD><TITLE>XXXXX Page </TITLE> 
 
    
 
    <style type="text/css"> 
 
    * { 
 
     padding: 0; 
 
     margin: 0; 
 
     font-family: georgia, palatino, "times new roman", times; 
 
    } 
 
    body { 
 
     font-size: 1em; 
 
     width: 80em; 
 
     margin: 10em 2em 1em 2em; 
 
     background-color: #F8F8F8; 
 
    } 
 
    * tt { 
 
     font-family: "lucida console", menlo, monaco, "courier new", courier, monospace; 
 
    } 
 
    * td { 
 
     font-weight: normal; 
 
     padding: 0em 0.25em 0.5em 0.25em; 
 
     text-align: left; 
 
    } 
 
    * a { text-decoration: none; color: #0033EE; } 
 
    </style> 
 
    
 
    </HEAD> 
 
    <BODY> 
 
    <TABLE border=0 cellpadding=20 cellspacing=10> 
 
     <TBODY>    
 
\t <TR> 
 
     <TD /><TD vAlign=top><FONT size=+3>XXXX </FONT> [at gmail dot com] </TD> 
 
     </TR> 
 
     <TR> 
 
     <TD valign=top> 
 
      <TABLE BORDER=0> 
 
      <TBODY> 
 
      <TR> 
 
       <TD align=left valign=bottom> 
 
       <IMG 
 
       alt="XXXX" border=0 height=200 
 
       src="XXXX.jpg" width=200> 
 
      </TD></TR></TBODY></TABLE> 
 
      <div id="copyright"> 
 
      <center><font size="1">[XXXX]</font></center> 
 
     </div> 
 
     </TD> 
 
     <TD valign=bottom> 
 
      <TABLE> 
 
      <TBODY> 
 

 
      <TR> 
 
       <TD><font size=+1>XXXX</font></TD> 
 
      </TR> 
 
      <TR> 
 
       <TD><font size=+1>XXXXX</font> 
 
      </TD></TR> 
 
       <TR> 
 
       <TD><font size=+1>XXXXX<br><br> 
 
       XXXX<br> 
 
       XXXX <br> 
 
       XXXX </font> 
 
      </TD></TR> 
 
       <TR> 
 
       <TD>&nbsp;</TD> 
 
      </TR> 
 
      <TR> 
 
       <TD><font size=+1><b>XXXX</b></font> 
 
      </TD></TR> 
 
      <TR> 
 
       <TD valign=bottom><font size="+1"><B>XXXX</B> 
 
       &nbsp; | &nbsp; <A href="Alpha.pdf">YYYY</A> 
 
       </font> 
 
       </TD> 
 
      </TR> 
 
      </TBODY> 
 
     </TABLE> 
 
     </TD> 
 
    </TR> 
 
    </TBODY> 
 
    </TABLE> 
 
    </BODY> 
 
    </HTML>

來源

2016-11-21 10:34:42

對齊HTML表中的行內容

回答

相關問題