Best way to align images with text in Wordpress? - html

Question

I'm new to Wordpress and and currently want to add multiple images with text aligned to it on a page. I thought about doing it with a table, but not sure if this is the best solution. Ill describe what I thought how I'd do it.
1. Row 1. Cell Picture
1. Row 2. Cell Header Text + Body text for a short image description
I need to do that multiple times so I thought its the easiest way...
Now I tried to do that with the TablePress Plugin, the only problem is that I cant add a header text for each sell, and there for cant change the font explicitly for the header.
Is there an alternative to TablePress that allows me to change fonts and colors of text within a cell?
Or should I do it manually?
Really appreciate your help.
Thanks

Answer 1

Is this what you're looking for?
.container {
width: 100%;
}
.image, .description {
width: 50%;
float: left;
box-sizing: border-box;
}
.image img {
width: 100%;
}
.description {
padding: 15px;
}
<div class="container">
<div class="image">
<img src="https://preview.ibb.co/ioNAzT/img02.jpg">
</div>
<div class="description">
<h2>Image title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut mollis lacus. Pellentesque euismod mauris justo. Aenean eu sagittis ex. Suspendisse potenti. Duis velit lacus, vestibulum sit amet ex sed, mattis scelerisque metus.</p>
</div>
</div>

Answer 2

I wouldn't use a table but a flexbox to store the products. For an example see below.
.row {
display: flex;
justify-content: space-around; /* Horizontal alignment */
}
article {
display: flex;
flex-direction: column;
align-items: center; /* Horizontal alignment */
}
<div class="row">
<article>
<div class="image"><img src="https://via.placeholder.com/100x100"></div>
<h2>Header text</h2>
<p>Detail text</p>
</article>
<article>
<div class="image"><img src="https://via.placeholder.com/100x100"></div>
<h2>Header text</h2>
<p>Detail text</p>
</article>
<article>
<div class="image"><img src="https://via.placeholder.com/100x100"></div>
<h2>Header text</h2>
<p>Detail text</p>
</article>
</div>