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

Question

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>
Link 1 </td>
<td>
<a href="" >Link 2</a> </td>
</tr>
<tr>
<td>
Link 3</td>
<td>
Link 4 </td>
</tr>
</tbody>
</table>
</div>
<table style="display:inline">
<tbody>
<tr>
<td>
Other Link 1
</td>
<td>
Other link 2
</td>
</tr>
</tbody>
</table>
Two tables with separate headings

Answer 1

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;">Link 1</td>
<td style="text-align: right; padding-right: 20px">Link 2</td>
<td style="text-align: left;">Other Link 1</td>
<td style="text-align: right; padding-right: 20px">Other Link 2</td>
</tr>
<tr>
<td style="text-align: left; ">Link 3</td>
<td style="text-align: right; padding-right: 20px">Link 4</td>
<td style="text-align: left;">Other Link 3</td>
<td style="text-align: right; padding-right: 20px">Other Link 4</td>
</tr>
<tr>
<td style="text-align: left;">Link 5</td>
<td style="text-align: right; padding-right: 20px">Link 6</td>
</tr>
</table>

Answer 2

you mean like this?
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>

Answer 3

One way of doing it is:
<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>
Link 1 </td>
<td>
Link 2 </td>
</tr>
<tr>
<td>
Link 3</td>
<td>
Link 4 </td>
</tr>
</tbody>
</table>
</div>
<div style="float:right;">
<table style="display:inline;border:1px solid black;">
<tbody>
<tr>
<td>
Other Link 1
</td>
<td>
Other link 2
</td>
</tr>
</tbody>
</table>
</div>
</div>
2nd way: Define one parent table and put these tables in cells of the parent table
<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>