hauteur de cellule d'un tableau

Freegate wrote:

Bonjour,

Bonjour

J'ai mis en ligne le code suivant :

[...]

<td width="9" height="12"><img src="../img/cag.gif" border="0"/></td>

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.

Mihamina Rakotomandimby (R12y) a exprimé avec précision :

Freegate wrote:

Bonjour,

Bonjour

J'ai mis en ligne le code suivant :

[...]

<td width="9" height="12"><img src="../img/cag.gif" border="0"/></td>

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 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="9" background="../img/cag.gif" height="12"></td>
<td width="462" bgcolor="#C1CBB4"></td>
<td width="9" background="../img/cad.gif"></td>
</tr>
</table>

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 corner'><img src="../img/cag.gif"/></td>
<td class='border middle'><!-- pourquoi &nbsp; ? --></td>
<td class='border corner'><img src="../img/cad.gif"/></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 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

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="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.

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
<http://www.yoyodesign.org/doc/w3c/css2/indexlist.html#index-t>
Avantage : pas besoin de :
- '&nbsp;' pour la cellule vide
<http://www.yoyodesign.org/doc/w3c/css2/tables.html#propdef-empty-cells>
- bgcolor pour cette même cellule

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


--
sm

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

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="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>

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

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 ?

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