Skip to main content
CE Cubed
Inspiring
September 7, 2018
Répondu

Align an image (.jpg) next to a table

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>

Ce sujet a été fermé aux réponses.
Meilleure réponse par Nancy OShea

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>

1 commentaire

Nancy OShea
Community Expert
Nancy OSheaCommunity ExpertRéponse
Community Expert
September 7, 2018

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>

Nancy O'Shea— Product User & Community Expert