Les tableaux HTML constituent l’épine dorsale des données structurées sur le Web. Ils ne sont plus uniquement destinés aux feuilles de calcul. Vous pouvez les façonner, les colorer et contrôler exactement leur respiration dans une fenêtre de navigateur. La méthode à l’ancienne repose sur des attributs de présentation spécifiques. Ils fonctionnent. Ils sont directs. Vous n’avez pas besoin de frameworks CSS complexes pour obtenir une mise en page décente.
Changer la couleur d’arrière-plan du tableau
Commencez par une vue d’ensemble. Vous voulez que toute la grille apparaisse ? Vous n’avez pas besoin d’une feuille de style distincte. Placez simplement un attribut bgcolor sur la balise d’ouverture
.
Exemple :
Cela prépare le terrain. Chaque cellule hérite de cette ambiance, sauf si vous la remplacez.
Vous pouvez également zoomer. Colorez une seule ligne ou une seule cellule spécifique. Déposez bgcolor="color" dans la balise
ou
| .
Exemple :
|
C’est un petit détail. Mais cela change la façon dont l’œil se déplace à travers les données.
Taille du tableau
Les navigateurs sont paresseux par défaut. Ils agrandissent les lignes et les colonnes pour les adapter au contenu. Si vos données sont courtes, le tableau s’étire pour remplir la fenêtre. Si c’est long, ça devient long.
Parfois, vous voulez avoir le contrôle. Vous voulez des dimensions fixes.
Ajoutez width et height à la balise de départ
. Vous pouvez utiliser des pixels ou des pourcentages.
Exemple :
Les pixels vous imposent des limites strictes. Les pourcentages laissent la table respirer avec la fenêtre. Celui que vous choisissez dépend de vos objectifs de conception.
Vous pouvez également verrouiller des cellules individuelles. Ajoutez width="value" à une balise
ou
| . Cela remplace le paramètre global pour cet endroit spécifique.
Expérience. Essayez une valeur de pixel. Essayez ensuite un pourcentage. Voyez comment il se brise ou tient ensemble sur différents écrans.
Remplissage de cellules
L’espace est une conception. Plus précisément, l’espace entre le bord d’une cellule et le texte à l’intérieur.
C’est du « cellpadding ». Cela prend une valeur de pixel.
Utilisez-le dans la balise de départ
.
Exemple 1 :
Exemple 2 :
Cinq pixels, c’est serré. Quinze, c’est aérien. Le contenu semble différent. Il a l’air plus propre avec plus de rembourrage.
Espacement des cellules
Ensuite, il y a l’espace entre les cellules.
C’est « l’espacement des cellules ». Il faut également une valeur de pixel.
Ajoutez-le à la balise
.
Exemple 1 :
Exemple 2 :
Un petit espacement des cellules donne l’impression que la grille est dense. Une grande liste de contrôle ressemble à une liste de contrôle.
En-têtes de tableau
Les données ont besoin d’être structurées. Les en-têtes fournissent cela.
Pour faire ressortir une colonne ou une ligne comme en-tête, remplacez «
» par «
| » dans la première ligne.
Il met automatiquement le texte en gras. Cela le centre aussi.
Exemple :
| Colonne 1 |
Colonne 2 |
| A |
B |
| C |
| | |
