Make two table beside each other - css

Question

I want my table Semester Attended to be in the left of the Grade table. How can i achieve this? Im new to html and css. Can someone give me clues to achieve this?
here's my code.
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>Semester Attended</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<aside></aside>
</td>
</tr>
</tbody>
</table>
</div>
<div class="table-responsive">
<div id="gradetable">
</div>
</div>

Answer 1

Since you are using bootstrap - just use the grid system.
Create new row, add to columns (.col-X-6), and inside each column's-cell put one table.
Something like that:
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>Semester Attended</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<aside></aside>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<div class="table-responsive">
<div id="gradetable">
</div>
</div>
</div>
</div>

Answer 2

You can wrap both tables for each column, same row in another table.
E.g.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<table class="table table-bordered">
<thead>
<tr>
<th>Semester Attended Table</th>
<th>Grade Table</th>
</tr>
</thead>
<tbody>
<td>
<table id="semesterAttendedTable" class="table table-bordered">
<thead>
<tr>
<td>Semester 1</td>
<td>Semester 2</td>
<td>Semester 3</td>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1,1</td>
<td>Row 1,2</td>
<td>Row 1,3</td>
</tr>
<tr>
<td>Row 2,1</td>
<td>Row 2,2</td>
<td>Row 2,3</td>
</tr>
</tbody>
</table>
</td>
<td>
<table id="gradeTable" class="table table-bordered">
<thead>
<tr>
<td>Grade 1</td>
<td>Grade 2</td>
<td>Grade 3</td>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1,1</td>
<td>Row 1,2</td>
<td>Row 1,3</td>
</tr>
<tr>
<td>Row 2,1</td>
<td>Row 2,2</td>
<td>Row 2,3</td>
</tr>
</tbody>
</table>
</td>
</tbody>
</table

Answer 3

You just need to add float:left to the div with the first table.
div.semester {
float:left;
}
<div class="table-responsive semester">
<table class="table table-bordered">
<thead>
<tr>
<th>Semester Attended</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<aside></aside>
</td>
</tr>
</tbody>
</table>
</div>
<div class="table-responsive" id="gradetable">
<table class="table table-bordered">
<thead>
<tr>
<th>Grades</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<aside></aside>
</td>
</tr>
</tbody>
</table>
</div>