Display database content in 3 blocks - php

Question

I am using a table to display information from my database but I'm having trouble formatting the CSS. Right now I have 12 icons and the respective name on the right and the problem is that everything is displayed like a list, one below the other and I wanted to break the list in three blocks, like this:
EDIT I don't need necessarily to do it with tables, I just need to display the values like this, dynamically. Because later I'd probably going to add more plants to database and I want them to be always listed like this.
This is my html:
<table id="plantslist">
<?php
foreach($resultado as $planta){ ?>
<tr>
<td><img src="http://www.coisas.pt/coisas/backoffice/<?php echo $planta['icon']; ?>"></img></td>
<td><a href="blabla.php?name=<?php echo $planta['name']?>&img=<?php echo $planta['img']?>&tagline=<?php echo $planta['tagline']?>&hum=<?php echo $planta['hum']?>&lum=<?php echo $planta['lum']?>&temp=<?php echo $planta['temp']?>&seed=<?php echo $planta['seed']?>&spacing=<?php echo $planta['spacing']?>&info1=<?php echo $planta['info1']?>&info2=<?php echo $planta['info2']?>&info3=<?php echo $planta['info3']?>&info4=<?php echo $planta['info4']?>">
<?php echo $planta['name'];?></a></td>
</tr>
<?php } ?>
</table>
CSS:
#plantslist {
border: 3px solid white;
overflow: scroll;
font-size: 1.7vw;
line-height: 2.8vw;
font-family: Robotomedium;
margin-top: 11%;
text-align: left;
}
#plantslist img {width: 2.3vw;}
#plantslist tr td {
display: inline-block;
vertical-align: top;
}

Answer 1

