Geckozone

Bonjour,

Voici mon code HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Annuaire</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="css/a.css" rel="stylesheet" media="screen" type="text/css" />
</head>

<body>
<table summary="Coordonnées" class="annuaire">
<caption>Coordonnées</caption>

<thead>
<th id="societe" abbr="Adresse">Société</th>
<th id="adresse" abbr="Adresse">Adr.</th>
<th id="civilite" abbr="civilite">Civ.</th>
<th id="prenom" abbr="Prénom">Prénom</th>
<th id="nom" abbr="Nom">Nom</th>
<th id="telephone" abbr="Téléphone">Tél.</th>
</thead>
<tfoot>
</tfoot>
<tbody>
<tr>
<td headers="societe">n1</td>
<td headers="adresse">a1</td>
<td headers="civilite">c1</td>
<td headers="prenom">pn1</td>
<td headers="nom">n1</td>
<td headers="telephone">t1</td>
</tr>
<tr>
<td headers="societe">nc2</td>
<td headers="adresse">a2</td>
<td headers="civilite">c2</td>
<td headers="prenom">pn2</td>
<td headers="nom">n2</td>
<td headers="telephone">t2</td>
</tr>
</tbody>
</table>

</body>
</html>

Si j'écris en css

Code : Tout sélectionner

 #telephone
{
color: red;
}

c'est bien le titre de la colonne qui change de couleur. Comment changer les lignes d'une colonne ?

#telephone ne marche que pour un id, donc seul l'entête peux être en rouge.

Pour qu'une case autre chase soit en rouge il faut faire :

<td headers="telephone" class="rouge">t2</td>

.rouge{
color: red;
}

Ceci marche dans Dreamweaver mais pas avec Mozilla et IE

Code : Tout sélectionner

td [headers=telephone]
{
color: red;
}

Logique, pourtant ?

car il faut coler le td[ et non pas td [

OK / Mozilla mais pas IE (méchant !)

avec les guillemets plutôt:

Code : Tout sélectionner

td [headers="telephone"]
{
    color: red;
}

Pour mettre en valeur les colonnes, regarde du coté des éléments <colgroup> et <col>.

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Annuaire</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="css/a.css" rel="stylesheet" media="screen" type="text/css" />
</head>

<body>
<table summary="Coordonnées" class="annuaire">
<caption>Coordonnées</caption>
<col span="5">
<col id="phone">
<thead>
<th id="societe" abbr="Adresse">Société</th>
<th id="adresse" abbr="Adresse">Adr.</th>
<th id="civilite" abbr="civilite">Civ.</th>
<th id="prenom" abbr="Prénom">Prénom</th>
<th id="nom" abbr="Nom">Nom</th>
<th id="telephone" abbr="Téléphone">Tél.</th>
</thead>
<tfoot>
</tfoot>
<tbody>
<tr>
<td headers="societe">n1</td>
<td headers="adresse">a1</td>
<td headers="civilite">c1</td>
<td headers="prenom">pn1</td>
<td headers="nom">n1</td>
<td headers="telephone">t1</td>
</tr>
<tr>
<td headers="societe">nc2</td>
<td headers="adresse">a2</td>
<td headers="civilite">c2</td>
<td headers="prenom">pn2</td>
<td headers="nom">n2</td>
<td headers="telephone">t2</td>
</tr>
</tbody>
</table>

</body>
</html>

et:

Code : Tout sélectionner

col#phone { color: red; }

Mais le style 'color' ne fonctionnera pas dans Mozilla (le background-color fonctionne par contre, depuis les toutes dernières versions).