Design de mes tableaux

Bonjour à tous, je tente d'adiministrer un blog éducatif pour mes élèves. Visiblement le design leur convient mais ils me font souvent remarquer que le visuel de mes tableaux voir: http://www.mathstrass.fr/?page_id=73 n'est pas terrible. Quelqu'un aurait-il une idée, des conseils ou autres exemples pour m'aider à les arranger?
Merci d'avance
Florent

Bonjour Flotch,

Au passage, et avant toute chose, ta page n'est pas valide.

Mais avant de te jeter sur les erreurs, je te conseille la lecture de cet article pour le choix de ton DTD. XHTML 1.0 Transitional serait plus adapté.



Mais cela ne répond pas à ta question.
Question d'ordre graphique, ou d'ordre technique ?

Sur le plan graphique, il serait peut-être plus élégant de jouer sur les couleurs de fond (en alternant 2 classes par ligne, par exemple), plutôt que d'utiliser les bordure par défaut (éliminer les bordures).
Modifié par Vero (06 Oct 2006 - 17:02)

D'ordre graphique dans un premier temps puis technique après...forcément!

Je pour pour l'élimination des bordures également! ou mettre simplemement une bordure de 1px bleu fonçé par exemple.

Pourquoi pas mettre un dégradé pour le haut du tableau(où il y a date, cours, exercices...).

Et comme le dit si bien Véro, alterner les couleurs à chaque ligne. un bleu clair à un ligne et la suivante un bleu encore plus clair par exemple et ainsi de suite.

Salut,

déjà tu pourrais enlever le border="1" dans ton code, ça enlèvera la bordure toute pas belle.

Puis dans ton css tu peux mettre un border-bottom à tous les td pour avoir une séparation entre chaque ligne du tableau.

Tu peux aussi mettre un background-color sur les tr, en alternant deux couleurs un ligne sur deux.

Par exemple...mais les possibilités sont infiniiiies

Je suis bien sûr d'accord pour essayé cela parait être une bonne idée....et techniquement alors???

En fait, comment faire pour modifier d'un coup tous les td et tr de toutes mes tables?
Que dois je mettre dans mon css?
De plus vous verriez quoi comme couleur et comme police pour garder une certaine unité dans mon blog?
Modifié par Flotch (06 Oct 2006 - 18:31)

Flotch a écrit :
En fait, comment faire pour modifier d'un coup tous les td et tr de toutes mes tables?
Que dois je mettre dans mon css?

td {
...
}
tr {
...
}

Une autre idée de design de tableau : http://typo.leevigraham.com/articles/2005/11 (voir le tableau tout en bas)
Modifié par Raphael (06 Oct 2006 - 18:35)

Bien logiquement, comme elle à une classe :

table.entry tr {...}

table.entry td {...}

Grilled
Modifié par Hum (06 Oct 2006 - 18:37)

j'ai mis ceci dans ma feuille de style et il ne se passe rien, de plus j'aimerai bien alterné les couleurs chaque tr ou td comment le mettre en css?

table.entry tr {background-color:#FF3C00}
table.entry td {border-bottom:1}

IL faut affecter une classe différente, donc répercuter ceci dans la source HTML.

table.entry tr.couleur1 {background-color:#FF3C00}
table.entry tr.couleur2 {background-color:#FF3C00}

avec

<tr class="couleur1"><td>blabla</td> ...</tr>
<tr class="couleur2"><td>blabla</td> ...</tr>
<tr class="couleur1"><td>blabla</td> ...</tr>
....

Il me semble que la question avait été posée pour faire cela automatiquement, mais si astuce il y a, il faudra utiliser un langage de script.

Si le tableau n'est pas destiné à évoluer souvent, le faire manuellement est sûrement le plus simple.
Modifié par Vero (06 Oct 2006 - 20:22)

Salut Flotch,

Tu pourrais mettre le border à "0" et faire quelque chose comme ça :

table th {background-color:#FF3C00}
table tr {border-bottom:1}
table tr.tr1 {background-color:#FFCC66}
table tr.tr2 {background-color:#FFFF99}	

et le début de ta table donne :

					<table width="100%" border="0" align="left" style="height: 4px">
<tr>
<th style="width: 10%">Date</th>
<th style="width: 50%">Cours</th>
<th style="width: 20%">Exercices</th>
<th style="width: 20%">Devoirs</th>
</tr>
<tr class="tr1">
<td>04/10/06</td>
<td>Correction des exercices</td>
<td>Correction de la feuille d’exercices sur les différentes formes d’écriture des nombres décimaux</td>
<td>Réviser le chapitre 1</td>
</tr>
<tr class="tr2">
<td>03/10/06</td>
<td>Correction des exercices</td>
<td>Feuille d’exercice sur les différentes formes d’écriture des nombres décimaux</td>
<td></td>
</tr>
<tr class="tr1">
...

@+

[*EDIT]
Oulà ! je suis carrément lent à écrire mes posts
Je n'avais pas vu que Véro t'avait déjà répondu depuis 10min...
[/EDIT]
Modifié par Heyoan (07 Oct 2006 - 02:59)

Pour les aspects techniques, en cherchant un peu dans mes ressources, j'ai trouvé cela :

Au tableau ! (plutôt accès sur la structure)

Une galerie de tableaux stylés (tu devrais trouver ton bonheur là-dedans ! )
Modifié par Vero (06 Oct 2006 - 20:38)