Comment styliser un tableau avec CSS

Comment Styliser Un Tableau Avec Css



Les tableaux sont l'outil le plus courant et le plus efficace pour représenter les données de manière organisée. Autrefois, avant CSS, le L'élément a été utilisé pour créer des mises en page de conception riches. Mais de nos jours, les mises en page sont créées en utilisant plusieurs autres propriétés CSS. Plus précisément, l'élément HTML '
' est utilisé pour créer un tableau Web, qui peut être stylisé davantage en appliquant différentes propriétés CSS.

Cette étude guidera les tables de style avec CSS.

Comment styliser un tableau avec CSS ?

Pour appliquer des styles au tableau, nous allons suivre la série d'étapes indiquées ci-dessous.





Étape 1 : créer un tableau en HTML



< table >
< légende > Informations étudiants < / légende >
< tête >
< tr >
< e > Nom < / e >
< e > Cours < / e >
< e > Des marques < / e >
< / tr >
< / tête >
< le corps >
< tr >
< td > William < / td >
< td > La mise en réseau < / td >
< td > 89 < / td >
< / tr >
< tr >
< td > Jack < / td >
< td > Introduction au C++ < / td >
< td > 97 < / td >
< / tr >
< tr >
< td > Joseph < / td >
< td > Introduction à Java < / td >
< td > 77 < / td >
< / tr >
< / le corps >
< / table >

Pour créer un tableau en HTML, les éléments HTML suivants sont utilisés :



  • '
