18010 sujets

Questions générales et questions de débutants

[RESOLU] Première colonne d'un tableau de largeur anormale

Les mystéres d'un tableau
mon html est

<TABLE BORDER class='lecentre'>
<TR><TH> . </TH><TH>T 1</TH><TH>T 2</TH><TH>T 3</TH><TH>T 4</TH><TH> Total </TH></TR>
<TR><TD ROWSPAN=2><img width=30% src='smala/alice.jpg' alt='  Smala ' /></TD><TD>o</TD><TD>o</TD><TD>o</TD><TD>o</TD><TD>o</TD></TR>
<TR><TD COLSPAN=5>concurrente 1 Alice xxxx 16 ans</TD></TR>
<TR><TD ROWSPAN=2><img width=30% src='smala/anthony.jpg' alt='  Smala ' /></TD><TD>o</TD><TD>o</TD><TD>o</TD><TD>o</TD><TD>o</TD></TR>
<TR><TD COLSPAN=5> concurrent 2 Anthony xxx 11 ans 1/2</TD></TR>
<TR><TD ROWSPAN=2><img width=30% src='smala/claire.jpg' alt='  Smala ' /></TD><TD>o</TD><TD>o</TD><TD>o</TD><TD>o</TD><TD>o</TD></TR>
<TR><TD COLSPAN=5>concurrente 3 Claire xxxx 42 ans</TD></TR>
</TABLE>

le css est (seul élément concernant les tables dans tout le css)

table.lecentre {
margin-left:auto;
margin-right:auto;
width:90%;
}


et le résultat est ???

http://www.fox-infographie.com/forum/test.jpg
pourquoi tant deplace pour la premiére colone ????

Merci d'avance
Modifié par Christele (06 Sep 2014 - 17:29)
Bonjour et mercis de ta réponse !
rédactrice sur "developpez.net" je connais bien cet outil et j'ais alerté de nombreuses fois
l'interférence désastreuse de ces deux javascript sur le résultat, de plus le doctype s'en trouve modifié.
Tu notera que comme en AJAX, "afficher code source" et "inspecter l'élément" ne donne pas le même résultat !
Nous pouvons en parler longtemps mais tu peux en prenant deux minutes t'en apercevoir en copiant collant ce code et le sauver en html

<!DOCTYPE html>
<html lang="fr">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0">
<meta http-equiv="content-language" content="fr, en">
</head><body>
<style>
table.lecentre {
margin-left:auto;
margin-right:auto;
width:90%;
}
</style>
<TABLE BORDER class='lecentre'>
<TR><TH> . </TH><TH>T 1</TH><TH>T 2</TH><TH>T 3</TH><TH>T 4</TH><TH> Total </TH></TR>
<TR><TD ROWSPAN=2><img width=30% src='smala/alice.jpg' alt='  Smala ' /></TD><TD>o</TD><TD>o</TD><TD>o</TD><TD>o</TD><TD>o</TD></TR>
<TR><TD COLSPAN=5>concurrente 1 Alice xxxx 16 ans</TD></TR>
<TR><TD ROWSPAN=2><img width=30% src='smala/anthony.jpg' alt='  Smala ' /></TD><TD>o</TD><TD>o</TD><TD>o</TD><TD>o</TD><TD>o</TD></TR>
<TR><TD COLSPAN=5> concurrent 2 Anthony xxx 11 ans 1/2</TD></TR>
<TR><TD ROWSPAN=2><img width=30% src='smala/claire.jpg' alt='  Smala ' /></TD><TD>o</TD><TD>o</TD><TD>o</TD><TD>o</TD><TD>o</TD></TR>
<TR><TD COLSPAN=5>concurrente 3 Claire xxxx 42 ans</TD></TR>
</TABLE>
<br /></body></html>

Voila l'ami ,mais mille merci d'avoir pris ce temps pour moi Smiley cligne
Administrateur
Christele a écrit :
Voila l'ami ,mais mille merci d'avoir pris ce temps pour moi Smiley cligne

De rien Smiley smile
Du coup, c'est [ résolu ] en fait ?
Raphael a écrit :

De rien Smiley smile
Du coup, c'est [ résolu ] en fait ?

Tu plaisantes en fait ! Smiley decu
as-tu testé le html ? dans un html depuis ton micro ?
@Raph : en utilisant une vraie image, on retombe sur ce phénomène qui a très certainement une explication technique due aux tableau, mais qui m'échappe là tout de suite...
http://codepen.io/anon/pen/AGeIq

