AB- une galerie n'est pas un tableau.
- le nombre de lignes et de colonnes n'a rien de fixe

Je me dois de te contredire quelque peu :
Il convient peut-être de formuler un peu différemment : on met dans un tableau des données "tabulaires", il faut entendre par là tout ou partie de données issues de listes de données structurées, par exemple venant d'une base de données ou d'un fichier du style CSV. Le nombre de ligne ne peut en général pas être fixe puisque les données elles-même peuvent changer, être plus ou moins nombreuses selon le moment. Quant au nombre de colonnes, elle ne peut varier que si on compare une liste d'une sorte de données à une autre liste d'une autre sorte de données. Prenons l'exemple de la galerie : nous avons une image, assortie de données textes, le tout extrait d'une base de données. Même si dans la base certaines colonnes ne contiennent pas obligatoirement de données pour certaines lignes, le nombre de colonnes dans les tables ne varie pas pour autant. On a affaire à des données tabulaires. C'est dans ce sens que l'utilisation de la balise <table> se justifie parfaitement.

Je crois qu'il faut replacer l'utilisation des tables dans son contexte : les tables ne sont pas faites pour faire de la mise en page mais pour structurer des données. On ne disposera donc pas les différents éléments d'une page web dans des tables. Par contre, certains éléments de cette même page peuvent devoir être disposées en lignes et en colonnes auquel cas il est au plan de la sémantique tout à fait valable d'utiliser des tables.

...La sémantique d'un document concerne donc ce qui relève plutôt de la qualification fonctionnelle de son contenu, par opposition à sa forme organique. Elle s'intéresse au type de données d'un objet, à son utilité, à ce qu'il contient, etc.
Sur le Web et en HTML aussi, chaque élément est porteur de sens. il convient d'employer chaque balise à bon escient et non selon son rendu visuel par défaut.

Et au plan de l'accessibilité, l'internaute utilisant un navigateur alternatif pour non voyant par exemple comprendra beaucoup plus rapidement qu'il a affaire à une liste en parcourant un tableau bien utilisé qu'en suivant une succession de blocs <div>.

une petite remarque un peu HS (mais pas trop hein :p )
Ce serait bien que lorsque l'on a des problème de mise en page css, si on en a la possibilitée, de mettre une page en ligne, comme ça c'est plus facile pour nous avec la barre d'outil webdevelloper ou sous opéra je sais plus quel outil... on a juste à éditer le css et les réponses aux problèmes viendront d'autant plus vite je pense...
(surtout que là j'avais pas d'images 100/75 ou 75/100 sous la main ... :p)
enfin bref, si ça vous dis d'essayer de s'y tenir pour les prochaines fois je pense que ça sera profitable à tout le monde

Remarque fort pertinente, jojolapine.

Cependant, pour ma défense, et dans ce cas particulier, je répondrai :

on a juste à éditer le css et les réponses aux problèmes viendront d'autant plus vite je pense...

J'ai fourni tout le CSS et le code nécessaires pour la correction de ce bug.

surtout que là j'avais pas d'images 100/75 ou 75/100 sous la main ... :p)

• %SystemRoot%\System32\mspaint.exe
• Images\Attributs
• Largeur : 100 pixels
• Hauteur : 75 pixels
• Fichier\Enregistrer : "h.gif"
• Images\Retourner-Faire pivoter
• Faire pivoter d'un angle de 90°
• Fichier\Enregistrer : "v.gif"

28 secondes chrono !

La mauvaise foi n'est pas nécessairement exclue dans ce message...

* %SystemRoot%\System32\mspaint.exe
* Images\Attributs
* Largeur : 100 pixels
* Hauteur : 75 pixels
* Fichier\Enregistrer : "h.gif"
* Images\Retourner-Faire pivoter
* Faire pivoter d'un angle de 90°
* Fichier\Enregistrer : "v.gif"

Encore de la discrimination,
Moi j'ai pas ce truc %Sys...., c'est comment sous Linux ???
La grève !!!!

La grève !!!!

