Align an image (.jpg) next to a table

[CE Cubed]

Hello Support group,

I need help in coding the below. I need the line graph (which is an image) to be side by side with the table. It also needs to be under step 2. How can i get the image of the graph line to be side by side with the table? Please see code below. If there is an easier way to do this please let me know.

<img src="images7/numberschart.JPG" width="216" height="200" alt=""

style= "float: right" />

<table border="5"

cellpadding="4" cellspacing="5">

  <tr>

    <th>x</th>

    <th>x + 1</th>

  <th>y</th>

  <th>(x,y)</th>

  </tr>

  <tr>

    <td>- 4</td>

    <td>-4 + 1</td>

<td>- 3</td>

  <td>( -4, -3)</td>

  </tr>

  <tr>

    <td>- 2</td>

    <td>- 2 + 1</td>

  <td>- 1</td>

  <td>( - 2, -1)</td>

  </tr>

<tr>

    <td>0</td>

    <td>0 + 1</td>

  <td>1</td>

  <td>( 0, 1)</td>

  </tr>

<tr>

    <td>1</td>

    <td>1 + 1</td>

  <td>2</td>

  <td>( 1,2)</td>

  </tr>

<tr>

    <td>3</td>

    <td>3 + 1</td>

  <td>4</td>

  <td>( 3, 4)</td>

  </tr>

</table>

[Nancy OShea · Accepted solution]

One way is to create 2 floated divisions or columns.

Place your table in the 1st column and your image in the 2nd column.

Another more modern way is with CSS Flexbox.

A Complete Guide to Flexbox | CSS-Tricks

CSS

.flex-container {
  display: flex;
}

HTML

<div class="flex-container">
  <div>TABLE HERE</div>
  <div>IMAGE HERE</div>
</div>