HTML嵌套表和列表導致意外輸出

我在使用HTML中的嵌套表和列表時遇到了令人難以置信的麻煩。我發誓我正確地構建HTML代碼，使用Sublime來幫助我確保所有標籤和結束標籤彼此排列並具有適當的縮進以跟蹤所有內容。但是，我的輸出是我所期望的FAR。我懷疑當您嘗試將表彼此嵌套時可能會出現問題，尤其是當您試圖使表包含無序的表列表時。HTML嵌套表和列表導致意外輸出

這裏的主要問題是：

-Having的無序列表普通子彈讓子彈出現在隨機的地方，它沒有任何意義。然而，即使在向我的ul標籤添加style =「list-style-type：none」後，我甚至不必擔心看到這些項目符號，我仍然可以看到每個列表項目的項目符號名單。這對外部無序列表和內部列表都是一個問題。

-您在底部看到的第二組「href」和「主機」應位於「項目」表格內，因爲兩個表格都在相同的位置。那麼爲什麼它在一切之外，包括在「物品」表之外呢？

有沒有我失蹤的標籤？！

這裏是我的HTML代碼，您可以運行它在這裏看到的輸出是什麼樣子：

<!DOCTYPE html> 
 
<html> 
 

 
<body> 
 
    <table border="1"> 
 
    <table border="1"> 
 
     <tr> 
 
     <th>href</th> 
 
     <td>http://hello.com</td> 
 
     </tr> 
 
     <tr> 
 
     <th>items</th> 
 
     <td> 
 
      <table border="1"> 
 
      <ul style="list-style-type:none"> 
 
       <li> 
 
       <table border="1"> 
 
        <tr> 
 
        <th>href</th> 
 
        <td>hello1</td> 
 
        </tr> 
 
        <tr> 
 
        <th>Hosts</th> 
 
        <td> 
 
         <table border="1"> 
 
         <tr> 
 
          <th>c_name</th> 
 
          <td>c_name value</td> 
 
         </tr> 
 
         <tr> 
 
          <th>host_name</th> 
 
          <td> 
 
          <table border="1"> 
 
           <ul style="list-style-type:none"> 
 
           <li> 
 
            <table border="1"> 
 
            <tr> 
 
             <th>href</th> 
 
             <td>hello1.1</td> 
 
            </tr> 
 
            <tr> 
 
             <th>Hosts1.1</th> 
 
             <td> 
 
             <table border="1"> 
 
              <tr> 
 
              <th>myAge</th> 
 
              <td>400</td> 
 
              </tr> 
 
              <tr> 
 
              <th>favColor</th> 
 
              <td>Red</td> 
 
              </tr> 
 
             </table> 
 
             </td> 
 
            </tr> 
 
            </table> 
 
           </li> 
 
           <li> 
 
            <table border="1"> 
 
            <tr> 
 
             <th>href</th> 
 
             <td>hello1.2</td> 
 
            </tr> 
 
            <tr> 
 
             <th>Hosts</th> 
 
             <td> 
 
             <table border="1"> 
 
              <tr> 
 
              <th>c_name</th> 
 
              <td>c_name value</td> 
 
              </tr> 
 
              <tr> 
 
              <th>host_name</th> 
 
              <td>hello1.2</td> 
 
              </tr> 
 
             </table> 
 
             </td> 
 
            </tr> 
 
            </table> 
 
           </li> 
 
           </ul> 
 
          </table> 
 
          </td> 
 
         </tr> 
 
         </table> 
 
        </td> 
 
        </tr> 
 
       </table> 
 
       </li> 
 
       <li> 
 
       <table border="1"> 
 
        <tr> 
 
        <th>href</th> 
 
        <td>hello2</td> 
 
        </tr> 
 
        <tr> 
 
        <th>Hosts</th> 
 
        <td> 
 
         <table border="1"> 
 
         <tr> 
 
          <th>c_name</th> 
 
          <td>c_name value</td> 
 
         </tr> 
 
         <tr> 
 
          <th>host_name</th> 
 
          <td>host value</td> 
 
         </table> 
 
        </td> 
 
        </tr> 
 
       </table> 
 
       </li> 
 
      </ul> 
 
      </table> 
 
     </td> 
 
     </tr> 
 
    </table> 
 
    </table> 
 
</body> 
 

 
</html>

這裏仍然有同樣的問題，但更容易更短的代碼讀書。請注意，第二個「href」和「Hosts」表不會被這個較短的代碼從「項目」中推出。

<!DOCTYPE html> 
 
