如何創建兩個表，並排標題？

我正在編輯一個網頁，我需要創建兩個類似於附加屏幕截圖的表格。相對較新的HTML。我的代碼如下。 JFiddle參考它目前的樣子。 https://jsfiddle.net/u97rggyy/如何創建兩個表，並排標題？

在此先感謝。

<div id="tabs-container"> 
    <h2> 
      <table style="width: 100%; text-align:center"> 
       <tbody> 
       <tr> 
        <th> 
         <span>First header links</span></th> 
        <th> 
         <span>Other Links</span></th> 
       </tr> 
       </tbody> 
      </table> 
     </h2> 
    <div class="link-item"> 
     <table style="width: 50%;"> 
      <tbody style="font-family: segoe ui;"> 
       <tr> 
       <td> 
        <a href="">Link 1</a> </td> 
       <td> 
        <a href="" >Link 2</a> </td> 
       </tr> 
       <tr> 
       <td> 
        <a href="">Link 3</a></td> 
       <td> 
        <a href="">Link 4</a> </td> 
       </tr> 

      </tbody> 
     </table> 
     </div> 
     <table style="display:inline"> 
      <tbody> 
       <tr> 
        <td> 
         <a href="">Other Link 1</a> 
        </td> 
        <td> 
         <a href="">Other link 2</a> 
        </td> 
       </tr> 
      </tbody> 

     </table>

Two tables with separate headings

做的

來源

2016-04-26 JarrodOliver

爲什麼你在包裝'h2'標籤的表？ – Scott

只是做一個快速的草案，這將如何工作。我將最終給出跨學習班，並從外部樣式表中進行格式設置。 – JarrodOliver

你會考慮做這一切在一個表是這樣的：https://jsfiddle.net/u97rggyy/3/

<table style="width:100%"> 
    <tr> 
    <th colspan="2"><h2>First header links</h2></th>  
    <th colspan="2"><h2>Other Links</h2></th> 
    </tr> 
    <tr> 
    <td style="text-align: left;"><a href="">Link 1</a></td> 
    <td style="text-align: right; padding-right: 20px"><a href="">Link 2</a></td>  
    <td style="text-align: left;"><a href="">Other Link 1</a></td> 
    <td style="text-align: right; padding-right: 20px"><a href="">Other Link 2</a></td> 
    </tr> 
    <tr> 
    <td style="text-align: left; "><a href="">Link 3</a></td> 
    <td style="text-align: right; padding-right: 20px"><a href="">Link 4</a></td>  
    <td style="text-align: left;"><a href="">Other Link 3</a></td> 
    <td style="text-align: right; padding-right: 20px"><a href="">Other Link 4</a></td> 
    </tr> 
    <tr> 
    <td style="text-align: left;"><a href="">Link 5</a></td> 
    <td style="text-align: right; padding-right: 20px"><a href="">Link 6</a></td>  
    </tr> 
</table>

來源

2016-04-26 23:31:52

正是我在找的東西。非常感謝。 – JarrodOliver

一種方法是：

<div id="tabs-container"> 
    <h2> 
    <table style="width: 100%; text-align:center; border:1px solid black;"> 
     <tbody> 
     <tr> 
      <th> 
      <span>First header links</span></th> 
      <th> 
      <span>Other Links</span></th> 
     </tr> 
     </tbody> 
    </table> 
    </h2> 
    <div class="link-item" style="float:left;"> 
    <table style="width: 50%;"> 
     <tbody style="font-family: segoe ui;"> 
     <tr> 
      <td> 
      <a href="">Link 1</a> </td> 
      <td> 
      <a href="">Link 2</a> </td> 
     </tr> 
     <tr> 
      <td> 
      <a href="">Link 3</a></td> 
      <td> 
      <a href="">Link 4</a> </td> 
     </tr> 

     </tbody> 
    </table> 
    </div> 
    <div style="float:right;"> 
    <table style="display:inline;border:1px solid black;"> 
     <tbody> 
     <tr> 
      <td> 
      <a href="">Other Link 1</a> 
      </td> 
      <td> 
      <a href="">Other link 2</a> 
      </td> 
     </tr> 
     </tbody> 

    </table> 
    </div> 

</div>

第二個辦法：在父表中的單元定義一個父表，並把這些表

<table style="width:100%;border:1px solid black;"> 
     <tr><td colspan="2"> 
     <table style="width:100%;border:1px solid black;"> 
     <tr> 
      <td>First Header Links</td><td>Other Links</td> 
     </tr> 
     </table> 
    </td> 
    </tr> 
    <tr > 
    <td > 
     <table style="width:100%;border:1px solid black;"> 
     <tr><td>1</td> 
     <td>2</td></tr> 
     </table> 
    </td> 

    <td > 
     <table table style="width:100%;border:1px solid black;"> 
     <tr><td>3</td></tr> 
     <tr><td>4</td></tr> 
     </table> 
    </td> 
    </tr> 
</table> 
</table>

來源

2016-04-26 23:24:47

你的意思是這樣的？

jsFiddle

<div id="tabs-container"> 
    <table style="text-align:center;display:inline-block;width:30%;"> 
     <tbody> 
     <tr> 
      <th colspan="2">HEADER 1</th> 
     </tr> 
     <tr> 
      <td>  
       Link 1      
      </td> 
      <td>       
       Link 2      
      </td>      
     </tr> 
     <tr> 
      <td>  
       Link 3      
      </td> 
      <td>       
       Link 4      
      </td>      
     </tr>  
     <tr> 
      <td>  
       Link 5      
      </td> 
      <td>       
       Link 6      
      </td>      
     </tr>  
     <tr> 
      <td>  
       Link 7      
      </td> 
      <td>       
       Link 8      
      </td>      
     </tr>             
     </tbody> 
    </table> 
    <table style="text-align:center;display:inline-block;width:30%;"> 
     <tbody> 
     <tr> 
      <th colspan="2">HEADER 2</th> 
     </tr> 
     <tr> 
      <td>  
       Other Link 1      
      </td> 
      <td>       
       Other Link 2      
      </td>      
     </tr> 
     <tr> 
      <td>  
       Other Link 3      
      </td> 
      <td>       
       Other Link 4      
      </td>      
     </tr>              
     </tbody> 
    </table> 
</div>

來源

2016-04-26 23:30:04 Shawn

如何創建兩個表，並排標題？

回答

相關問題