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

Question

我有一张有 1 行 2 列的表。我有两个菜单，我想放在 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

您的代码没有任何问题

尝试在所有表格标签上添加边框 =“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>