Display tables below images in Jupyter Notebook

Question

I am using ipywidgets to display a carousel of pictures in Jupyter notebook. I would like to put a table that corresponds to each picture below the image. I am struggling to do this and any advice would be appreciated.

Below is example code of what I have done so far. I need help displaying the tmp data frame below each image:

from ipywidgets import *
import pandas as pd
import requests
from ipywidgets import *
from IPython.display import display, HTML

tmp = pd.DataFrame({'metric': ['A', 'B', 'C'],
                   'value': range(3)})

box_layout = Layout(overflow_x='scroll',
                   width='1000px',
                   flex_direction='row',
                   display='flex')

item = Image(value=requests.get(
    'http://www.godalmingmuseum.org.uk/uploads/images/People/Jekyll/Jekyll,_Gertrude,_middle_aged_Y.JPG'
).content)
item
items = [item, item, item,item, item, item]

carousel = Box(children=items, layout=box_layout)
VBox([Label('Images:'), carousel]) 

Answer 1

You could add each image/table pair in a VBox , that is then added to the HBox carousel. That is:

items = [VBox(children=[item, table]),
         VBox(children=[item, table]),
         VBox(children=[item, table]),
         VBox(children=[item, table]),
         VBox(children=[item, table]),
        ]


carousel = Box(children=items, layout=box_layout)

I'm not familiar enough with pandas to tell you how to get the insertable table entry.