28220 sujets

CSS et mise en forme, CSS3

Css et mise en forme de tableau

bonjour à tous!

alors voici ma question:

j'ai un tableau representant un planning.

1 ere ligne lundi mardi....

2eme ligne le nom d'une activité

3eme ligne le nom de l'annimateur de l'activité

4 eme ligne l'horraire de l'activité (ex:9h30 - 10h15)

et ainsi de suite pour balayer toute la journée

comme chaque ligne aura ses caractèristiques (ex pas de bordure supérieur) dans ma css j'ai créé un .activité un .animateur et un .horraire

je pensais mettre dans mon code <td class = "activité"> par exemple mais vu que j'ai 7 colonnes (7 jours) je dois taper 7 fois ce code par ligne?

quelle est la meilleur methode à employer pour un cas de figure comme celui decrit plus haut?

merci d'avance!
Modifié par ayiore (15 Nov 2005 - 19:35)
Un très bon atricle sur la mise forme de tableaux en CSS ici

Pour ta question, si tu as des styles différents pour chaque section de ton tableau, alors oui tu devras déclarer une classe par section.

Mais tout dépend des styles que tu veux appliquer.

Par exemple, si un style doit s'appliquer à chaque <td> d'une ligne <tr class="ligne1">, tu peux mettre un style comme ceci :


#ligne1 td{
/*...attributs...*/
}

Modifié par yyoupla (15 Nov 2005 - 20:11)
petite question complémentaire si j'applique un style pour toute la ligne avec la methode decrite ci dessus et que j'ajoute un style pour une des cellules de cette ligne. quel style sera affiché pour cette cellule celui de la ligne ou celui de la cellule?

si c'est celui de la cellule est ce correcte comme methode?
tout dépend de l'ordre dans lequel tu déclares tes CSS.
si tu mets
#ligne1 td {
/*...attributs...*/
}
#ligne1 td#cellulespeciale {
/*...autres attributs...*/
}
alors ta cellulespeciale va prendre d'abord les premiers styles puis les seconds en remplacant le cas échéant.

Conseil : un article sur la cascade css et la portée des selecteurs ici
Modifié par yyoupla (16 Nov 2005 - 19:57)
Salut,

Juste pour rectifier, avec l'exemple CSS donné par yyoupla ce serait plutôt :


<td id="cellulespeciale">


Histoire de ne pas confondre id (#) et class (.)

Smiley cligne
Modifié par Nilpohc (18 Nov 2005 - 00:52)
alors j'ai employé la methode decrite ci dessus et ça fonctionne bien!

mais il me reste un souci!

donc j'ai toujours 3 type de ligne avec des styles differents: .horaire .activité .prof

j'ai egalement des cellules vides que je fusionne artificiellement pour qu'elles aient la même couleur de fond et sans bordures en utilisant 

.activité td.cellulespeciale,.prof td.cellulespeciale,.horaire td.cellulespeciale {
	border-width: 0px;
	background-color: #FFFFFF;
}


ce qui me donne dans mon html un truc comme ça!

<table>
<tr>
	<th>Lundi</th>
	<th>Mardi</th>
	<th>mercredi</th>
	<th>jeudi</th>
	<th>Vendredi</th>
	<th>Samedi</th>
	<th>Dimanche</th>
</tr>
<tr class="cours">
    <td>Body Sculpt</td>
    <td>LIA</td>
    <td>Step</td>
    <td> </td>
    <td>Gym Douce</td>
    <td class="cellulespeciales"> </td>
    <td class="cellulespeciales"> </td>
</tr>
...


le problème c'est que du coup la bordure exterieur de mon tableau disparait
aux endroits ou il y a des "cellulesspeciales" puisque je les ai defini comme n'ayant pas de bordures.

je croyais pourtant que la bordure du tableau aurait la "priorité"

comment puis je remedier à ce problème en evitant d'avoir à créer deux types de "cellulesspeciales" une sans bordure et une avec bordure exterieur?
Sujet clos
Aller à