Numéroter les cellules d'un tableau html

Bonjour,

J'ai créé un tableau html sur une page, et je souhaiterais pouvoir afficher le numéro de chaque cellule du tableau, pour pouvoir l'iidentifier ensuite par son numéro, juste en parcourant visuellement le tableau.
J'ai pensé à une sorte d'incrémentation automatique comme dans Excel, mais dans une table html, je ne sais pas comment faire !

Et également j'aimerais pouvoir ajouter le terme "numéro" devant chaque numéro:
Si je ne me trompe pas, cela impliquerait donc d'avoir une valeur répétée dans chaque cellule (valeur "numéro"), et d'avoir une valeur variable dans chaque cellule (valeur "numéro de cellule").

Pensez vous que je puisse faire tout ça juste en html ou me conseillez vous de recourir au php ? (je suis assez débutant en php, et pour l'exercice j'aimerais vraiment utiliser du simple html)

Si vous avez des conseils...

Merci d'avance

Alex
Modifié par swampsong (30 Dec 2010 - 09:46)

Si ton tableau est dynamique, il faudra que tu passes obligatoirement par un autre langage (php par exemple) pour générer ton code html.

Si ton tableau reste statique et que tu ne souhaites pas apprendre de nouveaux langages, code le en dur dans ton tableau html.

Salut

Pour un aperçu en CSS2 : compteur
ou encore les : compteurs imbriqués
Et ça aussi Le numérotage automatique et les listes

Mais je n'ai pas d'autres indications sur la validité des compteurs en CSS2. Surtout pas en multi-navigateur.
Les trois adresses concernent la spécification du W3C en Francais. De yoyodesign.

Sinon si statique : coder en dur ? - entièrement d'accord. Mais si dynamique de préférence PHP.

++
Modifié par zardoz (31 Dec 2010 - 13:18)

Bonne idée de zardoz

Tu pourrais essayer une css du genre

table
{
counter-reset:case;
}

td:before
{
counter-increment:case;
content:counter(case);
}

Merci beaucoup !

La CSS produit exactement l'effet que je recherchais !

Désolé de vous poser cette question après que vous m'ayiez répondu, mais bon je la pose quand même: Pensez vous que pour alléger une page (pour améliorer le chargement), on peut créer l'équivalent d'un tableau, mais sans passer par le code html "table" ?

Avec le CSS, je saurais peut être le faire éventuellement, mais alors l'incrémentation deviendrait difficile sinon impossible !!

Alex
Modifié par swampsong (30 Dec 2010 - 11:11)

Si c'est un tableau de données que tu affiches (ex: liste de produits avec prix htva, tva, etc), tu DOIS utiliser les balises table, tr, td, th, etc.

Si c'est juste pour de la mise en page, il est préférable de revoir ton code html.

Dans les deux cas, on utilise les css pour la mise en forme.

En fait, c'est plutôt pour de la mise en page...

J'ai depuis revu ma copie et opté pour une autre technique (je ne sais pas si c'est la bonne).

Pour alléger la page contenant le tableau (qui contiendra un grand nombre de lignes), j'ai placé le tableau html dans une boucle grâce à php: Cela me permet d'inclure une seule fois la première ligne du tableau, puis de demander la répétition un certain nombre de fois (du nombre de lignes désirées) par la fonction "while" de php.

Je m'interroge donc sur un autre point: Peut on introduire une variable dans chaque cellule du tableau alors même qu'elles sont répétées (donc copiées en quelque sorte) ?

Mon but est le suivant: Permettre l'incrémentation comme avec le CSS, mais dans un tableau html reproduit au moyen d'une boucle...
En d'autres termes, je cherche à faire en sorte que le contenu des chaque cellule reproduite avec while puisse être variable...

Merci d'avance pour vos conseils

Alex
Modifié par swampsong (30 Dec 2010 - 13:54)

Ta dernière solution est envisageable. Elle présente même un gros avantage. Quand tu voudras modifier ton tableau il te suffira de modifier une ligne dans ton code php pour mettre à jour les 200 lignes de ton tableau html.

Après comme le dit Patidou, il ne faut pas utiliser la balise <table> et ses filles pour faire de la mise en page. Le but est de toujours séparer le contenu (fichier .html) de la mise en page (fichier .css)

Un moyen est alors de remplacer chacune de tes balises
<table> par <div class="contenu">
<tr> par <div class="groupe">
<td> par <div class="element">

Tu devras alors définir ta mise en page dans un fichier css du genre :

div.contenu{display:table} // Remplace la balise <table> pour le contenu non informatif
div.contenu div.groupe{display:table-row} // Remplace la balise <tr> pour le contenu non informatif
div.contenu div.groupe div.element{display:table-cell} // Remplace la balise <td> pour le contenu non informatif

Si le rendu n’est pas encore tout à fait le même qu’avec tes anciennes balises <table> pioche dans la css de ce fichier à partir de la ligne 128.

table 
{ 
counter-reset:case; 
} 
 
td:before 
{ 
counter-increment:case; 
content:counter(case); 
}

Moi je voudrais uniquement que cette incrémentation ce face dans la première colonne que faut-il rajouter au css présent ?

Bonsoir,

j'ai maintenant créé une base MySQL, avec trois champs pour alléger le tout...

Et ça fonctionne !!

@ DesignArca: Peut être qur'il faudrait essayer en mettant 'td' à la place de 'case' dans counter reset
Modifié par swampsong (30 Dec 2010 - 22:34)

Designarca a écrit :
Moi je voudrais uniquement que cette incrémentation ce face dans la première colonne que faut-il rajouter au css présent ?

Pour les navigateurs compatibles à la norme css2.1 :

…
td:first-child:before
{
…

Pour les navigateurs du jurassique il faudra que tu définisses une nouvelle classe dans ton code html, (soit sur tous les <td> de la première colonne, soit sur une balise <col>).

Bonjour !

J'aurais une dernière question... Promis, après je sors du forum (si si !!)

Je pense que je n'avais pas clairement exposé mon projet; En réalité, le tableau me servira bien de classement de données et non pas vraiment pour de la mise en page...
Simplement il s'agit d'un tableau sans titre de colonne, ni titre de ligne (donc pas un tableau à double entrée)

Le résultat que je recherche, via une fonction php a priori serait de mettre la première ligne du tableau (qui a 8 colonnes) dans une boucle avec "while", répétée un certain nombre de fois...

Mais le pb est que la répétition en php fera une copie de cette 1ère ligne, donc répétera les cellules 1 à 8 sur toutes les lignes suivantes de la répétition.

La subtilité que je recherche est donc que chaque ligne soit incrémentée à la suite (et que chaque numéro de cellule soit affiché)

Exemple --> 1ère ligne: Cellules 1 à 8
--> 2è ligne: Cellules 9 à 16
--> 3- ligne: Cellules 17 à 24
... Et ainsi de suite...

Peut être qu'il faudrait déjà que j'essaie d'afficher le tableau html en le plaçant dans le code php:
En php, je sais afficher du texte avec echo, mais comment afficher un tableau ? Faut il aussi utiliser echo ? ou une autre fonction ?

Merci pour vos éclairages !!

Alex
Modifié par swampsong (31 Dec 2010 - 13:55)

Salut, Tu peux utiliser des balises html de tableau dans tes écho php (td, tr...). ++

En effet, à cause d'une erreur dans mon code, je pensais qu'on ne pouvait pas afficher autre chose que du texte avec echo... Mais j'ai corrigé et tout fonctionne !

Merci !