Question

我正在编辑网页，我需要创建两个类似于附加截图的表格。相对较新的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

Answer 1

这样做的一种方法是：

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

Answer 2

你的意思是这样吗？

Cordova Media plugin

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

Answer 3

你会考虑在这样的表格中完成所有这些：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>

如何创建两个表格，并排标题？

3 个答案: