In this tutorial ,how to create side by side table s in html and css. 
Style:
HTML:
Here, am using for create side by side tables with the CSS flex property for divide the column 50% and make the simple design using html and css.
Read also: How to create multiple table using HTML
Side By Side Table In HTML
Style:
*
{
box-sizing: border-box;
}
.container
{
width:1200px;
margin:0 auto;
}
table
{
border-collapse: collapse;
width: 100%;
border: 1px solid #323232;
}
.row
{
display:flex;
}
.column
{
float:left;
flex:50%;
padding:10px;
}
th,td
{
text-align:left;
padding:10px;
border:1px solid #323232;
}
.header
{
background-color:#121212;
color:#fff;
}
.secondheader
{
background-color:#cccccc;
color:#323232;
}
HTML:
<body>
<div class="container">
<h2>Side by Side Tables in HTML</h2>
<div class="row">
<div class="column">
<table>
<tr class="header">
<th>S.NO</th>
<th>ORDER</th>
<th>PRICE</th>
</tr>
<tr>
<td>1</td>
<td>Fruits</td>
<td>100</td>
</tr>
<tr>
<td>2</td>
<td>Nuts</td>
<td>300</td>
</tr>
<tr>
<td>3</td>
<td>Drinks</td>
<td>200</td>
</tr>
</table>
</div>
<!----first column end---->
<div class="column">
<table>
<tr class="secondheader">
<th>S.NO</th>
<th>ORDER</th>
<th>PRICE</th>
</tr>
<tr>
<td>1</td>
<td>Apple</td>
<td>120</td>
</tr>
<tr>
<td>2</td>
<td>Orange</td>
<td>70</td>
</tr>
<tr>
<td>3</td>
<td>JackFruit</td>
<td>170</td>
</tr>
</table>
</div>
</div>
</div>
</body>
Side by Side Tables in Bootstrap
Here, am using Bootstrap to create the side by side tables .Bootstrap is the easy method to learn and use. Just we need to paste the code and the head tag and javascript on the bottom the script tag.
<body>
<div class="container py-5">
<h2>Side by Side Tables in HTML</h2>
<div class="row py-5">
<div class="col-md-6">
<div class="column">
<table class="table table-bordered table-striped border">
<tr>
<th>S.NO</th>
<th>ORDER</th>
<th>PRICE</th>
</tr>
<tr>
<td>1</td>
<td>Fruits</td>
<td>100</td>
</tr>
<tr>
<td>2</td>
<td>Nuts</td>
<td>300</td>
</tr>
<tr>
<td>3</td>
<td>Drinks</td>
<td>200</td>
</tr>
</table>
</div>
</div>
<!----first column end---->
<div class="col-md-6">
<div class="column">
<table class="table table-bordered table-striped border">
<tr>
<th>S.NO</th>
<th>ORDER</th>
<th>PRICE</th>
</tr>
<tr>
<td>1</td>
<td>Apple</td>
<td>120</td>
</tr>
<tr>
<td>2</td>
<td>Orange</td>
<td>70</td>
</tr>
<tr>
<td>3</td>
<td>JackFruit</td>
<td>170</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</body>