HTML, CSS et class

Version imprimable

HTML, CSS et class

Bonjour,

J'essaye d'utiliser les feuilles de style sur une page HTML par l'intermédiaire d'une classe sur une balise TABLE mais ca n'a pas l'air de fonctionner... et je ne vois pas pourquoi . La feuille de style se trouve bien dans le même répertoire que la page html.

Feuille HTML (je n'ai mis qu'une partie)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<HTML>
<HEAD>
<LINK REL="stylesheet" HREF="cssReport.css" TYPE="text/css">
</HEAD>
<TABLE  class='table' CELLSPACING='0'  valign='top'  border='0'  width='650'  heigth='3500' >
<TR >
<TD align=center>
<br><br><br><br><h2>Répartition des passages des véhicules <br>Rue du croisille entre 0 et 6h, du 06 Février  au 14 Mars 2008<br> par fourchettes de vitesses.</h2><br>
</TD>
 
</TR>
<TR >
<TD align=center>
<br><br><TABLE  class='tableReport'  CELLSPACING='0'  valign='top' >
<TH colspan =3 CLASS='entete'>
Tableau Récapitulatif
</TH>
<TR >
<TD>
Tranches Horaires
</TD>
<TD>
Nombre de Vehicules
</TD>
<TD>
Pourcentage
</TD>
 
</TR>
<TR >
<TD>
00 à 30 km/h
</TD>
<TD>... </TABLE>
</HTML>

Feuille de style :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
.table{
border-style:solid; 
border-width:0px; 
border-color:#828282;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8pt;
font-weight: bold;
color: black;
}
 
.tableReport{
border-style:solid; 
border-width:1px; 
border-color:#828282;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8pt;
font-weight: bold;
color: red;
}
 
.entete{
background-color: #b4b4b4;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12pt;
font-weight: bold;
color: black;
}

Merci

22/04/2008, 10h32
kaiser59

Salut,

Met déjà ton contenu (table) entre les balises

Code:

<body>...</body>

;)
22/04/2008, 13h44
Siguillaume

Et qu'est ce qui ne marche pas?
22/04/2008, 15h38
mcdelay

Par exemple, les bodures de tableReport n'apparaissent pas. Je sais que je peux utiliser BODER directement dans le tag <table> , mais je souhaiterais passer dans les feuilles de style. Le tag BOBY n'a rien changé.

Le même code en indenté et avec les qq balises qui manquent en fin, et en retirant tout ce qui est inutile : tu déclares entre autre ta bordure dans ta balise table alors que tu la définies également dans ton css.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
 
<TABLE  class='table' border='1px'>
	<TR >
		<TD align=center>
			<br/>
			<h2>Répartition des passages des véhicules 
			<br/>Rue du croisille entre 0 et 6h, du 06 Février  au 14 Mars 2008
			<br/> par fourchettes de vitesses.</h2>
		</TD>
	</TR>
	<TR >
		<TD align=center>
			<TABLE  class='tableReport'>
				<TH CLASS='entete' colspan =3 >
					Tableau Récapitulatif
				</TH>
				<TR>
					<TD>
						Tranches Horaires
					</TD>
					<TD>
						Nombre de Vehicules
					</TD>
					<TD>
						Pourcentage
					</TD>
				</TR>
				<TR >
					<TD>
						00 à 30 km/h
					</TD>
				</TR>
			</TABLE>
		</TD>
	</TR>
</TABLE>

Pour ce qui est du css, sans modifier grand chose j'arrive au résultat que tu veux, enfin, je suppose :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
.table{
border:0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8pt;
font-weight: bold;
color: black;
padding:0px;  
vertical-align:top;
border:0;
width:800px;
}
 
.tableReport{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8pt;
font-weight: bold;
color: red;
padding:0px;
vertical-align:top;
width:100%;
}
 
.tableReport td {
	border:1px solid #FFFFFF; 
}
 
.entete{
background-color: #b4b4b4;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12pt;
font-weight: bold;
color: black;
}

22/04/2008, 16h30
Candygirl

Citation:

Envoyé par mcdelay

Je sais que je peux utiliser BODER directement dans le tag <table> , mais je souhaiterais passer dans les feuilles de style.

Si c'est le cas, tu devrais doter ta page d'un doctype afin que les navigateurs l'interprètent en mode standard.

En l'absence du doctype les navigateurs sont en mode quirks et interprètent ta page "à l'ancienne". Certains styles ne sont donc pas appliqués conformément aux recommandations css2.1, particulièrement concernant le stylage des tableaux où certaines règles d'héritage (sauf erreur) ne sont pas appliquées afin de ne pas perturber l'affichage des sites d'époque, montés en tableaux.
22/04/2008, 19h11
Erwan31

Citation:

Envoyé par Candygirl

particulièrement concernant le stylage des tableaux ou certaines règles d'héritage (sauf erreur) ne sont pas appliquées afin de ne pas perturber l'affichage des sites d'époque, montés en tableaux.

En effet, voici une liste assez complète des différences observées en mode de rendu Quirks principalement sur IE6 et IE7.