Appliquer un style différent à chaque cellule d'un tableau

**michel71** · 01/09/2018, 17h38

Bonjour, encore moi...

Est-il possible d'appliquer un style css différent à chaque cellule d'un tableau

par exemple dans la cellule qui contient un lien :<dt> avoir le lien en couleur rouge, taille 10px </dt>
dans une autre cellule qui contient un titre :<dt> en gras, taille 14px et couleur bleu </dt>
puis une cellule qui contient du texte :<dt> en normal, taille 12px et couleur noir </dt>

je sais je suis pénible

Merci

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<table width="620">
			<caption>La légende du tableau</caption>
				  <tr>
					<td width="60"><img src='.$image.'/></td>
					<td>attente texte</td>
					<td width="60"> '.$date[$i].'</td>
				  </tr>
				  <tr>
					<td>attente texte</td>
					<td width="500"><font size="14"> '.$titre[$i].'</font></td>
					<td>attente texte</td>
				  </tr>
				  <tr>
					<td colspan="2" width="60"><a href="liste_jour.php">Lire la suite....</a></td>
				  </tr>
			</table>'

**ProgElecT** · 01/09/2018, 18h37

Salut

Tu peux t'inspirer de ce

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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
37
38
39
40
<!DOCTYPE html>
<html>
    <head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
        <title>Essaisde style elements table</title>
		<style>
                        *{ margin:0 0 0 0; padding:0 0 0 0;font-size: 16px;} /* selection s'appliquant à tous les éléments */
                        td {  /* selection par elements td*/
                                font-size: 0,75em;
                        }
                        td a {  /* selection par elements 'a' enfant de td*/
                                color:red;
                                font-size: 0.625em;
                        }
                        .titre {  /* selection par l'ID  */
                                font-size: 0,875em;
                                font-weight: bold;
                                color:blue;
                        }
                </style>
	</head>
	<body>
		<table width="620">
			<caption>La légende du tableau</caption>
				  <tr>
					<td width="60"><img src="geotrouvepas.gif"/></td>
					<td>attente texte</td>
					<td width="60">01/09/2018</td>
				  </tr>
				  <tr>
					<td>attente texte</td>
					<td width="500" class="titre">ICI le titre</td>
					<td>attente texte</td>
				  </tr>
				  <tr>
					<td colspan="2" width="60"><a href="liste_jour.php">Lire la suite....</a></td>
				  </tr>
		</table>
	</body>
</html>

**Manequin** · 01/09/2018, 19h10

Bonsoir, il suffit soit :
1) d'appliquer un style CSS à chaque balise <td></td>.
2) utiliser des class dans chaque balise <td></td> et utiliser un fichier externe CSS(recommandé).

Cordialement.

Invité · 02/09/2018, 14h45

Bonjour,

Commence par avoir une structure HTML saine : Les tableaux (XHTML & CSS)

Ensuite :
1- comme on t'a montré, les balises peuvent être stylées directement : table td a {...},
2- on peut ajouter une ou plusieurs classes aux td : <td class="truc"> : table td.truc {...},
3- ou, pour les titres, leur ajouter une balise <h5>, qu'il suffit alors de styler : table td h5 {...},

Appliquer un style différent à chaque cellule d'un tableau

Tableau en CSS

Vue hybride

Discussions similaires

Partager

Partager