Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

colgroup

12 réponses
Avatar
romer
Hi,

Je viens d'essayer d'utiliser la balise <colgroup>
Voilà le html:

<colgroup> /*4 colonnes*/
<col id="c19"><col id="c27"><col id="c27"><col id="c27">
</colgroup>

<!-- ************** Rangée 1 ************** -->
<tr>
<td>Date</td><td>1res L</td><td>1res ES</td><td>1res S</td>
</tr>

c19 signifie 19% de la largeur totale et c27, 27% comme le montre le
css. Le total faisant 100%.

#c19{width:19%;} /* 1re col=19% */
#c27{width:27%; /* 2e,3e,4e col=27% + bleu */
color:#00f;}

Suivent des dizaines de rangées...

Cela fonctionne bien pour la largeur différente des 4 colonnes mais
hélas, la couleur du texte de la 1re (bleu pur) ne fonctionne pas.
Je pensais le contraire.

C'est normal ou c'est moi qui ai mis sans doute plus d'espoir en elle
qu'il ne le fallait ?

Merci.
--
A+

Romer

10 réponses

1 2
Avatar
SAM
Le 12/26/08 12:47 PM, Bernd a écrit :
Hi,

Je viens d'essayer d'utiliser la balise <colgroup>
Voilà le html:

<colgroup> /*4 colonnes*/
<col id="c19"><col id="c27"><col id="c27"><col id="c27">



on n'a pas le droit d'avoir plusieurs ID pareils les mêmes !

préférer alors 'class'

Cela fonctionne bien pour la largeur différente des 4 colonnes mais
hélas, la couleur du texte de la 1re (bleu pur) ne fonctionne pas.
Je pensais le contraire.



La largeur de C19 doit fonctionner, les trois autres sont le fruit du
hasard (elles se répartissent le reste au mieux et comme d'hab en html
simple normal)

C'est normal ou c'est moi qui ai mis sans doute plus d'espoir en elle
qu'il ne le fallait ?



C'est surtout que c'est mal fichu de ta part à cause du ID répété.

Essayer (pas testé) :

col { color: blue}
#c19 {width:19%; color: black; }


<colgroup> <!-- 4 colonnes -->
<col id="c19"><col><col><col>
</colgroup>

ou :

col { color: blue }
col.c19 { width:19%; color: black; }


<colgroup>
<col class="c19"><col><col><col>
</colgroup>


ou :

.c19 { width:19% }
.c20 { color: blue }


<colgroup>
<col class="c19"><col class="c20"><col class="c20"><col class="c20">
</colgroup>



--
sm
Avatar
romer
SAM wrote:

Merci de te pencher sur ce petit problème.

on n'a pas le droit d'avoir plusieurs ID pareils les mêmes !
préférer alors 'class'



C'est vrai.

La largeur de C19 doit fonctionner, les trois autres sont le fruit du
hasard (elles se répartissent le reste au mieux et comme d'hab en html
simple normal)



