How to include two pictures side by side in for IPython Notebook (Jupyter)
Question:
I am trying to insert two pictures side by side in one Markdown cell on a notebook. The way I do it was:
<img src="pic/scan_concept.png" alt="Drawing" style="width: 250px;"/>
in order to be able to size the included picture. Can anyone gives suggestions on top of this?
Answers:
JMann’s solution didn’t work for me. But this one worked
from IPython.display import HTML, display
display(HTML("<table><tr><td><img src='img1'></td><td><img src='img2'></td></tr></table>"))
I took the idea from this notebook
You can create tables using pipes and dashes like this.
A | B
- | -
 | 
I don’t have enough reputation to add comments, so I’ll just put my 2 cents as a separate answer. I also found that JMann’s solution didn’t work, but if you wrap his implementation with table tags:
<table><tr>
<td> <img src="Nordic_trails.jpg" alt="Drawing" style="width: 250px;"/> </td>
<td> <img src="Nordic_trails.jpg" alt="Drawing" style="width: 250px;"/> </td>
</tr></table>
then it works.
I’m using VSCode, with native markdown and that solution works for me in terms …
 | 
Its because I need to insert a lot of images on my website.
Like this:
So, it works on the first two pictures and the others, it doesn’t work =/
I find that I need to add some space between image tags
So, I did this and works fine, like the attached picture:
 | 
// space 1
// space 2
// space 3
 | 
// space 1
// space 2
// space 3
And it worked properly for me!
I hope that helped you!
<table><tr>
<td>
<p align="center" style="padding: 10px">
<img alt="Forwarding" src="images/IMG_20201012_183152_(2).jpg" width="320">
<br>
<em style="color: grey">Forwarding (Anahtarlama)</em>
</p>
</td>
<td>
<p align="center">
<img alt="Routing" src="images/IMG_20201012_183158_(2).jpg" width="515">
<br>
<em style="color: grey">Routing (yönlendirme)</em>
</p>
</td>
</tr></table>
Table of pictures :
| ||
|-|-|
| | 
| | 
View :
I am trying to insert two pictures side by side in one Markdown cell on a notebook. The way I do it was:
<img src="pic/scan_concept.png" alt="Drawing" style="width: 250px;"/>
in order to be able to size the included picture. Can anyone gives suggestions on top of this?
JMann’s solution didn’t work for me. But this one worked
from IPython.display import HTML, display
display(HTML("<table><tr><td><img src='img1'></td><td><img src='img2'></td></tr></table>"))
I took the idea from this notebook
You can create tables using pipes and dashes like this.
A | B
- | -
 | 
I don’t have enough reputation to add comments, so I’ll just put my 2 cents as a separate answer. I also found that JMann’s solution didn’t work, but if you wrap his implementation with table tags:
<table><tr>
<td> <img src="Nordic_trails.jpg" alt="Drawing" style="width: 250px;"/> </td>
<td> <img src="Nordic_trails.jpg" alt="Drawing" style="width: 250px;"/> </td>
</tr></table>
then it works.
I’m using VSCode, with native markdown and that solution works for me in terms …
 | 
Its because I need to insert a lot of images on my website.
Like this:
So, it works on the first two pictures and the others, it doesn’t work =/
I find that I need to add some space between image tags
So, I did this and works fine, like the attached picture:
 | 
// space 1
// space 2
// space 3
 | 
// space 1
// space 2
// space 3
And it worked properly for me!
I hope that helped you!
<table><tr>
<td>
<p align="center" style="padding: 10px">
<img alt="Forwarding" src="images/IMG_20201012_183152_(2).jpg" width="320">
<br>
<em style="color: grey">Forwarding (Anahtarlama)</em>
</p>
</td>
<td>
<p align="center">
<img alt="Routing" src="images/IMG_20201012_183158_(2).jpg" width="515">
<br>
<em style="color: grey">Routing (yönlendirme)</em>
</p>
</td>
</tr></table>
Table of pictures :
| ||
|-|-|
| | 
| | 