Style de table CSS - Différentes propriétés avec syntaxe, codes et sortie

Introduction sur le style de table CSS

La raison pour laquelle nous utilisons CSS, bien que nous puissions utiliser des tableaux HTML, est que, dans le tableau HTML, une mise en page basée sur un tableau est souvent plus lente qu’une mise en page CSS équivalente; cela est particulièrement vrai pour les pages qui contiennent beaucoup de contenu. Les tableaux ne doivent pas être utilisés comme aides à la mise en page. Et si nous construisons des tableaux HTML sans styles ni attributs dans le navigateur, ils seront affichés sans aucune bordure. Le style d'un tableau avec CSS peut améliorer son apparence.

Les tables CSS sont assez simples à comprendre et à utiliser. Il suffit de se souvenir des valeurs de propriétés d'affichage CSS correspondantes pour les éléments de table HTML de base. Avec l'aide de CSS, nous sommes capables de créer des tableaux élégants.

Qu'est-ce que le style de tableau CSS?

Un tableau CSS (feuilles de style en cascade) décrit comment disposer un ensemble d'éléments en lignes et en colonnes. Le CSS par défaut appliqué à une table HTML est une table CSS.

• CSS a conçu et repensé la flexibilité.
• Cela signifie qu'une mise en page basée sur CSS garantit que vous placez tous vos styles (c'est-à-dire, des petites modifications aux règles principales) en un seul endroit.
• En modifiant les règles de mise en page que vous définissez dans cette feuille de style, vous affectez chaque page qui s'y réfère.
• La mise en page basée sur CSS apparaît généralement plus rapidement à l'écran et même le téléchargement sera plus rapide que la mise en page basée sur un tableau.

Propriétés de style de tableau CSS

Voici les différentes propriétés des styles de table CSS:

1. Effondrement de la frontière

Il est utilisé pour indiquer si les bordures autour des cellules d'un tableau doivent être séparées ou réduites.

Syntaxe: border-collapse: separate|collapse|initial|inherit;

• Effondrement des bordures : séparé: il est utilisé pour que les cellules adjacentes aient leurs propres bordures indépendantes qui ne sont pas partagées.

Syntaxe

border-collapse: separate;

La valeur par défaut définie sur la propriété border-collapse est distincte. Lorsqu'ils sont séparés, les navigateurs mettent un espace de quelques pixels entre chaque cellule en utilisant la propriété border-spacing.

Code

Production:

• Réduire la bordure: réduire: chaque fois que nous définissons la propriété border-collapse pour réduire, elle supprime l'espace entre les cellules.

Syntaxe

border-collapse: collapse;

Code

Production :

Même si vous supprimez cet espace en définissant l'attribut cellspacing de la balise HTML sur 0, les navigateurs affichent toujours des bordures doubles. Autrement dit, la bordure inférieure d'une cellule apparaîtra au-dessus de la bordure supérieure de la cellule en dessous, provoquant un doublement des limites. La définition de la propriété border-collapse sur collapse élimine à la fois l'espace entre les cellules et ce doublement des limites.

• Border collapse: initial: il est utilisé pour définir la propriété border-collapse à sa valeur par défaut.
• Border collapse: inherit: il est utilisé lorsque la propriété border-collapse hérite de ses éléments parents. Cette propriété ne fonctionne que lorsqu'elle est appliquée à un étiquette.

  Valeurs: effondrement, séparé, initial, hérité;

  2. Espacement des frontières

  Il définit l'espace adjacent aux bordures et le contenu entourant la table. Il est similaire à l'espacement des cellules de la balise

  , sauf qu'il a une deuxième valeur facultative. Cette propriété ne fonctionne que lorsqu'elle est appliquée à un étiquette.

  Syntaxe

  border-spacing: Length|initial|inherit;

  L'espacement des bordures prend généralement une ou deux valeurs de longueur. Dans ce cas, une seule valeur est spécifiée, puis elle définit à la fois l'espacement horizontal et vertical entre les cellules.

  Code

  

  Production:

  

  En cela, si deux valeurs sont spécifiées, la première valeur définit l'espacement horizontal entre les cellules (l'espace de chaque côté de chaque cellule) et la deuxième valeur définit l'espacement vertical entre les cellules. (l'espace séparant le bas d'une cellule du haut de celle en dessous).

  3. Côté légende

  La propriété côté légende spécifie l'emplacement d'une légende de table. Lorsqu'elle est appliquée à une légende de table, cette propriété détermine si la légende apparaît en haut ou en bas de la table. Une légende apparaît normalement en haut du tableau.

  Syntaxe

  caption-side: top|bottom|initial|inherit;

  Cette propriété peut avoir l'une des quatre valeurs:

  • Côté légende: en haut: il s'agit de la valeur par défaut. En cela, il place la légende au-dessus du tableau.

  Syntaxe: caption-side:top;

  Code

  

  Production:

  

  • Côté légende : bas: place la légende sous le tableau.

  Syntaxe: caption-side:bottom;

  Code

  

  Production:

  

  • Côté légende: initial: il est utilisé pour définir la propriété à sa valeur par défaut.
  • Caption-side: inherit : hérite cette propriété de son élément parent.

  Valeurs: top, bottom, initial, inherit;

  4. Cellules vides

  Il indique au navigateur s'il doit afficher une cellule de tableau complètement vide. Il contrôle le rendu des bordures et de l'arrière-plan des cellules qui n'ont pas de contenu visible dans un tableau utilisant le modèle de bordures séparées.

  Syntaxe: empty-cells: show|hide|initial|inherit;

  Cette propriété peut avoir l'une des quatre valeurs:

  • Empty-cell: show: Cette propriété est utilisée pour afficher les bordures de la cellule vide.

  Syntaxe: empty-cells: show;

  Code

  

  Production:

  

  • Cellule vide: masquer: cette propriété est utilisée pour masquer les bordures de la cellule vide.

  Syntaxe: empty-cells: hide;

  Code

  

  Production:

  

  • Cellule vide: initiale : elle est utilisée pour définir la propriété à sa valeur par défaut.
  • Empty-cell: inherit : hérite cette propriété de son élément parent.

  Valeurs: afficher, masquer, initialiser, hériter;

  5. Disposition de la table

  Contrôle la façon dont un navigateur Web dessine un tableau et peut légèrement affecter la vitesse à laquelle le navigateur l'affiche. Cette propriété peut avoir l'une des quatre valeurs.

  Syntaxe: table-layout: auto|fixed|initial|inherit;

  La propriété par défaut est auto.

  1. Mise en page du tableau: auto: l'auto fait que la largeur des éléments s'ajuste automatiquement pour s'adapter au contenu.

  2. Tableau - disposition: fixe : le paramètre fixe oblige le navigateur à afficher toutes les colonnes de la même largeur que les colonnes de la première ligne. Si le contenu dépasse la première ligne, le contenu sera encapsulé, coupé ou étendu à l'extérieur des cellules.

  Code

  

  Production:

  

  3. Présentation de la table: initiale: elle est utilisée pour définir la propriété à sa valeur par défaut.

  4. Table-layout: inherit : hérite cette propriété de son élément parent.

  Conclusion

  Avec l'aide de CSS, nous pouvons créer des tableaux élégants et améliorer l'apparence de la table.

  Articles recommandés

  Ceci est un guide pour le style de table CSS. Ici, nous discutons des propriétés avec les codes, les sorties et la syntaxe du style de table CSS. Vous pouvez également consulter nos articles pour en savoir plus -

  1. Avantages de CSS
  2. Utilisations de CSS
  3. Introduction au CSS
  4. Formatage de texte CSS