HTML Customize table - php

Question

I have been looking into table for a while, and I am thinking about creating something. The data will be stored in a database (profile image, name, description, date and thumbs up).
I am trying to create something like this: https://i.ibb.co/k2LM4ch/Untitled.png So each row from the database table has it's own card view(or list view, not sure what its named).
Can someone help to me the right path here, as I have no idea how I get do this, is even table the correct way?

Answer 1

This is a simple example with information you have provide:
$query=$mysqli->prepare('select * from table');
$query->execute();
$result=$query->get_result();
echo '<table>';
while($res=$result->fetch_array()){
$name=$res['name'];
$thumb=$res['thumbsup'];
echo "<tr><td><img src='$thumb'>$name <br> Hello <br> <button>test</button></td></tr>"
}
echo '</table>'
of course you will have to change the code according to your needs.
So for example how #Ludovit Mydla said use flex/grid for the two column

Answer 2

Right so your first question: should i use a table to make a card? No! absolutely not!
What you want to do first though is create a simple html page layout with your card design I tend to use Codepen for finding out card designs since the community is nice and you can use there designs if you follow the terms and agreement and credit people for there amazing work! Write this up in a php file
After youve created your page layout you'll need to create a registration form: the registration form will allow the person to fill out the information fields of profile image, name, description etc w3schools has a basic tutorial on that
You'll Then need to create a database which will then store the information from your w3schools form, and you'll be able to pull that information back into the fields your cards need in your simple html page layout design with MySQL code
If your coding skills are not the best! that is all good you might prefer to watch this
tutorial to get you started before trying to do the above 3 tasks! This youtube series should help you learn before trying something a little more complex

Answer 3

This answer takes care only of HTML + CSS part of the question and it's very simplistic. More styling will be needed probably. See other answers for SQL/PHP solutions. You can design the "card" in many ways (positioning, float, flex or grid layout) The example given is done with flex (just personal preference at the moment):
.card {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
align-items: flex-start;
border: 1px solid black;
}
.card_img {
flex: 0 1 100px;
padding: 5px;
}
.card_content {
flex: 1 0 70%;
}
.card_content > h3 {
margin: 0;
font-size: 1.5rem;
font-weight: bold;
}
.card_content > footer {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
}
<div class="card">
<div class="card_img"><img src="https://picsum.photos/100/100"></div>
<div class="card_content">
<h3>Joe Schmoe</h3>
<p>Lorem ipsum dolor sit amet ... </p>
<footer>
<button>Button</button>
<span>some text here</span>
</footer>
</div>
</div>