Comment styliser des tables à l'aide de CSS
Ce blog démontrera la procédure de style les tables en utilisant CSS. Alors, commençons!
Que sont les tables en HTML
les tables sont considérés comme un élément essentiel d'un Html document. Il peut être créé en utilisant le « Certaines propriétés CSS importantes et de base sont données ci-dessous qui aident à changer le style de table: Nous allons maintenant discuter de toutes les propriétés CSS fournies ci-dessus pour styliser des tables HTML avec des exemples appropriés. Tables de style utilisant la propriété de la bordure CSS CSS propose une propriété «frontière» utilisée pour ajouter des frontières dans une table. Pour ajouter une bordure, vous pouvez adopter l'exemple suivant. Exemple Sortir Border de la table de style utilisant la largeur CSS Dans l'exemple précédent, vous avez vu la méthode pour insérer une bordure autour d'une table dans CSS. Le donné "frontière"La propriété ne spécifie pas la largeur, car vous voudrez peut-être l'ajuster en fonction de vos exigences. Pour ce faire, consultez l'exemple fourni. Exemple Pleine largeur de la table Sortir Tables de style utilisant la propriété CSS Border-Collapset Comme vous pouvez le voir, le tableau créé dans l'exemple donné ci-dessus a une bordure distincte pour chaque ligne et colonne qui pourrait ne pas donner un aperçu décent sur un site Web. Cependant, CSS vous permet de effondrement le les frontières en une seule bordure en utilisant le "bordel à la frontière" propriété. Exemple Les frontières de la table s'effondrent Sortir Table de style utilisant la largeur et les propriétés de hauteur CSS Dans CSS, le «largeur" et "hauteur«Les propriétés sont principalement utilisées pour changer les matrices de table. Par exemple, dans l'exemple suivant, nous définirons le tableau largeur comme "90%" et le hauteur de la cellule d'en-tête de table comme «90px»: Tables de style utilisant CSS Exemple pour régler la hauteur et la largeur: Sortir Style Table Cellules Alignement à l'aide de la propriété CSS Vertical-Align CSS "alignement vertical«La propriété est utilisée pour aligner le texte dans la cellule de table en haut, en bas ou au milieu, mais vous devez sélectionner si vous devez aligner la ligne ou les colonnes verticalement. Vérifions l'exemple fourni: Tables de style en HTML Exemple de réglage de l'alignement vertical L'exemple ci-dessus alignera verticalement le texte de la cellule de la table en bas: Alignement des cellules de table de style à l'aide de la propriété CSS Horizontal-Align CSS offre "objet horizontal»Propriété dans le but d'aligner le texte horizontalement. Cette propriété peut aider à aligner le texte à gauche, à droite ou au centre: Tables de style en HTML Exemple de définition de l'alignement horizontal L'exemple donné ci-dessus alignera le texte ajouté dans la cellule de table par rapport à bas: Tables de style utilisant la propriété de rembourrage CSS Le "rembourrage»La propriété CSS est utilisée pour contrôler les espaces entre les cellules de texte et la bordure. Il est principalement utilisé pour le Exemple Tables de style en HTML Exemple d'utilisation de la propriété de rembourrage Les images fournies ci-dessous signifient que nous avons réussi à ajouter un rembourrage «20px» entre la bordure et le texte cellulaire: Tables de style utilisant la propriété CSS Background-Color CSS vous permet de définir les couleurs séparément pour chaque table à chaque colonne, ligne ou cellule. Par exemple, le tableau suivant contiendra le arrière-plan de l'en-tête de table "e" comme "orange" couleur et tout "nième enfant (même)"Même le nombre de lignes"tr" aura "gris" Couleur de l'arrière plan: En-tête de table coloré Sortir Conclusion Pour Style html Tableaux, vous pouvez utiliser différentes propriétés CSS Pour ajouter et ajuster les frontières, créant des frontières d'effondrement, en ajustant la largeur et la hauteur de la table, en alignant le texte horizontalement ou verticalement, en ajoutant du rembourrage ou de la personnalisation des lignes, des colonnes ou des cellules avec les couleurs spécifiées. Ce blog a démontré l'utilisation de différentes propriétés CSS pour les tables de style pour une page Web. Essayez-les et profitez de style tables HTML d'une manière nouvelle! "Tag et les balises de sous-table"
"Pour les lignes," «Pour les colonnes, et« ”Pour les en-têtes de table. Toutes les balises mentionnées sont la balise de tables de base; Cependant, les propriétés de style CSS peuvent être utilisées pour les tables de style.
L'exemple ci-dessous affichera un solide "noir"Border avec"1px"Largeur pour la table entière"tableau", Headers"e", Et des colonnes"TD»:Professeur Étudiant Alice Marquer Lui Griffon
Dans cet exemple, nous créerons une table HTML et le styliserons d'une manière qu'il mettra en vedette l'intégralité de la numérisation en pleine largeur "100%»:Professeur Étudiant Alice Marquer Lui Griffon
Maintenant, nous utiliserons le «bordel à la frontière”Propriété pour styliser la table créée avec une seule bordure pour les lignes et les colonnes:Professeur Étudiant Alice Marquer Lui Griffon
Professeur Étudiant Alice Marquer Lui Griffon
Professeur Étudiant Alice Marquer Lui Griffon
Professeur Étudiant Alice Marquer Lui Griffon
et éléments. Professeur Étudiant Alice Marquer Lui Griffon
Professeur Étudiant Alice Marquer Lui Griffon