Inês Silva Inês Silva - 6 months ago 11
HTML Question

display database content in 3 blocks

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:

Image of desired outcome

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

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;
}