Espacement des cellules CSS

Dans cet article, nous passerons en revue de nombreuses options stylistiques qui donneront des composants de table comme des en-têtes de table et des cellules de données de table un certain espacement. L'attribut CSS le plus utilisé dans ces circonstances est la propriété d'espacement des frontières qui sera explorée et implémentée dans ce tutoriel à l'aide du Blocage ++ IDE. Pour appliquer cette notion dans un fichier HTML, de nombreuses options stylistiques telles que CSS en ligne et la méthode CSS de la balise de style seront utilisées.

Exemple 01: Utilisation de l'approche de la balise de style CSS pour ajouter un espacement aux cellules de la table dans un fichier HTML

Dans cet exemple, nous espacerons les cellules de la table en utilisant la propriété d'espacement des bordures. Dans cet exemple, la méthode CSS TAG CSS sera utilisée pour ajouter des fonctionnalités stylistiques aux composants de la table. Le bloc-notes ++ IDE sera utilisé pour modifier le fichier HTML.

Dans le script ci-dessus, nous commencerons par l'en-tête du fichier où nous ouvrirons la balise de style. Dans cette balise, nous donnerons deux propriétés de style à tous les éléments en généralisant les éléments et en créant des classes distinctes pour eux. Tout d'abord, nous définirons le style de l'ensemble du tableau où nous définirons la propriété d'espacement des bordures qui attribuera ensuite un espace spécifié entre le contenu d'une cellule et sa bordure.

Ensuite, nous créerons une autre classe de style. Dans cette classe, nous donnerons un style à l'en-tête de table, aux données de table et à la table elle-même, en définissant la longueur, la forme et la couleur de la bordure. Ensuite, nous fermerons le style et la tête et ouvrirons l'étiquette corporelle. Dans l'étiquette du corps, nous créerons une table avec deux lignes. Dans la première ligne, nous donnerons au tableau trois colonnes en utilisant la balise «Th» qui définit l'en-tête de la table. Dans la deuxième ligne, nous insérerons le contenu dans les colonnes de la table en utilisant la balise «TD». Ensuite, nous fermerons l'étiquette de table et la balise du corps. Sauver ce script dans le ".Le format HTML »nous permettra de l'ouvrir sur notre navigateur et d'obtenir la sortie suivante:

On peut voir dans le résultat ci-dessus que les différentes cellules de la table ont une distance régulière entre eux qui a été déterminée dans l'attribut d'espacement des frontières à l'intérieur de la balise de style.

Exemple 02: Utilisation de l'approche de style CSS en ligne pour ajouter un espacement aux cellules de la table dans un fichier HTML

Dans cet exemple, nous utiliserons la propriété d'espacement des bordures et un style pour donner des composants de table comme l'en-tête de table et les données de table. L'approche CSS en ligne sera utilisée dans cet exemple pour appliquer les caractéristiques de style aux composants de la table.

Dans le script ci-dessus, nous commencerons par le corps du fichier où nous ouvrirons la balise de style dans chaque élément individuellement. Tout d'abord, nous ouvrirons la balise de table et affecterons CSS via le mot-clé Style. Nous attribuerons la table avec une bordure de largeur «1px», de forme solide et de couleur noire avec la propriété d'espacement des bordures. Ensuite, nous ouvrirons notre première ligne de table où nous définirons les noms de colonne en utilisant la balise «Th», dans laquelle nous utiliserons également CSS en ligne pour donner des propriétés de style à l'élément. Après cela, nous ajouterons une autre ligne dans laquelle nous définirons les données du tableau à l'aide de la balise «TD» et utiliserons CSS en ligne pour donner aux données une bordure également. Ensuite, nous fermerons la table et l'étiquette du corps. Nous allons enregistrer ce fichier et l'ouvrir sur notre navigateur pour obtenir le résultat de ce script sur la page de notre navigateur.

Dans l'extrait ci-dessus, nous pouvons observer que les deux rangées de la table ont des espaces entre eux qui ont été définis dans les étiquettes par CSS en ligne.