Je ne pense pas - le déterminisme existe bel et bien dans ce cas - j'ai
essayé ta solution et les 4 colonnes ont la même largeur alors que celle
de gauche doit avoir une largeur moindre et les 3 autres une largeur
plus grande.
Ma solution fonctionne bien même avec IE6 (c'est dire !). J'ajoute que
j'ai attribué d'entrée à la balise <table> une largeur de 90%. Peut-être
que cela influe sur le rendu.

C'est surtout que c'est mal fichu de ta part à cause du ID répété.



Elle est mal fichue certes mais ce n'est pas cela qui perturbe la
largeur des colonnes - les browsers acceptent ces ID multiples.

Essayer (pas testé) :

col { color: blue}
#c19 {width:19%; color: black; }


<colgroup> <!-- 4 colonnes -->
<col id="c19"><col><col><col>
</colgroup>



Cela ne fonctionne pas - ni les 2 autres solutions que tu me fournis. La
couleur différente d'une colonne ne fonctionne pas alors que la largeur
fonctionne ! Bizarre.

Cela dit, il existe des solutions éprouvées pour colorer une colonne et
pas les autres mais j'aimais bien cette balise <colgroup> qui a le
mérite de la clarté.

--
A+

Romer
Avatar
SAM
Le 12/26/08 5:01 PM, Bernd a écrit :
SAM wrote:

Merci de te pencher sur ce petit problème.

on n'a pas le droit d'avoir plusieurs ID pareils les mêmes !
préférer alors 'class'



C'est vrai.

La largeur de C19 doit fonctionner, les trois autres sont le fruit du
hasard (elles se répartissent le reste au mieux et comme d'hab en html
simple normal)



Je ne pense pas - le déterminisme existe bel et bien dans ce cas - j'ai
essayé ta solution et les 4 colonnes ont la même largeur alors que celle
de gauche doit avoir une largeur moindre et les 3 autres une largeur
plus grande.



Non, pas chez moi.
Ta 1ère colonne est peut-être trop pleine et s'expanse au-delà des 19% ?

Pour la couleur du texte ... on ne peut jouer dessus :
<http://www.yoyodesign.org/doc/w3c/css2/tables.html#q4>
seuls sont utilisables : background, border, width et visibility
(en CSS2)


--
sm
Avatar
bruno666
Bernd a écrit:

Hi,

Je viens d'essayer d'utiliser la balise <colgroup>
Voilà le html:

<colgroup> /*4 colonnes*/
<col id="c19"><col id="c27"><col id="c27"><col id="c27">
</colgroup>

<!-- ************** Rangée 1 ************** -->
<tr>
<td>Date</td><td>1res L</td><td>1res ES</td><td>1res S</td>
</tr>




Outre le problème des id en doublon, si c'est du XHTML il manquerait
les balises de fermeture </col>. Je suppose donc qu'on est en HTML 4


c19 signifie 19% de la largeur totale et c27, 27% comme le montre le
css. Le total faisant 100%.



C'est un choix de nom peu judicieux... ;-)
Que se passe-t-il si tu change tes largeur de colonnes ?


#c19{width:19%;} /* 1re col% */
#c27{width:27%; /* 2e,3e,4e col'% + bleu */
color:#00f;}

Suivent des dizaines de rangées...

Cela fonctionne bien pour la largeur différente des 4 colonnes mais
hélas, la couleur du texte de la 1re (bleu pur) ne fonctionne pas.
Je pensais le contraire.

C'est normal ou c'est moi qui ai mis sans doute plus d'espoir en elle
qu'il ne le fallait ?



C'est normal, seules les propriétés border, background, width
et visibilty peuvent s'appliquer à des colonnes de tableau.

cf. http://www.yoyodesign.org/doc/w3c/css2/tables.html#q4

--
Bruno
Avatar
romer
bruno666 wrote:

Outre le problème des id en doublon, si c'est du XHTML il manquerait
les balises de fermeture </col>. Je suppose donc qu'on est en HTML 4



Sans doute mais ce n'est pas cela qui en empêche le fonctionnement. Or,
comme je l'écris au 1er post, je teste cette balise que je ne
connaissais pas et que je trouve assez pratique

> c19 signifie 19% de la largeur totale et c27, 27% comme le montre le
> css. Le total faisant 100%.

C'est un choix de nom peu judicieux... ;-)



Au moins je m'en souviens ;-)

Que se passe-t-il si tu change tes largeur de colonnes ?



J'en suis à la phase de test !

De toute façon, je viens d'abandonner cette balise - elle n'est pas
comprise par IE6 et 7 ! Carrément !
La beta de IE8 la comprend.
--
A+

Romer
Avatar
bruno666
Bernd a écrit:

bruno666 wrote:

Outre le problème des id en doublon, si c'est du XHTML il manquerait
les balises de fermeture </col>. Je suppose donc qu'on est en HTML 4



Sans doute mais ce n'est pas cela qui en empêche le fonctionnement. Or,
comme je l'écris au 1er post, je teste cette balise que je ne
connaissais pas et que je trouve assez pratique

> c19 signifie 19% de la largeur totale et c27, 27% comme le montre le
> css. Le total faisant 100%.

C'est un choix de nom peu judicieux... ;-)



Au moins je m'en souviens ;-)

Que se passe-t-il si tu change tes largeur de colonnes ?



J'en suis à la phase de test !

De toute façon, je viens d'abandonner cette balise - elle n'est pas
comprise par IE6 et 7 ! Carrément !



<col> et <colgroup> sont prises en charge par IE6 et suivants...


--
Bruno
Avatar
Pierre Goiffon
Bernd wrote:
De toute façon, je viens d'abandonner cette balise - elle n'est pas
comprise par IE6 et 7 ! Carrément !
La beta de IE8 la comprend.



?!!???
Je l'ai vu utilisée un paquet de fois sur du IE6 sans soucis !
Par contre je crois me rappeler que l'on ne peut appliquer que certaines
modifications de styl sur colgroup non ? Je viens de reparcourir très
vite la rec html 4.01 sans y trouver de réponse...
Avatar
Olivier Miakinen
Le 05/01/2009 16:02, Pierre Goiffon a écrit :

Par contre je crois me rappeler que l'on ne peut appliquer que certaines
modifications de styl sur colgroup non ?



Oui, cf. les réponses de SAM et de bruno666.

Je viens de reparcourir très
vite la rec html 4.01 sans y trouver de réponse...



C'est parce que ça n'y est pas, puisque ça concerne CSS et pas HTML.
Avatar
romer
Pierre Goiffon wrote:

> De toute façon, je viens d'abandonner cette balise - elle n'est pas
> comprise par IE6 et 7 ! Carrément !
> La beta de IE8 la comprend.

?!!???
Je l'ai vu utilisée un paquet de fois sur du IE6 sans soucis !
Par contre je crois me rappeler que l'on ne peut appliquer que certaines
modifications de styl sur colgroup non ? Je viens de reparcourir très
vite la rec html 4.01 sans y trouver de réponse...



C'est vrai que, énervé par le comportement chroniquement erratique de
IE, je suis allé un peu vite. Elle est comprise mais mal...
Les modifs de largeur de col dans colgroup ne sont pas prises en compte
sauf dans la beta8. Autement dit dans IE 7 et 8, si je pose :

<colgroup>
<col class="c19"><col class="c27"><col class="c27"><col class="c27">
</colgroup>

les 4 colonnes ont la même largeur alors que la 1re est plus étroite
dans tous les autres navigateurs (sauf les antiquités graves).
--
A+

Romer
Avatar
SAM
Le 1/5/09 6:54 PM, Olivier Miakinen a écrit :
Le 05/01/2009 16:02, Pierre Goiffon a écrit :
Par contre je crois me rappeler que l'on ne peut appliquer que certaines
modifications de styl sur colgroup non ?



Oui, cf. les réponses de SAM et de bruno666.



et attention !
l'attribut 'visibility' n'y a rien à voir avec celui usuel
(des fois que les CSS ce serait trop facile sans doute ?)
avec non pas 'hidden' mais 'collapse' comme valeur
1 2