CODEWITHSUNDEEP
html
user3639557
user3639557

Reputation: 5281

aligning rows' contents in HTML table

Beginner HTML learner here and he is stuck! I have developed the following html code and the output is the image that I put right below the code. I need to push the image up and align its top with the second rows (XXXX), but whatever I tried, didn't work!

And this is what the page looks like:

enter image description here

 <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>

Upvotes: 1

Views: 52

Answers (2)

LF-DevJourney
LF-DevJourney

Reputation: 28529

 <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 /><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>

Upvotes: 0

chrki
chrki

Reputation: 6323

Add this to your CSS:

td { vertical-align: top; }

Upvotes: 2

Related Questions