html - 如何创建两个与标题并排的表格？

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

您会考虑像这样在一张表中完成所有操作吗: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>