Il parait que les tableaux c'est *mal*

56 réponses
Avatar
fra
Bonjour

Il parait que les tableaux c'est *mal* (c) depuis html5.

Quelqu'un pourrait-il me dire par quoi remplacer ce code pour que ça
donne la même chose (une div scrollable à l'horizontal et qui ne déborde
pas de la page) :

-----
<div id="real" align="center" style="overflow:auto;">
<table border="0" cellpadding="2" cellspacing="0" width="223%">
<tbody>
<tr>
<td valign="top"><img src="img_3979-2.jpg"
alt="" align="left" hspace="0" vspace="0"
width="100%"> </td>
<td valign="top"><img src="img_3980-2.jpg"
alt="" align="left" hspace="0" vspace="0"
width="100%"></td>
<td valign="top"><img src="photo-0016-2.jpg"
alt="" align="left" hspace="0" vspace="0"
width="100%"> </td>
<td valign="top"><img src="img_3982-2.jpg"
alt="" align="left" hspace="0" vspace="0"
width="100%"></td>
<td valign="top"><img src="img_3981-2.jpg"
alt="" align="left" hspace="0" vspace="0"
width="100%"> </td>
<td valign="top"><img src="img_3961-2.jpg"
alt="" align="left" hspace="0" vspace="0"
width="100%"></td>
</tr>
</tbody>
</table>
</div>
-----

Si en plus ça pouvait être automatiquement à 100% de la hauteur de la
fenêtre ça serait idéal.

Merci d'avance.
--
Fra

10 réponses

1 2 3 4 5
Avatar
Photo
Le 20/02/2015 19:40, Fra a écrit :
Bonjour

Il parait que les tableaux c'est *mal* (c) depuis html5.

Quelqu'un pourrait-il me dire par quoi remplacer ce code pour que ça
donne la même chose (une div scrollable à l'horizontal et qui ne déborde
pas de la page) :

-----
<div id="real" align="center" style="overflow:auto;">
<table border="0" cellpadding="2" cellspacing="0" width="223%">
<tbody>
<tr>
<td valign="top"><img src="img_3979-2.jpg"
alt="" align="left" hspace="0" vspace="0"
width="100%"> </td>
<td valign="top"><img src="img_3980-2.jpg"
alt="" align="left" hspace="0" vspace="0"
width="100%"></td>
<td valign="top"><img src="photo-0016-2.jpg"
alt="" align="left" hspace="0" vspace="0"
width="100%"> </td>
<td valign="top"><img src="img_3982-2.jpg"
alt="" align="left" hspace="0" vspace="0"
width="100%"></td>
<td valign="top"><img src="img_3981-2.jpg"
alt="" align="left" hspace="0" vspace="0"
width="100%"> </td>
<td valign="top"><img src="img_3961-2.jpg"
alt="" align="left" hspace="0" vspace="0"
width="100%"></td>
</tr>
</tbody>
</table>
</div>
-----

Si en plus ça pouvait être automatiquement à 100% de la hauteur de la
fenêtre ça serait idéal.

Merci d'avance.




A mon avis des simples <div> devraient suffire pour un simple empilement
d'images, non ?

Et pourquoi pas un UL, LI pour faire plus pro...

Les tables sont réservées maintenant aux tableaux purs et durs mais j'ai
eu du mal à m'en séparer de mes bonnes vieilles tables ;-)

--
http://grenault.net/accueil.htm
Avatar
fra
Photo wrote:

A mon avis des simples <div> devraient suffire pour un simple empilement
d'images, non ?

Et pourquoi pas un UL, LI pour faire plus pro...



Les essais que j'ai pu faire n'ont jamais donné le même résultat. Soit
ça débordait avec un ascenceur en bas (au lieu de sur la div), soit ça
n'avait pas la bonne taille (images trop petite pour finir par tenir
toutes dans la largeur, ou alors à 100% de leur hauteur ce qui est trop
sur les téléphones).
Tu aurais une trame ?
--
Fra
Avatar
SAM
Le 20/02/15 19:40, Fra a écrit :
Bonjour

Il parait que les tableaux c'est *mal* (c) depuis html5.



c'est "mal" depuis HTML.4 !!! (et même 3 ?)

