JarrodOliver JarrodOliver - 7 months ago 41
HTML Question

How to create two tables, side by side with headings?

I'm editing a web page and i need to create two tables similar to the screenshot attached. Relatively new to html. My code is below. JFiddle for reference as to how it looks currently. https://jsfiddle.net/u97rggyy/

Thanks in advance.

<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

Would you consider doing it all in one table like this: 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>
Comments