Comment mettre des images sur une table 3 par 3?

Question

J'utilise php/mysql, et ai une table de base de données avec l'URL d'image. Je voudrais savoir comment puis-je les mettre sur une page php avec une table 3 x 3, de sorte que chaque td affichera une image différente basée sur l'image de la base de données?

Je veux créer quelque chose comme ça, où les alphabets sont les images:

|a|b|c| 
|d|e|f| 
|g|h|i| 

Jusqu'à présent, je ne suis en mesure d'utiliser le faire tout pour créer quelque chose comme ceci:

|a| | | 
|b| | | 
|c| | | 

Merci.

Answer 1

Ce serait l'approche générale:

$query = "SELECT url FROM images LIMIT 9"; 
$resource = mysql_query($query); 

# Get the number of images 
$count = mysql_num_rows($resource); 

$i = 0; 
$per_row = 3; 

# Start outputting the table 
echo '<table><tr>'; 
while($row = mysql_fetch_assoc($resource)) { 
    # The image cell 
    echo '<td><img src="'.$row['url'].'" /></td>'; 
    # If three cells have been printed, and we're not at the last image 
    if(++$i % $per_row == 0 && $i > 0 && $i < $count) { 
     # Close the row 
     echo '</tr><tr>'; 
    } 
} 

# If the last row isn't 'full', fill it with empty cells 
for($x = 0; $x < $per_row - $i % $per_row; $x++) { 
    echo '<td></td>'; 
} 
echo '</tr></table>'; 

C'est, boucle juste les résultats normalement mais sur chaque troisième élément, écho d'un changement de ligne (</tr><tr>). Assurez-vous que vous n'imprimez pas les changements de ligne supplémentaires au début ou à la fin, d'où les conditions supplémentaires.

Le tableau résultant devrait être quelque chose comme ceci (les sauts de ligne ajoutée):

<table> 
    <tr> 
     <td><img src="image.jpg1" /></td> 
     <td><img src="image.jpg2" /></td> 
     <td><img src="image.jpg3" /></td> 
    </tr> 
    <tr> 
     <td><img src="image.jpg4" /></td> 
     <td><img src="image.jpg5" /></td> 
     <td><img src="image.jpg6" /></td> 
    </tr> 
    <tr> 
     <td><img src="image.jpg7" /></td> 
     <td><img src="image.jpg8" /></td> 
     <td><img src="image.jpg9" /></td> 
    </tr> 
</table> 

Answer 2

Utilisez un compteur pour garder une trace de combien d'images que vous avez déjà affiché, et seulement émettre </tr><tr> toutes les 3 images. Indice: $count % 3

Answer 3

Vous n'avez pas vraiment besoin de faire cela avec des tables (pensez-y, vous essayez simplement d'afficher quelque chose dans une grille, vous n'essayez pas vraiment de créer une table de choses).

Avec un peu de CSS, vous pouvez le faire comme ça (vous pouvez utiliser les éléments HTML5 appropriés si vous utilisez html5-Shiv pour MSIE):

<div class="figure"> 
<img src="mypic.jpg" alt=""> 
<div class="description">Description goes here</div> 
</div> 

et CSS:

.figure { 
float: left; 
margin-right: 10px; /* for space between the columns */ 
padding: 5px; 
border: 1px solid #000; 
background-color: #fff; 
color: #000; 
} 
.figure .description { 
margin-top: 1em; 
font-variant: italic; 
} 

Si elles sont toutes de la même taille et que vous voulez les forcer dans une grille NxN, vous pouvez les placer dans un div (class = "grid") quelque chose comme ça (grille 3x3, largeur interne 100px (soit 90px)):

.grid { 
padding-left: 10px; /* to mirror the right margin of the last .figure in the row */ 
width: 350px; /* 3*100px + 2*10px margin + 3*2*5px padding */ 
} 
.figure img { 
width: 90px; 
} 

De cette façon, vous pouvez simplement sortir les images en séquence dans une boucle sans avoir à vous soucier de l'endroit où emballer les lignes (l'habillage est géré par CSS; Si vous ne forcez pas la grille à avoir une largeur maximale, elle s'emboîte à l'extrémité droite de la fenêtre du navigateur).