D'abord parce que les tables c'est très lourd à maintenir
ensuite ça fatigue pas mal les navigateurs (surtout l'autre là !)

Mais et surtout à cause de l'accessibilité, le fonctionnement de lecture
des tables par les brouteurs vocaliseurs est complétement ignoré du
monde "normal", et c'est assez hard de se dépatouiller de ces
vocalisateurs !!
Avant (et aussi au final) toute "mise en page" ou "mise en forme" il
faut s'assurer que sans aucune FdS ni JS l'affichage est clair et
parfaitement organisé, contrôler que dans les tables colonnes et rangées
ne sont pas farfelues du type : un titre en C1R1 et son § en C2R2 et une
image en C12R1 (javais une vidéo ou sono exemple de lecteur buttant sur
des cellules)


Accessibilté des tableaux en 4 points :
<http://www.vd.ch/guide-typo3/les-tableaux/creer-des-tables-de-donnees/accessibilite/>

<http://www.braillenet.org/>
<http://www.etre.com/tools/accessibilitycheck/>

Quelqu'un pourrait-il me dire par quoi remplacer ce code pour que ça
donne la même chose (une div scrollable à l'horizontal et qui ne déborde
pas de la page) :

-----
<div id="real" align="center" style="overflow:auto;">



<p style="display:inline">
et là on met les images en les collant (sans espace entre elles) sans
autre forme de procès
</p>
</div>




Pourquoi les insérer dans un table ?

Si en plus ça pouvait être automatiquement à 100% de la hauteur de la
fenêtre ça serait idéal.



N'importe quoi !

J'ai un NetBook de 600px de haut et un iMac de 1440px de haut
Comment comptes-tu accorder les 2 ?

laisse-moi(laisse-nous) mettre les images à la taille que je veux (nous
voulons), déjà qu'elles sont forcées en pleine largeur !



Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Avatar
SAM
Le 20/02/15 20:19, Photo a écrit :
Le 20/02/2015 19:40, Fra a écrit :
Bonjour

Il parait que les tableaux c'est *mal* (c) depuis html5.

Quelqu'un pourrait-il me dire par quoi remplacer ce code pour que ça
donne la même chose (une div scrollable à l'horizontal et qui ne déborde
pas de la page) :



A mon avis des simples <div> devraient suffire pour un simple empilement
d'images, non ?



M'enfin !
C'est quoi cette manie de rajouter de l'inutile ???

Les images ça se pose là en vrac et elles s'organisent toutes seules,
elles sont naturellement de type "en ligne" et se rangent côte à côte
sur la ligne tant qu'il y a de la place sur cette ligne.

Y a rien de lus simple !

Et pourquoi pas un UL, LI pour faire plus pro...



et allons-y !!

non sens !!!
ce n'est pas une liste !!!


Les tables sont réservées maintenant aux tableaux purs et durs mais j'ai
eu du mal à m'en séparer de mes bonnes vieilles tables ;-)



Pourtant ... depuis les années 2000 qu'on le dit !!!



Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Avatar
SAM
Le 20/02/15 23:20, SAM a écrit :

Les images ça se pose là en vrac et elles s'organisent toutes seules,



démo :
<http://stephane.moriaux.pagesperso-orange.fr/truc/pass-horizontal>



Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Avatar
fra
SAM wrote:

tant qu'il y a de la place sur cette ligne.



C'est bien ça le problème. Moi je veux un seul bandeau d'image qu'on
fait scroller à l'horizontale mais avec l'ascenseur sur le bloc pour pas
que toute la page scrolle à droite. (d'où le overflow)
--
Fra
Avatar
fra
SAM wrote:

<http://stephane.moriaux.pagesperso-orange.fr/truc/pass-horizontal>



C'est pas mal, ça si ce n'est que mes images sont verticales (j'ai
oublié de le préciser) et donc je ne les veux pas à 100 % de la largeur
de la page sinon elles dépassent en hauteur ! Je souhaites que leur
nombre visible (pas forcément entier) s'adapte selon la largeur et que
la hauteur ne dépasse jamais 100 % de la fenêtre.
--
Fra
Avatar
fra
SAM wrote:

<p style="display:inline">
et là on met les images en les collant (sans espace entre elles) sans
autre forme de procès
</p>



et si ça dépasse la largeur de la fenêtre il se passe quoi ? (moi je
veux un seul bandeau avec sa scollbar).
--
Fra
Avatar
Paul Gaborit
À (at) Sat, 21 Feb 2015 12:52:25 +0100,
(Fra) écrivait (wrote):

SAM wrote:

tant qu'il y a de la place sur cette ligne.



C'est bien ça le problème. Moi je veux un seul bandeau d'image qu'on
fait scroller à l'horizontale mais avec l'ascenseur sur le bloc pour pas
que toute la page scrolle à droite. (d'où le overflow)



Il suffit de placer toutes les images les unes à la suite des autres
dans un div de class 'bandeau' avec :

.bandeau {
white-space: nowrap;
width: 100%;
overflow-x: auto;
}

.bandeau img {
height: 100%;
}

--
Paul Gaborit - <http://perso.mines-albi.fr/~gaborit/>
Avatar
SAM
Le 21/02/15 12:52, Fra a écrit :
SAM wrote:

<http://stephane.moriaux.pagesperso-orange.fr/truc/pass-horizontal>



C'est pas mal, ça si ce n'est que mes images sont verticales (j'ai
oublié de le préciser) et donc je ne les veux pas à 100 % de la largeur
de la page sinon elles dépassent en hauteur ! Je souhaites que leur
nombre visible (pas forcément entier) s'adapte selon la largeur et que
la hauteur ne dépasse jamais 100 % de la fenêtre.



J'ai rien compris !

Je t'ai donné le modèle/canevas
yapuka ...

surtout qu'en plus le prémâché qui pourrait convenir est déjà proposé en
variante à l'url ci-dessus !

Le truc est de régler le "viewer", le reste s'y adapte automatiquement
moyennant affinement de réglages suivant le nombre de vues


Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
1 2 3 4 5