* Testé également en local.
Modifié par 6l20 (04 Sep 2014 - 11:57)
6l20 a écrit :
@Raph : en utilisant une vraie image, on retombe sur ce phénomène qui a très certainement une explication technique due aux tableau, mais qui m'échappe là tout de suite...
http://codepen.io/anon/pen/AGeIq
* Testé également en local.

Whaou, quelle découverte !!! mais oui ça progresse, et mets en évidence mon problème,
A vous deux, les habitués de la maison, Smiley smile vous me faites mille fois progresser !
J'ais foncé sur la remarque de 6/20, alors voila le drame ...
1) sans vrais image (mais la balise image ) ça va mieux !
2) avec des images 200*200 en supprimant la taille image également
3) poursuit ton test, mets des images 1000*500 et gardes 30% alors là surprise
l'image as bien la même taille mais tu retrouvera la disproportion agrandie !

Un dernier point, la taille sur les TD et TABLE est interdite en html5 ????
Modifié par Christele (04 Sep 2014 - 12:25)
Modérateur
Bonjour ici,


C'est marrant d’essayer de comprendre ces comportement tordu Smiley ravi

Il y a peu être un début d'explication ici : http://www.la-grange.net/w3c/html4.01/struct/tables.html#h-11.2.4.4
a écrit :
Cependant, si la table n'a pas une largeur fixe, les agents utilisateurs doivent attendre d'avoir reçu toutes les données de table avant de pouvoir déterminer l'espace horizontal requis par la table. Alors seulement cet espace sera alloué aux colonnes proportionnelles.

Si l'auteur ne spécifie aucune information de largeur pour une colonne, l'agent utilisateur peut se trouver dans l'incapacité de formater progressivement la table, puisqu'il doit attendre l'arrivée de la totalité des données de la colonne pour allouer une largeur adéquate.

S'il apparaît que les largeurs des colonnes soient trop étroites pour le contenu d'une cellule de table particulière, l'agent utilisateur peut choisir de rafraîchir la table.


J'ai également fait un test avec une seule ligne et pas d'image : http://jsfiddle.net/6xpv2yck/

Ce que je peux remarqué c'est que si je met "coucou" dans la premiere case il attribuera plus d'espace.

Ce que j'en comprend c'est qu'il répartit équitablement les largeurs entre les colonnes en fonction de son contenu. Autrement dit avec "o" dans chaque colonne, tout les contenu ont la même taille donc toute les colonnes se voietn attribuer la meme largeur et si la premiere a un contenu plus large comme l'image ou un texte plus long (ici "coucou") le tableau donnera plus d'importance à cette colonne.

En plus de ça ton image est à 30% de la largeur de la cellule qui elle même est calculée par rapport à la largeur de son contenu : l'image elle même Smiley biggol

Je chauffe ? Smiley murf
Modifié par _laurent (04 Sep 2014 - 13:42)
reprise du code test de 6|20 et ajout de la règle : table-layout:fixed; sur le dernier tableau.

Cette régle, à defaut de largeur données au th/td ou col, partage la largeur du tableau equitablement dans chaque cellules.

