hauteur de cellule d'un tableau

Le
Freegate
Bonjour,

J'ai mis en ligne le code suivant :
<table width="480" border="0" align="center" cellpadding="0"
cellspacing="0" bordercolor="#C1CBB4">
<tr>
<td width="9" height="12"><img src="../img/cag.gif" border="0"/></td>
<td width="462" height="12" bgcolor="#C1CBB4">&nbsp;</td>
<td width="9" height="12"><img src="../img/cad.gif" border="0"/></td>
</tr>
</table>

Il s'agit d'une ligne de hauteur de 12px avec 3 colonnes contenant pour
la 1ere un coin arrondi gauche, et la 3ème un coin arrondi droit. Au
milieu, rien de particulier.

Mon probleme c'est qu'à l'affichage dans un navigateur, la cellule du
milieu a une hauteur supérieur à 12px. La ligne n'est donc pas
uniforme. Comme faire pour imposer que la hauteur de la ligne entière
soit de 12px ?

Merci beaucoup
Vidéos High-Tech et Jeu Vidéo
Téléchargements
Vos réponses Page 1 / 2
Gagnez chaque mois un abonnement Premium avec GNT : Inscrivez-vous !
Trier par : date / pertinence
Mihamina Rakotomandimby (R12y)
Le #22069431
Freegate wrote:
Bonjour,



Bonjour

J'ai mis en ligne le code suivant :


[...]



D'apres ce que je crois lire ici:
http://www.w3.org/TR/html401/struct/tables.html
il n'y a pas d'attribut "height" pour la balse "td".

Mon probleme c'est qu'à l'affichage dans un navigateur, la cellule du
milieu a une hauteur supérieur à 12px. La ligne n'est donc pas uniforme.
Comme faire pour imposer que la hauteur de la ligne entière soit de 12px ?



Je proposerais de faire ça avec les CSS.
Freegate
Le #22069421
Mihamina Rakotomandimby (R12y) a exprimé avec précision :
Freegate wrote:
Bonjour,



Bonjour

J'ai mis en ligne le code suivant :


[...]



D'apres ce que je crois lire ici:
http://www.w3.org/TR/html401/struct/tables.html
il n'y a pas d'attribut "height" pour la balse "td".

Mon probleme c'est qu'à l'affichage dans un navigateur, la cellule du
milieu a une hauteur supérieur à 12px. La ligne n'est donc pas uniforme.
Comme faire pour imposer que la hauteur de la ligne entière soit de 12px ?



Je proposerais de faire ça avec les CSS.



même en enlevant l'attribut height ça ne résoud pas le pb !!!

En fait il n'y a qu'avec firefox que ça ne marche pas
Freegate
Le #22069411
Freegate vient de nous annoncer :


même en enlevant l'attribut height ça ne résoud pas le pb !!!

En fait il n'y a qu'avec firefox que ça ne marche pas



Bon ça fonctionne avec IE et FF avec ce code là :

<table width="480" border="0" align="center" cellpadding="0"
cellspacing="0">
<tr>
<td width="462" bgcolor="#C1CBB4"></td>
</tr>
</table>
Mickaël Wolff
Le #22069401
Freegate a écrit :
même en enlevant l'attribut height ça ne résoud pas le pb !!!



Il n'a pas dit que ça résoudrai le problème, mais que ce n'était pas
un attribut HTML valide pour l'élément TD.

En fait il n'y a qu'avec firefox que ça ne marche pas



Ça fonctionne avec Opera, Konqueror et W3M ? :-D

Bref, comme l'a suggéré Mihamina, utilises des styles. Par exemple :

<style type='text/css'>
table { width: 480px ; border: none ; }
td.border { height: 12px ; background : rgb('#C1CBB4') ; }
td.corner { width: 9px ; }
td.middle { width: 462px ; }
.border img { border: none ; }
</style>

<table>
<tbody>
<tr>
<td class='border middle'><!-- pourquoi &nbsp; ? --></td>
</tr>
</tbody>
</table>

Et utiliser les tableaux pour la mise en page, c'est mal © ;) Pour
les pixels aussi, mais au début c'est pas facile de faire quelque chose
de relatif.

--
Mickaël Wolff aka Lupus Michaelis
http://lupusmic.org
Mickaël Wolff
Le #22069391
Mickaël Wolff a écrit :

Pfou, plus les yeux en face des trous :

