28220 sujets

CSS et mise en forme, CSS3

[ résolu ] Trop de div dans un tableau htm ?

salut à tous !

Voila mon soucis : j'ai creer un tableau HTML sur une page.
Seulement, pour la police je veux utiliser le css, afin que mon code ne soit pas trop lourd, et puis c''est plus simple aussi.

Ainsi, dans ma feuille css c'est creer - à titre d'exemple - ceci :

 #police1  {

 color: #FFFFFF; 
     font-size: 11px;
     font-family: Arial;
     word-spacing: 3px;


puis dans ma feuille htm :

 <td><div id="police1">10/09</div></td>
<td><div id="police1">Balthazar</div></td>
<td><div id="police1">21h00</div></td>


Seulement je trouve que ca fait beaucoup de div .....
est ce que je peux faire comme cela ?
avez vous une meilleur proposition ?
Merci à tous !

voila ce que ca donne pour de vrai :

 <html>
<h1>SPINASHLAND | 2005 | CONCERT</h1>
<table border=0 CELLSPACING=10>
<tr>
<th><div id="police3">Date</div></th>
<th><div id="police3">Lieu</div></th>
<th><div id="police3">Informations</div></th>
</tr>
<tr>
<td><div id="police3">---</div></td>
<td><div id="police3">---</div></td>
<td><div id="police3">---</div></td>
</tr>
<tr>
<td><div id="police3">Septembre</div></td>
</tr>
<tr>
<td><div id="police1">10/09</div></td>
<td><div id="police1">Balthazar</div></td>
<td><div id="police1">21h00</div></td>
</tr>
<tr>
<td><div id="police3">---</div></td>
<td><div id="police3">---</div></td>
<td><div id="police3">---</div></td>
</tr>
<tr>
<td><div id="police3">Octobre</div></td>
</tr>
<tr>
<td><div id="police1">07/10</div></td>
<td><div id="police1">Dan Racing</div></td>
<td><div id="police1">21h00</div></td>
<td><div id="police2">[ NEW ]</div></td>
</tr>
<tr>
<td><div id="police1">??/10</div></td>
<td><div id="police1">Festival Emergenza</div></td>
<td><div id="police1">www.emergenza.net</div></td>
<td><div id="police2">[ NEW ]</div></td>
</tr>
<tr>
<td><div id="police3">---</div></td>
<td><div id="police3">---</div></td>
<td><div id="police3">---</div></td>
</tr>
<tr>
<td><div id="police3">Novembre</div></td>
</tr>
<tr>
<td><div id="police1">11/11</div></td>
<td><div id="police1">Dan Racing</div></td>
<td><div id="police1">21h00</div></td>
<td><div id="police2">[ NEW ]</div></td>
</tr>
</table>


</html>

Modifié par lecourtier (17 Sep 2005 - 09:09)
Bonjour,
si tu veux faire une construction comme ça utilise plutôt une classe.

Si le style doit s'appliquer à toutes les cellules d'un tableau, il y a plus simple comme notation.
genre :
td { ... }
ou
#tableau1 td { ... }
par exemple.

P.S. Ton titre n'est pas très explicite, si tu pouvais le changer, ça serait pas mal.
Modérateur
salut,
c'est peut-etre plus simple comme ça ::
ex: 

table th div, table td div {le css pour police 1 par defaut partout}
table td div.p2  {le css pour police 2 qui ecrase la valeur par defaut}
table td div.p3  {le css pour police 3 qui ecrase la valeur par defaut}

et le html comme ça par exemple :

<tr>
<td><div class="p3">Octobre</div></td>
</tr>
<tr>
<td><div>07/10</div></td>
<td><div>Dan Racing</div></td>
<td><div>21h00</div></td>
<td><div class="p2">[ NEW ]</div></td>
</tr>


sauf erreur de ma part, cela me parait plus aisé a gerer
a plus
Modifié par gcyrillus (17 Sep 2005 - 01:06)
Bonjour,

En premier lieu, merci de corriger le titre de ton sujet pour qu'il soit plus explicite (exemple: gérer plusieurs polices dans un tableau ?)

Ensuite, les id # ne peuvent pas être répétées. Une id est unique dans le document HTML. Ici, tu dois utiliser des classes.

Enfin, tu peux jouer sur l'héritage des propriétés dans le tableau, et indiquer simplement tes polices par lignes, et non par cellules.

<table border=0 CELLSPACING=10 [b]class="police3"[/b]>
<tr>
<th>Date</th>
<th>Lieu</th>
<th>Informations</th>
</tr>
<tr>
<td>---</td>
<td>---</td>
<td>---</td>
</tr>
<tr>
<td>Septembre</td>
</tr>
[b]<tr class="police1">[/b]
<td>10/09</td>
<td>Balthazar</td>
<td>21h00</td>
</tr>
<tr>
<td>---</td>
<td>---</td>
<td>---</td>
</tr>
<tr>
<td>Octobre</td>
</tr>
[b]<tr class="police1">[/b]
<td>07/10</div></td>
<td>Dan Racing</div></td>
<td>21h00</div></td>
[b]<td class="police2">[/b][ NEW ]</td>
</tr>
[b]<tr class="police1">[/b]
<td>??/10</td>
<td>Festival Emergenza</td>
<td>www.emergenza.net</td>
[b]<td class="police2">[/b][ NEW ]</td>
</tr>
<tr>
<td>---</td>
<td>---</td>
<td>---</td>
</tr>
<tr>
<td>Novembre</td>
</tr>
[b]<tr class="police1">[/b]
<td>11/11</td>
<td>Dan Racing</td>
<td>21h00</td>
[b]<td class="police2">[/b][ NEW ]</td>
</tr>
</table>


Ici:
- police3 est appliquée par défaut à l'ensemble du tableau
- police 1 est appliquée aux éléments <tr> et héritée par les éléments <td> concernés
- police2 (la moins utilisée) est appliquée directement aux cellules <td> concernées
- les <div> a priori inutiles peuvent être supprimés
Modifié par Laurent Denis (17 Sep 2005 - 06:28)
Laurent Denis, j'ai essayé ton code, mais il ne marche pas .... Smiley ohwell
voila un extrait de ce que j'ai fais :
( c'est vraiment dommage car je trouvais cette solution vraiment simple... )

 <tr class="police1">
<td>10/09</td>
<td>Balthazar</td>
<td>21h00</td>
</tr>
<tr class="police3">
<td>---</td>
<td>---</td>
<td>---</td>
</tr>
<tr>
<td class="police3">Octobre</td>
</tr>
ha ba si ... en fait ca marche.

L'erreur que j'ai fais ?

dans le css, mes classe etait :
#police1
or, maintenant c'est :
.police1

je vous tiens au courant, merci a tous ! Smiley lol
Sujet clos
Aller à