Ce width:30% est-il nécessaire dans les balises images (comme il n'y a pas de largeur donnée a la cellule ..)?
Modérateur
Ah il faut trouver une solution ou juste comprendre pourquoi ?
Sinon du met une width à 16% sur tout tes td Smiley lol
_laurent a écrit :
Ah il faut trouver une solution ou juste comprendre pourquoi ?
Sinon du met une width à 16% sur tout tes td Smiley lol

Bonjour,
Résoudre, il y a longtemps que c'est fait, je veux comprendre !
De plus si tu as tout lu, j'ais signalé que toutes tailles dans tout tableau est désormais proscrit en HTML5 Smiley decu mais personne n'a réagit!
Raphael a écrit :

De rien Smiley smile
Du coup, c'est [ résolu ] en fait ?

Alors voila presque !
Voici enfin un code qui marche parfaitement ! ce qui fait que je vais déclaré RESOLU , sauf que ton bel article "Responsive Web Design" je ne peut plus l'appliquer puisque la solution passait par l'abandon du width !!

<!DOCTYPE html>
<html lang="fr">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0">
<meta http-equiv="content-language" content="fr, en">
</head><body>

<style>
table.lecentre {
margin-left:auto;
margin-right:auto;
/* width:90%; */
border:1px solid black;
}
td {border:1px solid black;}
th, {border:1px solid black;}
</style>
<TABLE class='lecentre'>
<TR><TH> . </TH><TH>T 1</TH><TH>T 2</TH><TH>T 3</TH><TH>T 4</TH><TH> Total </TH></TR>
<TR><TD ROWSPAN=2><img width=300px src='smala/alice.jpg' alt='  Smala ' /></TD><TD>o</TD><TD>o</TD><TD>o</TD><TD>o</TD><TD>o</TD></TR>
<TR><TD COLSPAN=5>concurrente 1 Alice xxxx 16 ans</TD></TR>
<TR><TD ROWSPAN=2><img width=300px src='smala/anthony.jpg' alt='  Smala ' /></TD><TD>o</TD><TD>o</TD><TD>o</TD><TD>o</TD><TD>o</TD></TR>
<TR><TD COLSPAN=5> concurrent 2 Anthony xxx 11 ans 1/2</TD></TR>
<TR><TD ROWSPAN=2><img width=300px src='smala/claire.jpg' alt='  Smala ' /></TD><TD>o</TD><TD>o</TD><TD>o</TD><TD>o</TD><TD>o</TD></TR>
<TR><TD COLSPAN=5>concurrente 3 Claire xxxx 42 ans</TD></TR>
</TABLE>
<br /></body></html>

Donc je mets résolu mais pour toi ... au boulot Smiley smile
Modifié par Christele (06 Sep 2014 - 17:28)
Christele a écrit :

Donc je mets résolu mais pour toi ... au boulot Smiley smile


gc-nomade a écrit :
reprise du code test de 6|20 et ajout de la règle : table-layout:fixed; sur le dernier tableau.

Cette régle, à defaut de largeur données au th/td ou col, partage la largeur du tableau equitablement dans chaque cellules.

Ce width:30% est-il nécessaire dans les balises images (comme il n'y a pas de largeur donnée a la cellule ..)?


En gros, on a un width:30% qui est passé a 300px ....

<edit> je ne souligne que l’incohérence CSS que j'avais relevé.( L' heritage)
Modifié par gc-nomade (06 Sep 2014 - 19:49)
Voila enfin le code final, grâce à notre ami NoSmoking un des as de "developpez.net"
Ce code est totalement "Responsive Web Design" et terminer l'image bloquée à gauche de sa celule TD comme l'exemple signalé par cg-nomane Smiley decu 



<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>[...]</title>
<style>
table.lecentre {
  margin-left:auto;
  margin-right:auto;
  width:90%;
}
td.image {
  background:#EEF;
  max-width:200px;
  min-width:200px;
}
td img{
  width:100%;
}
td.expand{
  width:100%;
}
</style>
</head>
<body>
<table class="lecentre" border>
    <tr>
        <td class="image" rowspan="2">
            <img src="http://club.developpez.com/webdesign/Developpez.com/Bannieres/bigbanner-dev-site-n6.gif" alt="">
        </td>
        <td>xxx</td><td>xxx</td><td>xxx</td><td>xxx</td><td>xxx</td>
    </tr>
    <tr>
        <td colspan="5" class="expand">
             concurrent 2 Anthony xxx 11 ans 1/2
        </td>
    </tr>
    <tr>
        <td class="image" rowspan="2">
            <img src="http://club.developpez.com/webdesign/Developpez.com/Bannieres/bigbanner-dev-site-n6.gif" alt="">
        </td>
        <td>xxx</td><td>xxx</td><td>xxx</td><td>xxx</td><td>xxx</td>
    </tr>
    <tr>
        <td colspan="5" class="expand">
             concurrent 2 Anthony xxx 11 ans 1/2
        </td>
    </tr>
    <tr>
        <td class="image" rowspan="2">
            <img src="http://club.developpez.com/webdesign/Developpez.com/Bannieres/bigbanner-dev-site-n6.gif" alt="">
        </td>
        <td>xxx</td><td>xxx</td><td>xxx</td><td>xxx</td><td>xxx</td>
    </tr>
    <tr>
        <td colspan="5" class="expand">
             concurrent 2 Anthony xxx 11 ans 1/2
        </td>
    </tr>
</table>
</body>
</html>
Sujet clos
Aller à