Boucle javascript et largeur des colonnes d'un tableau dynamique

Bonjour,

J'ai pris note de ne plus utiliser document.write pour écrire dynamiquement un tableau et utiliser une solution d'ailleurs proposée dans la FAQ javascript soit document.getElementById('cel').innerHTML.

Le code sera une boucle en javascript.

Or je souhaite construire un tableau avec :
1- Une première ligne qui prend toute la largeur de l'écran mais de couleur verte.
2- Plusieurs lignes suivantes avec 2 fois 3 colonnes de taille différente avec les colonnes 1 et 4 en bleu les 2, 3, 5 6 en jaune.
4- Une nouvelle ligne qui prend toute la largeur de l'écran mais de couleur verte.
5- Une nouvelle ligne qui prend toute la largeur de l'écran mais de couleur invisible par rapport au fond de page.
etc...

Ma question porte sur interaction entre javascript et CSS norme W3C en fichier externe.

Qu'elle est la meilleure solution pour définir couleur et largeur des colonnes ?
1- Des class pour éviter des id identiques
2- Des balises <td> pour les lignes pleine puis <th> pour les lignes de 2 x 3 colonnes (mais comment coder la longueur de chacune avec cette unique balise <th> sans le mettre en javascript ?)
3- Détourner l'usage des balises de tableau structuré tbody, thead, tfoot

Merci par avance de vos retours d'expérience.

Bonjour,

Citation:

---

Qu'elle est la meilleure solution pour définir couleur et largeur des colonnes ?
1- Des class pour éviter des id identiques

---

passe par des classes.


Pour le reste si le rendu est celui présenté sur ta précédente discussion, Cause Anomalie HTML1512 non trouvée, pourquoi ne pas essayer une approche par les listes <UL> <LI>?

Je ne comprends pas la question sur l'interaction entre JavaScript et CSS. Tu te sers de JavaScript pour générer le DOM (Document Object Model), puis les règles de tes feuilles de style CSS viennent s'appliquer dessus.

Pour faire les choses dans l'ordre :
1) écris le HTML du tableau désiré en résultat
2) ajoute les règles de style CSS qu'il faut pour qu'il s'affiche tel que tu le désires
3) écris le code JavaScript pour générer le HTML du tableau tel que décrit en 1)

Petit rappel sur les balises des tableaux en HTML :
<table> : le tableau en entier
<tr> : une ligne du tableau
<th> : un en-tête de colonne
<td> : une cellule

A regarder aussi, l'attribut colspan du tag td qui indique combien de colonnes doit occuper la cellule.

petit exemple :
http://jsfiddle.net/ZNPpv/1/

Tout d'abord merci de vos suggestions

A NoSmoking : Oui le rendu recherché est celui du post cité

A SylvainPV : A l'avance je ne connais pas le nombre de ligne (sauf un nombre maximum par page) que comportera le tableau ni l'emplacement des ou la ligne pleine.

En fait le tableau sera confectionné à partir d'un fichier menu.js externe contenant une liste ( Voir lien cité par NoSmoking)

Seul élément constant pour les autres lignes comportant plusieurs colonnes des largeurs fixe différentes :
Colonne 1 : 3%
Colonne 2 : 7%
Colonne 3 : 40%
Ces colonnes 1-2-3 seront également présentent à droite pour un tableau de 6 colonnes.

Le codage proposé est le genre très épuré que je recherche mais le code css nth-child est, sauf erreur, réservé exclusivement aux navigateurs compatible HTML5. En outre il me faut gérer dynamiquement un numéro de l'élément enfant puisque je n'ai pas de logique n+2 ou bloc...

En résumé utiliser des classes est, pour l'instant la seule solution me permettant un codage de la mise en forme dans un fichier css séparé... sauf possibilités autres que j'ignore.

En résumé je ne souhaite pas, à l'ancienne, inclure des styles dans le codage htm mais les laisser dans le fichier css...

C'est l'objet de ce post...

Le support de nth-child est très bon : http://caniuse.com/#search=nth-child
Mais utiliser des classes, c'est tout aussi bien. Surtout si l'ordre des lignes est amené à changer. C'était ça la question ?

Absolument !

En résumé je vais conserver des classes.

Un grand merci à vous deux. Question résolue donc.

Je me permets de rappeler juste une chose :

Citation:

---

Envoyé par jpe54

Détourner l'usage des balises de tableau structuré tbody, thead, tfoot

---

C'est le style qui est au service du contenu, pas l'inverse. Comme l'a dit Sylvain :

Citation:

---

Envoyé par SylvainPV

1) écris le HTML du tableau désiré en résultat
2) ajoute les règles de style CSS qu'il faut pour qu'il s'affiche tel que tu le désires

---

Une solution qui n'a pas du tout été proposée, et qui pourtant correspond tout à fait à la situation, est l'usage des balises <col> et <colgroup>. Le support est quasi universel. Le principe de ces balises est de donner au développeur un moyen efficace d'appliquer des attributs ou des styles à toutes les cellules d'une même colonne.

Les choses à retenir pour maîtriser les colonnes, c'est :

• Elles sont un peu une exception à la structure arborescente du HTML : elles ne contiennent pas les cellules, bien qu'elles les englobent d'une certaine façon. Ainsi, un sélecteur du genre de col td ne fonctionnera pas.
• Pour éviter de rendre encore plus complexe le rendu des tableaux, la gestion des styles de colonnes a été réduite au strict minimum : les seuls styles applicables sont width, background, border et visibility.

Voici deux sources que j'ai trouvées : Styling Table Columns – Tables Accessibility

Jpe54, du haut de ce que je sais de tes besoins, voici l'exemple que je te propose : http://jsfiddle.net/wm2Bg/1/ (mis à jour : il y avait une erreur sur la fermeture des <th>)
Tu noteras que j'ai fait quelques parti-pris :

• J'ai choisi <th> pour les lignes vertes.
• D'après ce que j'ai compris, tu as un nombre inconnu de groupes « une ligne verte / plusieurs lignes à colonnes / une autre ligne verte / une ligne transparente ». J'ai donc choisi de représenter ces groupes par autant de <tbody>. On a le droit d'en mettre plusieurs.
• Une chose que je n'ai pas faite, mais je me suis posé la question : les lignes transparentes servent-elles uniquement de séparateur ? Si c'est le cas, elles ne doivent pas apparaître dans le code HTML, et seront remplacées par une margin-bottom sur les <tbody>.
• Si tu as un <thead> dans ton tableau, tu auras peut-être besoin de modifier les règles CSS de mon exemple qui s'appliquent aux <th> et <td>, en rajoutant tbody devant.

Merci beaucoup pour cette approche ultra simple avec des balises <col> et <colgroup>.

Je vais faire le tour des navigateurs potientiels, mais c'est à mon avis la solution à retenir !