Exemple 03: Utilisation de la technique CSS d'espacement des bordures à deux dimensions pour une table dans un fichier HTML

Dans cet exemple, nous utiliserons l'attribut d'espacement de bordure à deux dimensions pour donner aux cellules de la table un certain espacement. Dans cet exemple, la technique CSS TAG CSS sera utilisée pour appliquer des caractéristiques stylistiques aux composants de la table.

Dans le script suivant, nous commencerons par l'en-tête du fichier où nous ouvrirons la balise de style. En généralisant les composants et en établissant des classes distinctes pour chacune, nous les fournirons à tous des paramètres de style dans cette balise. Tout d'abord, nous créerons le style de l'ensemble du tableau, y compris la propriété d'espacement des bordures, qui attribuera une distance définie entre le contenu d'une cellule et sa bordure en deux dimensions indépendamment.

Ensuite, dans une autre classe de style, nous appliquerons un style à l'en-tête de la table, aux données de table et à la table elle-même en définissant la longueur, la forme et la couleur de la bordure. Les étiquettes de style et de tête seront ensuite fermées pendant que l'étiquette corporelle sera ouverte. Nous ferons une table avec deux rangées dans l'étiquette du corps. La balise «Th» sera utilisée dans la première ligne pour spécifier l'en-tête de table. Et la balise «TD» sera utilisée dans la deuxième ligne pour insérer des données dans les colonnes du tableau. Ensuite, nous fermerons la table et les balises corporelles sauvant ce script dans ".Format HTML "afin que nous puissions l'exécuter dans notre navigateur et obtenir les résultats suivants:

Dans la sortie ci-dessus, nous pouvons voir que les cellules individuelles de la table ont deux lacunes différentes horizontalement et verticalement entre elles qui ont été définies dans la propriété d'espacement des bordures à l'intérieur de la balise de style.

Exemple 04: Utilisation de la méthode alternative pour affecter l'espace entre les éléments de la table

Dans cet exemple, nous utiliserons l'alternative de propriété d'espacement des bordures pour fournir un certain style aux composants de table tels que l'en-tête de la table et les données de table. L'approche CSS TAG CSS sera utilisée dans cet exemple pour attribuer des attributs stylistiques aux composants de la table.

Dans le script suivant, nous commencerons par l'en-tête du fichier et ouvrirons l'étiquette de style résumant les composants et attribuer une seule classe à chaque partie. Tout d'abord, nous concevons le style de l'ensemble du tableau, y compris la fonction d'effondrement de la bordure, qui effondre la bordure de chaque élément pour ajouter de l'espace entre eux. L'en-tête de table, les données de table et la table lui-même seront ensuite stylisés en ajustant la longueur, la forme et la couleur de la bordure. L'étiquette corporelle sera ensuite ouverte, mais les étiquettes de style et de tête seront fermées.

Dans l'étiquette du corps, nous créerons une table avec deux lignes. La balise «th», qui spécifie l'en-tête de table sera utilisée dans la première ligne pour donner au tableau trois colonnes. La balise «TD» sera utilisée dans la deuxième ligne pour mettre des informations dans les colonnes de la table. Ensuite, nous fermerons la table et les étiquettes corporelles. Nous stockons ce script dans ".Format HTML ”afin que nous puissions y accéder dans notre navigateur et recevoir la sortie suivante:

Dans la sortie ci-dessus, il est visible que les éléments de la table ont une seule bordure avec un peu d'espace en raison de la propriété de l'effondrement de la bordure.

Conclusion:

Dans cet article, nous avons discuté de plusieurs propriétés de style qui nous ont aidés à donner à la table des cellules un espacement. La propriété d'espacement des frontières est la propriété la plus utilisée de ce scénario qui a été discutée et mise en œuvre dans cet article en utilisant le bloc-notes ++ IDE. Nous avons ajouté trois exemples uniques ainsi que leur explication pour chaque étape pour la facilité de nos utilisateurs.