HTML Table Build Two Menus in one TD

StackOverflow https://stackoverflow.com/questions/12224282

  •  29-06-2021
  •  | 
  •  

Question

I have a table with one row and 2 columns. I have two menus that I would like to put in 1 column. One to the top and the second to the bottom. The valign doesn't work, I cant figure out how to make it work, the text in the second td can change so if it grows the second menu should be pushed to the bottom,

Please see my current code below:

<table>
  <tr>
     <td>
      <table>
       <tr>
        <td  valign="top">
          <div class="left">
                <ul>
                   <li><a href="#">one</a></li>
                   <li><a href="#">two</a></li>
                   <li><a href="#">three</a></li>
                </ul>                                     
         </div>
         </td>
        </tr>
        <tr>
         <td valign="bottom">
           <div class="left">
               <ul>
                  <li><a href="#">four</a></li>
                  <li><a href="#">five</a></li>
              </ul>        
           </div>
         </td>
      </tr>
     </table>
    </td>
    <td valign="bottom">
       <div>
       some text here
    </div>
   </td>
 </tr>

Was it helpful?

Solution

There is nothing wrong with your code

try to add border="1" on all table tag. <table border ="1"> you'' figure it out

try to valign your last <div>

or colspan on your specified <td>

enter image description here

new updated with this code will makes:

<table border="1">
  <tr>
     <td>
      <table border ="1">
       <tr>
        <td  valign="top">
          <div class="left">
                <ul>
                   <li><a href="#">one</a></li>
                   <li><a href="#">two</a></li>
                   <li><a href="#">three</a></li>
                </ul>                                     
         </div>
         </td>
        </tr>
        <tr>
         <td valign="bottom">
           <div class="left">
               <ul>
                  <li><a href="#">four</a></li>
                  <li><a href="#">five</a></li>
              </ul>        
           </div>
         </td>
      </tr>
     </table>
    </td>
    <td valign="bottom" style="display:block; margin-left:auto; margin-right: auto;">
        <div>
       some text here some text here some text here some text here some text here some text here some text here some text here 
        </div>
   </td>
 </tr>

enter image description here

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top