You can do a container with width: 100%; then make child elements with width: 33% each one. To make them place one next to other you can use float: left;. Here is an example.
.table {
width: 100%;
float: left;
}
.table > .items {
width: 33%;
float: left;
}
.table > .items:before {
content: "";
display: block;
background: url(http://placehold.it/20/000) no-repeat;
width: 20px;
height: 20px;
float: left;
margin: 0 6px 0 0;
}
<div class="table">
<div class="items">1</div>
<div class="items">2</div>
<div class="items">3</div>
<div class="items">4</div>
<div class="items">5</div>
<div class="items">6</div>
<div class="items">7</div>
<div class="items">8</div>
<div class="items">9</div>
</div>
Look that your icon it's placed with before pseudo element. You should change background value with the correct url.
EDIT
Use this if you have different images per plant.
.table {
width: 100%;
float: left;
}
.table > .items {
width: 33%;
float: left;
}
.table > .items img {
width: 20px;
height: 20px;
margin: 0 10px 0 0;
float: left;
}
<div class="table">
<div class="items">
<img src="http://placehold.it/20/dfa9a9" alt=""> 1
</div>
<div class="items">
<img src="http://placehold.it/20/dfa9de" alt=""> 2
</div>
<div class="items">
<img src="http://placehold.it/20/b1a9df" alt=""> 3
</div>
<div class="items">
<img src="http://placehold.it/20/a9cadf" alt=""> 4
</div>
<div class="items">
<img src="http://placehold.it/20/dfd8a9" alt=""> 5
</div>
<div class="items">
<img src="http://placehold.it/20/5cff46" alt=""> 6
</div>
<div class="items">
<img src="http://placehold.it/20/dfa9a9" alt=""> 7
</div>
<div class="items">
<img src="http://placehold.it/20/a9cadf" alt=""> 8
</div>
<div class="items">
<img src="http://placehold.it/20/a9cadf" alt=""> 9
</div>
</div>
Using your PHP code
HTML | PHP
<div class="table">
<?php
foreach($resultado as $planta){
?>
<div class="items">
<img src="http://www.growbox.pt/growbox/backoffice/<?php echo $planta['icon']; ?>" alt="<?php echo $planta['name'];?>">
<a href="intips.php?name=<?php echo $planta['name']?>&img=<?php echo $planta['img']?>&tagline=<?php echo $planta['tagline']?>&hum=<?php echo $planta['hum']?>&lum=<?php echo $planta['lum']?>&temp=<?php echo $planta['temp']?>&seed=<?php echo $planta['seed']?>&spacing=<?php echo $planta['spacing']?>&info1=<?php echo $planta['info1']?>&info2=<?php echo $planta['info2']?>&info3=<?php echo $planta['info3']?>&info4=<?php echo $planta['info4']?>"><?php echo $planta['name'];?>
</a>
</div>
<?php
}
?>
</div>
CSS
.table {
width: 100%;
float: left;
}
.table > .items {
width: 33%;
float: left;
}
.table > .items img {
width: 20px;
height: 20px;
margin: 0 10px 0 0;
float: left;
}

Answer 2

See if this works. I'm just creating more elements so that you have 3 sets of tds per row. Ideally, though, I wouldn't do this with tables. I'd do something like arglab suggested with divs, but here I'm just showing you how I'd do it with tables since that was your question. Make your divs inline blocks with width 33% and you should be good. You may also need to do box-sizing: border-box so that way any padding and margins get automatically put into the calculation for you.
<table id="plantslist">
<?php $count = 0; ?>
<tr>
<?php foreach($resultado as $planta) {
if (count === 2) {
count = 0; ?>
<td><img src="http://www.growbox.pt/growbox/backoffice/<?php echo $planta['icon']; ?>"></img></td>
<td><a href="intips.php?name=<?php echo $planta['name']?>&img=<?php echo $planta['img']?>&tagline=<?php echo $planta['tagline']?>&hum=<?php echo $planta['hum']?>&lum=<?php echo $planta['lum']?>&temp=<?php echo $planta['temp']?>&seed=<?php echo $planta['seed']?>&spacing=<?php echo $planta['spacing']?>&info1=<?php echo $planta['info1']?>&info2=<?php echo $planta['info2']?>&info3=<?php echo $planta['info3']?>&info4=<?php echo $planta['info4']?>">
<?php echo $planta['name'];?></a></td>
</tr>
<tr>
<?php }
else {
$count += 1;
// If this doesn't work, try $count = $count + 1;
<td><img src="http://www.growbox.pt/growbox/backoffice/<?php echo $planta['icon']; ?>"></img></td>
<td><a href="intips.php?name=<?php echo $planta['name']?>&img=<?php echo $planta['img']?>&tagline=<?php echo $planta['tagline']?>&hum=<?php echo $planta['hum']?>&lum=<?php echo $planta['lum']?>&temp=<?php echo $planta['temp']?>&seed=<?php echo $planta['seed']?>&spacing=<?php echo $planta['spacing']?>&info1=<?php echo $planta['info1']?>&info2=<?php echo $planta['info2']?>&info3=<?php echo $planta['info3']?>&info4=<?php echo $planta['info4']?>">
}
?>
</table>
SOLUTION WITH DIVS: See if this works...
<div id="plantslist">
<?php foreach($resultado as $planta) { ?>
<div class="plant">
<img src="http://www.growbox.pt/growbox/backoffice/<?php echo $planta['icon']; ?>"></img>
<a href="intips.php?name=<?php echo $planta['name']?>&img=<?php echo $planta['img']?>&tagline=<?php echo $planta['tagline']?>&hum=<?php echo $planta['hum']?>&lum=<?php echo $planta['lum']?>&temp=<?php echo $planta['temp']?>&seed=<?php echo $planta['seed']?>&spacing=<?php echo $planta['spacing']?>&info1=<?php echo $planta['info1']?>&info2=<?php echo $planta['info2']?>&info3=<?php echo $planta['info3']?>&info4=<?php echo $planta['info4']?>">
<?php echo $planta['name'];?></a>
</div>
<?php } ?>
</div>
CSS
#planstslist{
width: 100%;
/* this may help if the items don't stack properly */
white-space: nowrap;
}
.plant{
width: 33.33%
display: inline-block;
/* this may help if the items don't stack properly */
white-space: normal;
}
You may need to make the images inline blocks and set them and the links to have percentage width values adding up to no more than 100%. You may also need to add box-sizing: border-box; to the "plant" divs. I usually get in the habit of making the following declaration on all my CSS files: * {box-sizing: border-box};

Answer 3

I think it's enough if you simply erase display: inline-block; from this CSS rule;
#plantslist tr td {
display: inline-block;
vertical-align: top;
}
displayshould be table-cell, not inline-block, which is the default anyway in a <td> element. Also vertical-align: top; wouldn't be necessary, so you might as well erase the whole rule...