” est utilisé pour créer un tableau en HTML.
  • ' ” est utilisé pour ajouter une légende au tableau.
  • ' ' est utilisé pour spécifier l'en-tête du tableau, qui contient généralement les en-têtes.
  • '
    • ” est utilisé pour la ligne d'ajout.
  • '
    • ” spécifie la partie corps du tableau.

    La table créée ressemble actuellement à ceci :



    Avançons pour voir comment styliser ce tableau.



    Étape 2 : Style de l'élément 'corps'

    corps {
    famille de polices : Verdana, Genève, Tahoma, sans empattement ;
    Contexte- Couleur : RVB ( 233 , 233 , 233 ) ;
    }

    L'élément est appliqué avec les propriétés de style CSS suivantes :

    • ' famille de polices « propriété avec la valeur » Verdana, Genève, Tahoma, sans empattement ” est utilisé pour appliquer la police prise en charge par le navigateur. Si le navigateur ne prend pas en charge le premier style de police, l'autre sera utilisé.
    • ' Couleur de l'arrière plan ” définit la couleur d'arrière-plan de l'élément.

    Étape 3 : styler l'élément 'légende'

    légende {
    Police de caractère- Taille : 25 pixels ;
    texte- aligner : centre;
    Contexte- Couleur : #1C6758;
    Couleur : soie de maïs;
    }

    L'élément

    ” précisez le contenu de l'en-tête.
  • '
    • est stylisé comme suit :

    • ' taille de police ” La propriété est utilisée pour le réglage de la taille de la police.
    • ' aligner le texte ” propriété spécifie l'alignement du texte de l'élément.
    • ' Couleur ” fait référence à la couleur de police de l'élément.

    Voici la sortie du code fourni ci-dessus :

    Étape 4 : Ajouter une bordure au tableau
    Le ' frontière ” La propriété est utilisée pour ajouter une bordure autour de l'élément. Il s'agit d'une propriété abrégée qui spécifie la largeur, le style et la couleur de la bordure.

    Appliquons la bordure, ainsi que le rembourrage et la marge au tableau :

    table, th, td {
    frontière : 2px solide #1C6758;
    rembourrage : 1px 6px ;
    marge : automatique ;
    }

    Ici:

    • ' frontière ” La propriété ajuste la bordure autour du tableau en spécifiant la largeur, le style et la couleur de la bordure.
    • ' rembourrage ” spécifie l'espace autour du contenu de l'élément, où la première valeur définit l'espace en haut et en bas et la seconde valeur ajoute de l'espace sur les côtés droit-gauche du contenu.
    • ' marge « propriété avec la valeur » auto ” ajoute un espace égal autour de l'élément.

    Production

    Noter : Si nous ne voulons pas d'espaces entre les bordures du tableau, utilisez la propriété border-collapse.

    Étape 5 : réduire l'espacement des bordures du tableau
    Les espaces entre les bordures du tableau peuvent être supprimés en utilisant le ' border-collapse ” propriété avec la valeur “collapse” :

    border-collapse : effondrement ;

    Étape 6 : Ajustez la taille du tableau
    Voyons comment ajuster la taille du tableau :

    tête e {
    largeur : 160 pixels ;
    }

    Le ' largeur ” propriété avec l'élément

    ajustera automatiquement la taille de la table en fonction de celle-ci ::

    Nous pouvons également appliquer des styles à la cellule de tableau spécifique. Discutons-en !

    Étape 7 : styler des cellules de tableau spécifiques
    Pour styliser la cellule de tableau spécifique, spécifiez le nom de classe de cette cellule particulière. Par exemple, le code ci-dessous représente que la troisième cellule de la deuxième ligne se voit attribuer un nom de classe ' surligner ” :

    < td classe = 'surligner' > 99 < / td >

    Maintenant, accédez à la cellule en utilisant le nom de la classe dans le fichier CSS :

    .surligner {
    Contexte- Couleur : #0f90d5;
    }

    Le ' .surligner ” fait référence à la surbrillance de la classe de l'élément

    		. Cet élément est appliqué avec le ' Couleur de l'arrière plan ” propriété pour spécifier la couleur de l'arrière-plan.

    Comme nous pouvons le voir, la cellule de tableau spécifiée est stylée avec succès :

    Étape 8 : Définissez la famille de polices et la taille du tableau

    table {
    famille de polices : cursive ;
    Police de caractère- Taille : 18 pixels ;
    texte- aligner : centre;
    }

    Les propriétés CSS suivantes sont appliquées à l'élément table :

    • ' famille de polices ” définit le style de police de l'élément.
    • ' taille de police ” La propriété est utilisée pour le réglage de la police de l'élément.
    • ' aligner le texte ” La propriété est utilisée pour ajuster l'alignement du texte.

    Voici la sortie :

    Étape 9 : colorer les rangées dans l'ordre
    Il est également permis d'appliquer des styles à des lignes ou des colonnes spécifiques. Par exemple, les lignes paires sont stylées en suivant le format ci-dessous :

    \
    tbody tr:nth-enfant ( même ) {
    Contexte- Couleur : #FFB200;
    }

    Ici:

    • Le ' :nième-enfant(pair) ” Le pseudo sélecteur est utilisé pour prendre un argument qui spécifie le modèle sur lequel le style doit être appliqué.
    • ' Couleur de l'arrière plan ” est utilisée pour définir la couleur d'arrière-plan de l'élément.

    On peut observer que la couleur de fond est bien appliquée aux lignes paires :

    Il s'agissait de styliser les tables avec CSS

    Conclusion

    Les tableaux sont un outil important pour organiser les données. Le tableau peut être créé en utilisant les éléments HTML

    , et d'autres éléments. Plusieurs propriétés CSS sont utilisées pour styliser le tableau, telles que la bordure, la propriété background-color, la propriété font-family et bien d'autres. Pour une meilleure compréhension, cet article a expliqué une procédure étape par étape pour styliser un tableau avec CSS.

    Autre

    Catégorie

    Articles Populaires

    Quelle est la différence entre AWS Lambda et AWS Amplify ?

    Comment obtenir le premier élément d'un tableau en PHP ?

    Exemple de code de fichier batch Windows

    Comment interroger un serveur DNS sous Linux

    Variable membre en C++

    Comment partager votre écran sur Discord Mobile [Guide]

    Mot-clé automatique en C

    Comment fusionner un tag Git sur une branche ?

    C# Opérateur OU logique conditionnel

    Comment réparer le statut systemctl affichant un état dégradé

    Docker sans racine

    Comment ajouter Xbox Live à Discord

    Comment modifier les paramètres proxy dans Chrome ?

    Comment construire un circuit amplificateur MOSFET à l'aide d'un MOSFET amélioré

    Comment utiliser l’opération d’expansion dans PyTorch ?

    Comment installer PostgresML sur Rocky Linux 9

    Comment sélectionner un commit d’une branche à une autre ?

    Résolu : Windows 10 ne s'arrêtera pas (bloqué) après la mise à jour 2022

    Qu'est-ce qu'un bon calculateur de ligne de commande sur Linux Mint 21

    Comment déployer une API Node.js sans serveur avec AWS API Gateway ?

    ,