HTML 表格在一个 TD 中构建两个菜单

Question

我有一个单行两列的表格。我有两个菜单，我想放在 1 列中。一个到顶部，第二个到底部。 valign 不起作用，我不知道如何让它起作用，第二个 td 中的文本可以更改，因此如果它增长，则应将第二个菜单推送到底部，

请在下面查看我当前的代码:

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

Answer 1

你的代码没有问题

尝试在所有表格标签上添加 border="1"。 <table border ="1">你想通了

尝试验证您的最后一个 <div>

或您指定的 colspan <td>

使用此代码进行的新更新将使:

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