5568 sujets

Sémantique web et HTML

[résolu] Th width="58%" refusé en xHTML

Bonjour tous

C'est la seule faute qui me reste sur mes pages, mais je ne trouve pas par quoi remplacer l'attribut "width" pour donner une largeur à mes titres dans un tableau.

Pour info, le site est extensible, mais bon s'il faut donner absolument une dimension, comment faire puisque width est refusé.

          <table width="100%" cellpadding="2" cellspacing="2">
            <tr>
              <th width="58%">Tarifs mensuels</th>
              <th width="7%">5 €</th>
              <th width="7%">10 €</th>


Ouuppsss, width est refusé pour les th pas pour table bien sur Smiley smile
Modifié par griggione (04 May 2010 - 11:35)
RE

          <table width="100%" cellpadding="2" cellspacing="2">
            <tr>
              <th class="th1">Tarifs mensuels</th>
              <th class="th2">5 €</th>
              <th class="th2">10 €</th>

.th1 
{
width: 58%;
}
.th2 
{
width: 7%;
}


Bien joué Laurie-Anne c'est rectifié maintenant tout en gardant le coté extensible.
Je te remercie.
RE

Oui oui c'est d'accord, mais je n'ai pas mis toutes les lignes dans l'exemple Smiley cligne

Mais tu as raison de le souligner.
Pour la route, en CSS on peut aussi faire ça:
#montableau tr > :first-child {
  width: 58%;
}
Florent V. a écrit :
Pour la route, en CSS on peut aussi faire ça:
#montableau tr > :first-child {
  width: 58%;
}

griggione a écrit :
Bonjour Florent V.

? Tu peux détailler stp ?

Je comprend rien à ce code.
En voici la traduction française :
Appliquer une largeur de 58% au premier enfant (:first-child) direct (>) d'une ligne de tableau (tr) inclue dans un élément dont l'id est montableau (#montableau).
RE

Je te remercie, maintenant je comprend.
Je ne savais pas que > voulait dire direct.

Est-ce valable aussi pour th ?

Dans le cas présent, je ne peux utiliser, car dans une même page j'ai plusieurs tableaux mais avec des colonnes differentes.
griggione a écrit :
Est-ce valable aussi pour th ?

Oui, vu qu'on vise tout premier enfant des TR. Utilisé seul (pas accolé à un nom d'élément, un sélecteur d'identifiant ou de classe, un sélecteur d'attribut ou une autre pseudo-classe), :first-child est équivalent à *:first-child.

griggione a écrit :
Je ne savais pas que > voulait dire direct.

A > B ou A>B signifie que B est enfant de A. Pas «enfant direct» comme l'écrit octopus984, car un enfant est forcément direct. Smiley smile

Pour la suite, revoir les sélecteurs CSS 2.1:
http://www.floatthatbox.com/articles/selecteurs-css-21-partie-1.php
RE

Je te remercie Florent V.

ouahhoou excellent lien, ce qui prouve qu'on est loin de savoir tout ce qu'il faut. Smiley eek
Modifié par griggione (05 May 2010 - 17:22)
Florent V. a écrit :
A > B ou A>B signifie que B est enfant de A. Pas «enfant direct» comme l'écrit octopus984, car un enfant est forcément direct. Smiley smile
Cela vient d'une confusion avec le terme descendant, que je n'utilise pas. Mais je ne pourrais plus m'en servir d'excuse désormais !
Modifié par octopus984 (05 May 2010 - 18:18)
Bonjour,
ta structuration n'est pas bonne : tu dois remplacer certain th par des td et ajouter l'attribut scope pour préciser le type de liaison (verticale ou horizontale):
 <table cellpadding="2" cellspacing="2"> 
            <tr> 
              <th scope="row">Tarifs mensuels</th> 
              <td>5 €</td> 
              <td>10 €</td>

Si tu cibles aussi IE6, il faudra ajouter un JS qui te permette d'implémenter certaines pseudo-classe CSS3 et :first-child (CSS2) : http://www.keithclark.co.uk/labs/ie-css3/
Pour les td suivant tu as :nth-child (n) voire :first-of-type (voir ici http://www.w3.org/Style/css3-selectors-updates/WD-css3-selectors-20010126.fr.html pour les détails)
Modifié par Hermann (05 May 2010 - 19:22)
Bonjour Hermann

Je sais que ça prête à confusion quand on voit pas le tableau, mais 5 € et 10 € sont bien des titres, le pourquoi des <th> ......

Et je passe bien dans IE6, pas besoin de JS complémentaire.

Merci pour le complément d'information Smiley cligne
griggione a écrit :
Bonjour Hermann
Je sais que ça prête à confusion quand on voit pas le tableau, mais 5 € et 10 € sont bien des titres, le pourquoi des <th> ......

Pas génial comme titre Smiley rolleyes Mais tout dépend du contexte...

griggione a écrit :
Et je passe bien dans IE6, pas besoin de JS complémentaire.

Pas si tu utilises :first-child Smiley cligne
Modifié par Hermann (06 May 2010 - 19:54)
RE

Hermann a écrit :

Pas si tu utilises :first-child Smiley cligne


Ha d'accord, mais pour l'instant j'utilise comme indiqué plus haut.
Par contre pour un autre site ou effectivement il y a plusieurs tableaux et identiques, j'ai mis ce lien en favori pour apporter les corrections.

Merci à tous.
Sujet clos
Aller à