I need to put this example on my html page using a table or else lists.
I would like to know how I do it because I am not getting it and what is the best shape please.
Using pure HTML I was able to get with this code. I hope this is what you are looking for.
JSFiddle: link
HTML:
<div id="div-left">
<div class="image">
Image 1
</div>
<div class="image">
Image 2
</div>
<div class="image">
Image 3
</div>
</div>
<div id="div-center">
<div class="image big">
Image 4
</div>
<div class="image small">
Image 5
</div>
</div>
<div id="div-right">
<div class="image">
Image 6
</div>
<div class="image">
Image 7
</div>
<div class="image">
Image 8
</div>
</div>
CSS:
.image{
height: 100px;
line-height: 100px;/*Somente para colocar o label no centro*/
border: 1px solid; /*So para delimitar as div visualmente*/
text-align: center;/*Somente para colcoar o label no centro*/
}
.big{
height: 250px;
line-height: 250px;/*Somente para colocar o label no centro*/
}
.small{
height: 50px;
line-height: 50px;/*Somente para colocar o label no centro*/
}
#div-left, #div-center, #div-right{
float:left;
}
#div-left, #div-right{
width: 20%;
}
#div-center{
width: 60%;
}
I recommend flexboxing as it will be simple and most browsers support.
Read this guide to better understand: link
Even if you do not understand a lot of English, I urge you to try and use google translate if you need to, but read with patience and revert all examples to the end. I guarantee you will not have any problems with layouts after studying flexbox.
Good studies!