Comment ajouter de l'espace entre les colonnes sans affecter les lignes dans un tableau HTML ?
Les propriétés padding left et right sont utilisées pour ajouter un espacement entre les colonnes sans affecter la disposition générale du tableau. Cette propriété permet aux développeurs d'ajouter un espacement supplémentaire et cet espacement n'affecte pas les lignes.
Suivez les étapes ci-dessous :
Étape 1 : créer une structure de table
Supposons qu'il y ait un tableau dans le fichier HTML qui contient quatre lignes et trois colonnes :
< tableau >
< tr >
< e > Nom < / e >
< e > Classe < / e >
< e > Ville < / e >
< / tr >
< tr >
< td > John < / td >
< td > BS Chimie < / td >
< td > Londres < / td >
< / tr >
< tr >
< td > Alexandre < / td >
< td > BS Mathématiques < / td >
< td > Tokyo < / td >
< / tr >
< tr >
< td > Joseph < / td >
< td > BS CS < / td >
< td > New York < / td >
< / tr >
< / tableau >
Après avoir exécuté le code ci-dessus, la page Web ressemble à ceci :
La sortie confirme qu'une structure de table a été créée.
Étape 2 : Appliquer un rembourrage horizontal
Pour ajouter un espacement entre les colonnes à partir du côté gauche, utilisez le ' rembourrage gauche ” Propriété CSS. Après l'application de cette propriété, les données ressemblent au bon alignement. La raison en est que le rembourrage n'est appliqué que du côté gauche.
Sélectionnez maintenant l'élément 'td' dans la partie CSS des styles pouvant être appliqués à l'aide de la méthode en ligne. Ensuite, ajoutez un rembourrage de ' 50px ' pour ajouter un espacement et ajouter une propriété de bordure pour une meilleure visualisation :
td {rembourrage à gauche : 50px ;
frontière : 2px rouge uni ;
}
Après avoir exécuté le code, la page Web ressemble à ceci :
La sortie indique que l'espace est ajouté entre les colonnes du tableau.
Maintenant, pour définir le rembourrage du côté droit, le ' rembourrage à droite ” la propriété est utilisée. De la même manière, mais maintenant les données cellulaires semblent ' aligné à gauche ”. Le code est :
td {rembourrage à gauche : 50px ;
frontière : 2px rouge uni ;
}
Après avoir exécuté le code ci-dessus, la page Web ressemble à ceci :
La sortie confirme que l'espace entre les colonnes est augmenté en appliquant un rembourrage sur le côté droit.
Étape 3 : Combinaison du rembourrage gauche et droit
Comme dans l'étape ci-dessus, les données ne sont pas alignées au centre dans les deux cas, ce qui rend les données non professionnelles. Pour le rendre visible sans casser le sens du design. Les deux propriétés peuvent être utilisées en même temps comme ci-dessous :
td {rembourrage à droite : 60 px ;
rembourrage gauche : 60 px ;
frontière : 2px rouge uni ;
}
Après avoir exécuté le code ci-dessus, la page Web ressemble à ceci :
La sortie confirme que l'espace est ajouté entre les colonnes et que les données sont également centrées.
Conclusion
L'espace entre les colonnes du tableau peut être ajouté à l'aide des propriétés de remplissage gauche et droite. Ces propriétés ajoutent de l'espace supplémentaire dans les directions droite et gauche à la cellule. Les deux propriétés peuvent être utilisées en même temps ou séparément. Cet article a démontré avec succès comment ajouter un espacement entre les colonnes du tableau sans affecter les lignes.