y en a un qui a beaucoup de chose à redire il me semble
(-> http://www.phpfrance.com/forums/voir_re ... php#168814)

Bon, pour les bosseurs qui ne confondent pas
"trève des confiseurs" et "grève des contributeurs", je continue...

Fianlement, j'avais bien regardé du côté d'Alsacréations
puisque mon code utilisait la même astuce que celle préconisée.

Cependant, le centrage ne pouvait se faire avec le margin:auto
car les dimensions de l'objet à centrer étaient inconnues.

Cependant, en précisant les dimensions, c'est-à-dire en créant 2 classes
(l'une pour les photos en portrait ou "verticales"
et l'autre pour les photos en paysage ou "horizontales),
ça marche toujours pas.

Voici le code actuel :

img        { border:none ; }
.h         { width:100px ; height:75px ; margin:auto ; }
.v         { width:75px ; height:100px ; margin:auto ; }
.miniature { float:left ; width:100px ; height:100px ; margin:10px ; background-color:#FFCCCC ; }

// ...

<div class="miniature"><img src="img_v.png" class="v" alt="" /></div>
<div class="miniature"><img src="img_h.png" class="h" alt="" /></div>

Pour jojolapine et ajoloca, je fournis également les images de test :

Hubert

Merci de cette réponse constructive.
Je n'avais pas envisagé ce cas de figure car pour ma part, je préfère garder le contrôle de la mise en page surtout pour des éléments graphiques.

Zeus

Dans ma base de donnée, la même colonne de chaque ligne représente bien l'adresse d'une image.

albat

Ok tu ne veux pas avoir un nombre de lignes et de colonnes fixes.

Enfin j'ai du heurter un peu ta sensibilité, car sinon tu aurais certainement essayé le lien dans mon message qui renvoie exactement au même endroit que le dernier de mere-teresa

Cyrano

Merci de tes précisions. Je ne me voyais pas entreprendre une réponse aussi clair et détaillée que la tienne

Ok tu ne veux pas avoir un nombre de lignes et de colonnes fixes.

En effet
et je souhaite que l'affichage de la liste s'adapte automatiquement à la dimension de la fenêtre du client.

En outre, comme l'indique Cyrano, l'utilisation de tableaux
- dans ce cas précis - n'est pas une aberration, sémantiquement parlant
et bien que l'idéal théorique serait peut-être d'utiliser une liste <ul>,
l'intérêt d'une liste pour afficher une série de miniatures ne me convainc pas.
Je conserve donc mes div flottants...

Enfin j'ai du heurter un peu ta sensibilité,
car sinon tu aurais certainement essayé le lien dans mon message
qui renvoie exactement au même endroit que le dernier de mere-teresa

Non, non. Pas de méprise.
Tu n'as pas heurté ma sensibilité (au contraire, je te remercie d'avoir répondu)
et j'ai bien cliqué sur le lien que tu m'as indiqué.
Je t'ai simplement omis dans ma réponse collective.
Mea culpa.

Pour jojolapine et ajoloca, je fournis également les images de test

gnagna
Bon sinon, en tatonant, j'ai fait ceci:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
		<title>essai</title>
		<style type="text/css" media="screen"><!--
/* <![CDATA[ */	

img { 
    margin: 0px; 
    padding: 0px; 
    border:none ; 
}
.h { 
    width:100px ; 
    height:75px ;     
    padding-top: 50%;
    margin-top: -56px;
}
.v { 
    width:75px ;
    height:100px ;
}
.miniature { 
    padding: 0px;
    text-align: center;
    margin:  10px;
    float: left;
    width: 100px;
    height: 100px;
    background-color:#000 ;
}
 /* ]]> */	
--></style>

</script>
</head>
<body>
<div class="miniature">&nbsp;<img src="img_v.png" class="v" alt="" />&nbsp;</div>
<div class="miniature">&nbsp;<img src="img_h.png" class="h" alt="" />&nbsp;</div> 
</body>
</html>

qui fonctionne sur firefox et ie7, (j'ai pas ie6), par contre j'arrive pas à trouver d'où viens le - 56px, je l'ai trouvé en tatonnant, mais par le calcul, je trouve pas ...

[...] l'internaute utilisant un navigateur alternatif pour non voyant par exemple comprendra beaucoup plus rapidement qu'il a affaire à une liste en parcourant un tableau [...]

Galerie d'image accessible aux non-voyants.

À part ça, comment vous faites pour savoir si une image est horizontale ou verticale ? parce que si on peut utiliser PHP alors t'as qu'à mettre les margin-top en dur et arrêter de t'embêter

C'est exactement ce que je viens de faire.

Comme ça (cf. ci-dessous), ça marche :

img        { border:none ; }
.miniature { float:left ; width:100px ; height:100px ; margin:10px ; background-color:#FFFF00 ; }
.h         { width:100px ; height:75px ; margin:12px 0 13px 0 ; }
.v         { width:75px ; height:100px ; margin:0 13px 0 12px ; }

mais j'aimerais un centrage automatique
car je me vois mal indiquer dans la base
pour toutes les photos lesquelles sont H et lesquelles sont V...

Y en a un paquet...

ou alors, un test en PHP pour trouver les dimensions de chaque image ?...
Some ideas ?...

je suis pas sûr de bien comprendre ...
tu ne sais pas si tes images doivent avoir la classe h ou v ?
je vois plus trop oèu on en est ... tu as essayer mon bout de code, il fonctionne sous ie6 ?
qu'est-ce qui reste à faire ?

L'utilisation d'un tableau pour une galerie d'image prend un sens sémantique si tu as une colonne qui contient les images et une colonne la description (par exemple)

Mais utiliser un tableau pour présenter une liste de 7*3 images n'a aucun sens sémantique. Du moins pour moi

[...] l'internaute utilisant un navigateur alternatif pour non voyant par exemple comprendra beaucoup plus rapidement qu'il a affaire à une liste en parcourant un tableau [...]

Galerie d'image accessible aux non-voyants.

Pourquoi pas : si le code est proprement fait, chaque image est assortie d'un texte alternatif. Le non-voyant n'est pas obligatoirement au courant de ce qu'il y a dans la page derrière tel ou tel lien et donc peut ignorer qu'il s'agit essentiellement d'une galerie d'images.

Supposons également que ce soit par exemple un site d'offres immobilières : il y aura des descriptions parfois accompagnées d'illustrations : le non voyant n'aura cure des images, mais il voudra avoir les descriptions et donc aura besoin d'accéder à cette page. CQFD

mais j'aimerais un centrage automatique
car je me vois mal indiquer dans la base
pour toutes les photos lesquelles sont H et lesquelles sont V...
Y en a un paquet...

ou alors, un test en PHP pour trouver les dimensions de chaque image ?...

La fonction getimagesize() m'a ouvert de nouveaux horizons.

Au final, ça marche, mais grâce au secours du PHP.
Le CSS, lui, n'a pas tenu ses promesses...