td.border { height: 12px ; background : #C1CBB4 ; } /* pas rgb */
td.corner { width: 9px ; background: url('../img/cag.gif') ; } /* en
fait */
td.middle { width: 462px ; }

</style>

<table>
<tbody>
<tr>


<td class='border corner'></td>
<td class='border middle'><!-- pourquoi &nbsp; ? --></td>


<td class='border corner'></td>
</tr>
</tbody>
</table>




--
Mickaël Wolff aka Lupus Michaelis
http://lupusmic.org
SAM
Le #22069381
Freegate a écrit :
Bonjour,

J'ai mis en ligne le code suivant :
<table width="480" border="0" align="center" cellpadding="0"
cellspacing="0" bordercolor="#C1CBB4">
<tr>
<td width="462" height="12" bgcolor="#C1CBB4">&nbsp;</td>
</tr>
</table>

Il s'agit d'une ligne de hauteur de 12px avec 3 colonnes contenant pour
la 1ere un coin arrondi gauche, et la 3ème un coin arrondi droit.



Comment réalises-tu ça ?

Au milieu, rien de particulier.

Mon probleme c'est qu'à l'affichage dans un navigateur, la cellule du
milieu a une hauteur supérieur à 12px. La ligne n'est donc pas uniforme.
Comme faire pour imposer que la hauteur de la ligne entière soit de 12px ?




à mon idée :

- le height serait à mettre au TR
(les cellules d'une rangée sont de même hauteur, non ?)
- c'est un table !
Il doit arranger "au mieux" la présentation,
les cellules peuvent alors s'allonger en hauteur
et même en largeur (suivant le type d'indication de largeur)
pour afficher leurs contenus.
- On ne peut donc *fixer* la hauteur de cellule
tout au plus régler la hauteur minimale.

Si les images sont de hauteur 12px et l'espace fixe en police 7px,
toute la ligne devrait se régler relativement aux images.
(de mon jeune temps, au lieu de mettre un &nbsp; on mettait une image
transparente d'1px dont on fixait soit la hauteur, soit la largeur, pour
assurer la taille de la cellule ou de la rangée. Aujourd'hui cette
technique moche et gourmante est révolue).



Nota :

il y aurait intérêt à régler tout le bazar en CSS
Avantage : pas besoin de :
- '&nbsp;' pour la cellule vide
- bgcolor pour cette même cellule

Les images (qui ne sont pas dans un 'A') n'ont pas à avoir de border="0"


--
sm
SAM
Le #22069371
Mickaël Wolff a écrit :
Mickaël Wolff a écrit :

Pfou, plus les yeux en face des trous :

td.border { height: 12px ; background : #C1CBB4 ; } /* pas rgb */
td.corner { width: 9px ; background: url('../img/cag.gif') ; } /* en
fait */
td.middle { width: 462px ; }





et pendant qu'on y est, peut-être ajouter :

td { empty-cell: show } /* remplace &nbsp; dans la cell. */

</style>

<table>
<tbody>
<tr>


<td class='border corner'></td>
<td class='border middle'><!-- pourquoi &nbsp; ? --></td>





&nbsp; : à défaut de CSS fixant les bordures (cas initial),
la cellule sera atrophiée
(même avec CSS, NC4 n'affichera que du blanc sans bords)

<td class='border corner'></td>
</tr>
</tbody>
</table>






--
sm
Laurent vilday
Le #22069361
Freegate :
J'ai mis en ligne le code suivant :
<table width="480" border="0" align="center" cellpadding="0"
cellspacing="0" bordercolor="#C1CBB4">
<tr>
<td width="462" height="12" bgcolor="#C1CBB4">&nbsp;</td>
</tr>
</table>

Mon probleme c'est qu'à l'affichage dans un navigateur, la cellule du
milieu a une hauteur supérieur à 12px. La ligne n'est donc pas uniforme.
Comme faire pour imposer que la hauteur de la ligne entière soit de 12px ?



Considérons que tu veuilles vraiment utiliser un tableau pour cette mise
en forme.
Et considérons également tu tiennes absolument à garder cette structure
en tableau (sigh)

Il faudrait alors placer la line-height du td contenant le &nbsp; à une
valeur inférieure du 12px escomptée (genre td { line-height:0 }

Mais bon, as-tu un exemple en ligne du rendu désiré ? Histoire de te
proposer des alternatives à cet horrible tableau.

--
laurent
Pierre Goiffon
Le #22069351
SAM wrote:
et pendant qu'on y est, peut-être ajouter :

td { empty-cell: show } /* remplace &nbsp; dans la cell. */



Euh, le &nbsp; était utile lorsque l'on utilisait un border=... en
attribut de table.
Ici avec une bordure réalisée en CSS, quel est donc l'effet de cette
propriété que je ne connaissais pas ?
SAM
Le #22069341
Pierre Goiffon a écrit :
SAM wrote:
et pendant qu'on y est, peut-être ajouter :

td { empty-cell: show } /* remplace &nbsp; dans la cell. */





bon, erreur, en fait, ce pourrait être :
table { empty-cells: show }
ou :
tr { empty-cells: show }

Euh, le &nbsp; était utile lorsque l'on utilisait un border=... en
attribut de table.



Vi, toutafé.

Ici avec une bordure réalisée en CSS, quel est donc l'effet de cette
propriété que je ne connaissais pas ?



Je fais pas de bordure en CSS c'est trop casse-pieds ;-)

Le jour où il y aura une CSS qui remplacera le simple :
<table border=1>
du genre :
table { borders: 1px solid; }
on verra.


Bon!
allez, des bordures en CSS :


<style type='text/css'>
table { border: none ; }
td { border: 1px solid; width: 33% }
.test { empty-cells: show }
</style>
<table>
<tr>
<td>_Row_1_Cell_1_</td>
<td></td>
<td>_Row_1_Cell_3_</td>
</tr>
<tr class="test">
<td>_Row_2_Cell_1_</td>
<td></td>
<td>_Row_2_Cell_3_</td>
</tr>
</table>

La cellule vide de rangée 'test' montre sa bordure
contrairement à celle de rangée 1
(testé Fx. IE ?)


--
sm
Publicité
Poster une réponse
Anonyme