Bordure de table HTML
Comment créer une table avec une bordure en HTML?
Il existe différents types de bordures de table qui sont disponibles en HTML. Vous pouvez utiliser ces bordures en fonction de votre choix. Cependant, dans les trois exemples énumérés ci-dessous, nous partagerons avec vous les méthodes de création de trois des bordures de table les plus couramment utilisées en HTML.
Exemple 1: Création d'une bordure de table effondrée
Une bordure de table effondrée est celle dans laquelle les bordures de toutes les cellules d'une table s'effondrent et fusionnent en une seule bordure solide. Dans cet exemple, nous vous montrerons comment vous pouvez créer une bordure de table effondrée en HTML en utilisant le script HTML suivant:
Dans cet exemple, nous avons créé une table en HTML à l'aide de la balise de table. Nous avons sélectionné une bordure «1 pixel noir solide» pour ce tableau, et nous avons également choisi cette bordure pour être effondrée, je.e., Toutes les cellules de la table auront la même bordure. Ensuite, nous voulions que ce tableau ait deux colonnes différentes, à savoir «employé» et «désignation» et nous voulions avoir les dossiers de deux employés différents dans ce tableau. Par conséquent, nous avons mentionné les noms de ces employés et leurs désignations respectives dans des balises distinctes «TR» et «TD» de HTML.
Lorsque nous avons exécuté le script HTML mentionné ci-dessus, notre tableau avec une bordure effondrée est apparue sur la page Web, comme indiqué dans l'image ci-dessous:
Exemple 2: Création d'une bordure de table invisible
Une bordure de table invisible est celle dans laquelle nous choisissons une couleur d'arrière-plan pour toutes les cellules de notre table tout en gardant la couleur de la bordure de la table comme «blanc» à cause de laquelle il a l'impression que notre table est sans bordure. Pour créer une telle table dans HTML, vous devrez utiliser le script HTML suivant:
Dans ce script, nous avons réglé notre couleur de bordure de table en blanc afin qu'elle puisse paraître invisible. Ensuite, nous avons choisi une couleur d'arrière-plan aléatoire pour toutes les cellules de notre table. Après cela, nous avons utilisé les mêmes entrées de table que nous avons utilisées dans notre premier exemple.
Maintenant, lorsque nous avons exécuté ce script HTML, notre table avec une bordure invisible est apparue sur la page Web, comme indiqué dans l'image ci-dessous:
Exemple 3: Création d'une bordure de table en pointillé
Comme son nom le dit, une bordure de table en pointillés est celle dont la frontière est sous la forme de points plutôt que d'être solide. Pour créer une telle table dans HTML, vous devrez vous référer au script suivant:
Dans cet exemple de script, nous avons choisi le style de bordure en pointillé pour notre table. Après cela, les autres entrées de la table sont exactement les mêmes que celles que nous avons utilisées dans nos deux premiers exemples.
Lors de l'exécution, ce script HTML a rendu une table avec une bordure en pointillés sur la page Web, comme indiqué dans l'image ci-dessous:
Conclusion
Ce tutoriel a été créé pour démontrer l'utilisation et la création de bordures de table en HTML. Pour vous expliquer cela en détail, nous avons parlé de trois types différents de bordures de table en HTML. Vous pouvez clairement voir l'impact de la modification du style de bordure sur l'apparence globale de votre table à partir des exemples indiqués ci-dessus. Par conséquent, maintenant, vous pouvez facilement choisir la bordure de table que vous aimez le plus et la créer en quelques secondes. De plus, vous pouvez également explorer d'autres bordures de table disponibles en HTML par vous-même.