How can I set the tables side by side? - html

Question

How can I set the tables side by side? I'm a bloody rookie, I know there are more elegant ways to do my code, I'd appreciate your input, i posted my code on pastebin since I had a werid error here
My HTML code: https://pastebin.com/gq73n05Q enter code here
This is how my Website looks like & below how I want it to be: https://imgur.com/a/Fa5No00

Answer 1

So, in my view, best way to get two tables side by side is to put them into divs.
You'd add a div before your first table (line 32 in your pastebin) that looks like such:
<div class="column">
<!---your left hand table goes in here --->
</div>
Then you do exactly the same for your second table (new div at line 59, same class as above).
<div class="column">
<!---your right hand table goes in here --->
</div>
Then you add some style rules to govern your two new divs. I'd hugely recommend doing this in a section at the top of your page somewhere.
<style>
.column {
display:inline-block;
width:50%;
float:left;
}
</style>
If you wanted to inline those styles, then each div would start like this:
<div style="display:inline-block;width:50%;float:left;">
That will make the columns appear side by side as you want.
You should note, you are going to run into other troubles though. You've hard-coded in a lot of "width" rules in the tables and table cells which will impact the responsiveness of your page and, in general, unless you're doing an html email, you'd really want to steer clear of tables for layout purposes.
If you'd like to see a best-practice implementation of it anyway, there's this one on w3schools.com: https://www.w3schools.com/howto/howto_css_table_side_by_side.asp it has quite an elegant look which might prove useful.
Good luck with it!