<html> 
 

 
<body> 
 
    <table border="1"> 
 
    <table border="1"> 
 
     <tr> 
 
     <th>href</th> 
 
     <td>http://hello.com</td> 
 
     </tr> 
 
     <tr> 
 
     <th>items</th> 
 
     <td> 
 
      <table border="1"> 
 
      <ul style="list-style-type:none"> 
 
       <li> 
 
       <table border="1"> 
 
        <tr> 
 
        <th>href</th> 
 
        <td>hello1</td> 
 
        </tr> 
 
        <tr> 
 
        <th>Hosts</th> 
 
        <td> 
 
         <table border="1"> 
 
         <tr> 
 
          <th>c_name</th> 
 
          <td>c_name value</td> 
 
         </tr> 
 
         <tr> 
 
          <th>host_name</th> 
 
          <td>host value</td> 
 
         </tr> 
 
         </table> 
 
        </td> 
 
        </tr> 
 
       </table> 
 
       </li> 
 
       <li> 
 
       <table border="1"> 
 
        <tr> 
 
        <th>href</th> 
 
        <td>hello2</td> 
 
        </tr> 
 
        <tr> 
 
        <th>Hosts</th> 
 
        <td> 
 
         <table border="1"> 
 
         <tr> 
 
          <th>c_name</th> 
 
          <td>c_name value</td> 
 
         </tr> 
 
         <tr> 
 
          <th>host_name</th> 
 
          <td>host value</td> 
 
         </table> 
 
        </td> 
 
        </tr> 
 
       </table> 
 
       </li> 
 
      </ul> 
 
      </table> 
 
     </td> 
 
     </tr> 
 
    </table> 
 
    </table> 
 
</body> 
 

 
</html>

來源

2015-07-11 OMGitzMidgar

http://validator.w3.org/nu/ – Quentin

有一個表作爲直接子元素一個表是無效的HTML - 您至少需要一個表格行和一個表格單元格，然後您可以將「下一個」表格放入該表格單元格中。 'ul'也是如此 - 也不允許作爲'table'的子元素，它也必須位於表格單元格內。 //你實際想要在這裏實現的目標很不明確。如果實際上有「表格」數據要在這裏呈現（很難說是否如此），那麼您應該只使用表格 - 您不應僅僅將它們用於佈局目的，這將是上個千年的一種技術。 – CBroe

我明白我不應該純粹用於佈局的目的，我明白，這個輸出絕對不會看起來漂亮:)這個評論解釋了我的問題，並完美解決它。使用您的評論，我能夠找到所有問題並在我的代碼中修復它們。謝謝！ – OMGitzMidgar

你必須正確應用內聯CSS裏項目，請參閱下面的代碼。爲什麼不嘗試添加一個類，然後將一些CSS應用到你的li項目，並嘗試重寫你的代碼它看起來像一張桌子金字塔，閱讀上面的Cbroe的評論。

添加類到您的UL標籤，例如：

<ul class="mylist"> 
<li></li> 
</ul> 

    <style type="text/css"> 
     ul.mylist li { 
      list-style-type:none 
      } 
    </style>

<!DOCTYPE html> 
 
<html> 
 

 
    <body> 
 
     <table border="1"> 
 
      <table border="1"> 
 
       <tr> 
 
        <th>href</th> 
 
        <td>http://hello.com</td> 
 
       </tr> 
 
       <tr> 
 
        <th>items</th> 
 
        <td> 
 
         <table border="1"> 
 
          <ul class="mylist"> 
 
           <li style="list-style-type:none"> 
 
            <table border="1"> 
 
             <tr> 
 
              <th>href</th> 
 
              <td>hello1</td> 
 
             </tr> 
 
             <tr> 
 
              <th>Hosts</th> 
 
              <td> 
 
               <table border="1"> 
 
                <tr> 
 
                 <th>c_name</th> 
 
                 <td>c_name value</td> 
 
                </tr> 
 
                <tr> 
 
                 <th>host_name</th> 
 
                 <td>host value</td> 
 
                </tr> 
 
               </table> 
 
              </td> 
 
             </tr> 
 
            </table> 
 
           </li> 
 
           <li style="list-style-type:none"> 
 
            <table border="1"> 
 
             <tr> 
 
              <th>href</th> 
 
              <td>hello2</td> 
 
             </tr> 
 
             <tr> 
 
              <th>Hosts</th> 
 
              <td> 
 
               <table border="1"> 
 
                <tr> 
 
                 <th>c_name</th> 
 
                 <td>c_name value</td> 
 
                </tr> 
 
                <tr> 
 
                 <th>host_name</th> 
 
                 <td>host value</td> 
 
               </table> 
 
              </td> 
 
             </tr> 
 
            </table> 
 
           </li> 
 
          </ul> 
 
         </table> 
 
        </td> 
 
       </tr> 
 
      </table> 
 
     </table> 
 
    </body> 
 
</html>

來源

2015-07-11 09:04:20

這很有道理，謝謝！這個答案和CBroe的評論相結合，充分回答了我的問題，並幫助我實現了自己的目標。謝謝！ – OMGitzMidgar

我很高興它幫助@OMGitzMidgar –

HTML嵌套表和列表導致意外輸出

回答

相關問題