Certaines données sont simplement mieux affichées dans un tableau, mais cela ne signifie pas qu’elles doivent être fades en apparence. Un tableau peut – et doit – être stylisé de manière à ajouter au contenu tout en complétant l’aspect général du site. Bien que le style des tables puisse sembler intimidant, lorsque vous les décomposez à l’essentiel, leur conception n’est pas si compliquée.
Table des matières
Comprendre toutes les pièces
Lorsque vous examinez les parties principales de la plupart des tableaux, elles peuvent être divisées en quatre parties:
- Tableau
– C’est le conteneur qui contient tout le contenu.- En-têtes
– Ce sont les conteneurs horizontaux à l’intérieur de la table. Lorsque les lignes d’un tableau sont colorées – souvent avec des couleurs alternées – ce sont les balises tr qui sont ciblées.- Colonnes
suivie du contenu de chaque celluleCréer le look
Balise de table
Vous pouvez créer l’apparence que vous souhaitez en utilisant CSS au lieu de HTML. En commençant par la table elle-même, donnez à la table un ID – #YourTable. C’est ici que vous pouvez définir les styles de police ainsi que la largeur globale du tableau. Par exemple,
#Ta table {
famille de polices: « Trebuchet MS », Arial, Helvetica, sans-serif;
largeur: 90%;
border-collapse: effondrement;
couleur: # 000000;
}
La propriété border-collapse détermine si les bordures sont réduites en une seule bordure ou séparées. D’une manière générale, il est préférable de les réduire.
Données de table et en-têtes
Ensuite, stylisez la taille de la police et toute bordure ou remplissage de cellule pour chaque ligne.
# YourTable td, # YourTable th {
taille de la police: 12px;
bordure: 1px solide # ff7f00;
rembourrage: 3px 6px 2px 6px;
}
Couleurs de ligne
# YourTable tr.alternate td {
couleur de fond: # ffaa56;
}
En-têtes
Faites ressortir l’en-tête – ou la ligne de titre – en donnant à la police une taille différente ou à la ligne une couleur différente. Utilisez n’importe quelle combinaison qui montre clairement à l’utilisateur que le texte identifie ce qui se trouve à l’intérieur des colonnes.
#YourTable th {
taille de la police: 16px;
text-align: gauche;
rembourrage haut: 7px;
rembourrage bas: 6px;
couleur de fond: # ff7f00;
}
CSS et HTML complets
Voici à quoi ressemble votre style quand tout est réuni.
#Ta table {
famille de polices: « Trebuchet MS », Arial, Helvetica, sans-serif;
largeur: 90%;
border-collapse: effondrement;
couleur: # 000000;
}
#YourTable td, #YourTable th {
taille de la police: 12px;
bordure: 1px solide # ff7f00;
rembourrage: 3px 6px 2px 6px;
}
#YourTable th {
taille de la police: 16px;
text-align: gauche;
rembourrage haut: 7px;
rembourrage bas: 6px;
couleur de fond: # ff7f00;
}
#YourTable tr. alternative td {
couleur de fond: # ffaa56;
}
– Ce sont des en-têtes de colonnes; lorsqu’ils ne sont pas stylés, ils apparaissent en gras. - Lignes
– La balise column représente les données de table, ce qui peut être déroutant pour certains. Lorsque vous regardez les balises d’une table, il y aura une ligne
. Chacune de ces cellules fait partie d’une colonne différente. Ainsi, une ligne typique ressemble à ceci: Ligne 1, colonne 1 Ligne 1, colonne 2 En-tête un En-tête deux En-tête trois Ligne 1, cellule 1 Ligne 1, cellule 2 Ligne 1, cellule 3 Ligne 2, cellule 1 Ligne 2, cellule 2 Ligne 2, cellule 3 Ligne 3, cellule 1 Ligne 3, cellule 2 Ligne 3, cellule 3 Ligne 4, cellule 1 Ligne 4, cellule 2 Ligne 4, cellule 3 Circonstances spéciales
La façon la plus simple et la plus courante d’embellir un tableau consiste à alterner les couleurs des lignes, car cela simplifie généralement la lecture du contenu. Cependant, il existe d’autres méthodes pour créer des tableaux élégants. Voici d’autres moyens courants d’améliorer l’apparence d’un tableau:
Image de fond
Des images d’arrière-plan peuvent être ajoutées pour créer un filigrane ou servir d’arrière-plan pour l’ensemble du tableau. Une image est attachée au tableau à l’aide de la image de fond attribut. Rappelez-vous, cependant, que si une couleur d’arrière-plan est également utilisée, elle remplacera – ou bloquera – l’image d’être vue.
#Ta table {
arrière-plan: url (« image.jpg ») sans répétition;
}
Coins ronds
C’est une façon de plus en plus populaire de pimenter une table. Vous pouvez arrondir un ou tous les coins autant ou aussi peu que vous le souhaitez. Pour arrondir les deux coins supérieurs:
#YourTable th: first-child {
-moz-border-radius: 6px 0 0 0;
-webkit-border-radius: 6px 0 0 0;
rayon de la bordure: 6px 0 0 0;
}
th: dernier-enfant {
-moz-border-radius: 0 6px 0 0;
-webkit-border-radius: 0 6px 0 0;
rayon de la bordure: 0 6px 0 0;
}
th: enfant unique {
-moz-border-radius: 6px 6px 0 0;
-Rayon de la bordure du kit Web: 6px 6px 0 0;
rayon de la bordure: 6px 6px 0 0;
}
Boîte ombre
Vous pouvez donner au tableau une ombre portée pour lui donner l’impression de sortir de la page. Ceci est accompli avec le boîte ombre attribut. Les deux premiers nombres utilisés pour le style contrôlent la position verticale et horizontale de l’ombre. Ils sont obligatoires, mais tous les autres attributs sont facultatifs. La troisième valeur contrôle le degré de flou de l’ombre et la quatrième valeur définit la taille de l’ombre. Vous pouvez également choisir la couleur de l’ombre.
Pour placer une ombre sur votre table avec une ombre grise, utilisez ce code:
#Ta table {
boîte-ombre: 5px 5px 4px 1px #ccc;
}
Souvenez-vous du but
Créer une table bien conçue et fonctionnelle va bien au-delà du style de la table. Lorsque les utilisateurs viennent sur votre site pour obtenir des informations, c’est le contenu qui les intéresse. La première règle pour concevoir un tableau de qualité est de s’assurer que les informations sont présentées de manière logique et facile à comprendre. Utiliser une conception «intelligente» n’aura guère de valeur pour les utilisateurs s’ils sont incapables de trouver, de comprendre ou d’interpréter les données que votre table affiche.
Lisez plus d’astuces sur le design web ici, et n’oubliez pas de partager l’article sur Facebook !
