Avoir un disc pour chaque row du table

Bonjour à tous,

ma compagne étant enseignante, elle dispose d'une page perso pour mettre à disposition de ses étudiants les anciens examens et contrôle.
J'ai réussi à me débrouiller jusqu'à présent mais là, je cale :D

La demande est d'afficher par années (une ligne par année) 3 tests : interro A, interro B et interro C.
Et le list-style-type:disc des ul étant "bien", on aimerait l'avoir devant chaque année.

Un exemple :
disc 2012 : Interro A Interro B Interro C
disc 2011 : Interro A Interro B Interro C
disc 2010 : Interro A Interro B Interro C
etc.

La distance entre interro A et interro B devrait pour bien faire être la même pour chaque ligne et être facile à changer

C'est pour réaliser ceci que je suis bloqué.
- Soit je fais une list <ul> A B C</ul> mais si je veux changer les distances, je dois tout harcoder
- Soit je fais un tableau mais je n'arrive pas à dire "pour chaque tr du table, commence par un "disc" stp merci".


Quelqu'un aurait-il une jolie solution pour mon problème ?

Merci d'avance. :)

Bonjour,

Pourrait-on s'il, vous plait, avoir une ligne de code ?

Bien sur, voici donc sous forme de liste.
Vu que je ne connais pas de moyen d'isoler au sein d'un "li" différents éléments, les espaces devrait être hardcodé dans chaque ligne.

Code:

---

1 2 3 4 5 6 7 8

<h3>Exams</h3> <hr /> <ul> <li>1999 - 2000 <a href="A.pdf">Interro</a> &nbsp; <a href="B.pdf">Exam June</a> &nbsp; <a href="C.pdf">Exam September</a></li> <li>2000 - 2001 <a href="A.pdf">Interro</a> &nbsp; <a href="B.pdf">Exam June</a> &nbsp; <a href="C.pdf">Exam September</a></li> <li>2001 - 2002 <a href="A.pdf">Interro</a> &nbsp; <a href="B.pdf">Exam June</a> &nbsp; <a href="C.pdf">Exam September</a></li> </ul>

---

Et voici par table, là où il est plus facile d'avoir les espacements désirés mais où je n'arrive pas à mettre un petit disc devant chaque row.

Code:

---

1 2 3 4 5 6 7 8 9 10

<table style = "border-spacing: 25px 5px;"> <tr> <td>1996 - 1997</td> <td><a href="A.pdf">Interro</a></td> <td><a href="B.pdf">Exam June</a></td> <td><a href="C.pdf">Exam September</a></td> </tr> and so on </table>

---

Pour le CSS, je me suis rendu compte que la property "list-style-type:disc" est réservée aux listes et je pense que vu que tr est inline, je ne pourrais pas mettre une image de disque en "background" (d'ailleurs cette solution me semblait déjà assez rock&roll avant même de la tester :D)

Peut-être en essayant avec le pseudo-élément :before.

Code:

---

1 2 3 4

td:first-child:before{ content:"•"; color:red; }

---

C'est tout pile ce qu'il me fallait !
Juste une classe CSS et un seul ajout dans le HTML.
Merci, c'est parfait.

J'ai aussi vu que

Code:

---

1 2 3 4

.classDeMaTable tr:before{ mettre point ou image }

---

marche bien dans mon cas.