How do I add an image beside a table - html

Question

I want to add a image beside the table so it shows a img.
I tried doing img float left, but it doesn't seem to work. If someone could put a value so it floats parallel or beside the table it would be great
My code is:
#toppings {
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: -10px;
}
#toppings td, #toppings th {
border: 1px solid #ddd;
padding: 0px;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}
#toppings th {
padding-top: 10px;
padding-bottom: 10px;
text-align: left;
background-color: #000000;
color: white;
}
<table id="toppings">
<tr>
<th>Rank</th>
<th>Team</th>
<th>Record</th>
</tr>
<tr>
<td>1</td>
<td>Yugoslavia</td>
<td>180-2</td>
</tr>
<tr>
<td>2</td>
<td>Argentina</td>
<td>172-10</td>
</tr>
<tr>
<td>3</td>
<td>Germany</td>
<td>160-22</td>
</tr>
</table>
Thanks

Answer 1

This will work..
HTML : Image is wrapped in a div with id #imgdiv, Table is wrapped in another div #datadiv, And both of them wrapped in a #container div.
<div id="container">
<div id="imgdiv">
<img src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" width="100px"/>
</div>
<div id="datadiv">
<table>
<tr>
<th>Rank</th>
<th>Team</th>
<th>Record</th>
</tr>
<tr>
<td>1</td>
<td>Yugoslavia</td>
<td>180-2</td>
</tr>
<tr>
<td>2</td>
<td>Argentina</td>
<td>172-10</td>
</tr>
<tr>
<td>3</td>
<td>Germany</td>
<td>160-22</td>
</tr>
</table>
</div>
</div>
CSS : Added styling for #imgdiv #datadiv #container.
#toppings {
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: -10px;
}
#toppings td, #toppings th {
border: 1px solid #ddd;
padding: 0px;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}
#toppings th {
padding-top: 10px;
padding-bottom: 10px;
text-align: left;
background-color: #000000;
color: white;
}
#imgdiv
{
float:left;
}
#datadiv
{
float:right
}
#container
{
display: inline-block
}

Answer 2

Since it is not mentioned anywhere, I am assuming that you have to align the image on the right of the table because float:left would work for aligning the image on the left of the table.
To align the image on the right of the table, use display:inline-block on both image and table. Additionally, you can also use vertical-align:top to align the top of the image with the top of the table.
Here is the complete code:
HTML Code
<table id="toppings">
<tr>
<th>Rank</th>
<th>Team</th>
<th>Record</th>
</tr>
<tr>
<td>1</td>
<td>Yugoslavia</td>
<td>180-2</td>
</tr>
<tr>
<td>2</td>
<td>Argentina</td>
<td>172-10</td>
</tr>
<tr>
<td>3</td>
<td>Germany</td>
<td>160-22</td>
</tr>
</table>
<img className="testtableimage" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" />
CSS Code
#toppings {
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: -10px;
display:inline-block;
}
#toppings td, #toppings th {
border: 1px solid #ddd;
padding: 0px;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}
#toppings th {
padding-top: 10px;
padding-bottom: 10px;
text-align: left;
background-color: #000000;
color: white;
}
.testtableimage{display:inline-block;vertical-align:top;width:200px;}