How do I add an image beside a table

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;}