Bordure de tableau en HTML

La bordure de tableau en HTML est utilisée pour afficher une bordure autour du contenu du tableau. Cela peut être défini autour du tableau en spécifiant des valeurs telles que 0 pour qu'aucune bordure ne s'affiche autour des cellules du tableau, tandis que la valeur 1 est définie pour afficher une bordure autour des cellules du tableau. La largeur du tableau peut être définie en valeurs numériques pour définir l'épaisseur de la bordure que les utilisateurs souhaitent donner autour de leur tableau. On peut définir une bordure soit sur l'ensemble du tableau, soit sur une ligne ou une colonne spécifique, ou uniquement pour l'en-tête du tableau ; tout est possible.

Syntaxe de la bordure du tableau en HTML

Il existe plusieurs façons de définir la bordure d'un tableau ; voyons leur syntaxe un par un :

1. Bordure générale du tableau : Ceci est généralement utilisé pour définir une bordure simple autour du tableau comme :

Exemple :

table, th, td{
border:1px solid blue;
}

2. Bordure de table pliable : Cette propriété est utilisée pour définir une bordure pliable sur une seule ligne autour de notre table à l'aide de la propriété border-collapse.

table{
border-collapse: collapse;
}

Exemple :

table{
border-collapse: collapse;
}
table, th, td{
border:0px;
}

3. La bordure autour du tableau : Cette propriété nous permet d'ajouter une bordure de tableau uniquement sur les bords extérieurs, et non sur chaque cellule individuelle du tableau, simplement comme :

table {
border : 1px;
}

4. Bordure de tableau en pointillés : on peut simplement ajouter un contour en pointillés comme bordure à son tableau en utilisant simplement la syntaxe suivante : 

table{
border : 1px; dotted color-name;
}

5. Bordure de tableau en pointillé : Comme en pointillé, nous pouvons définir la bordure en pointillés autour de notre tableau ou de ses cellules. Cela peut être fin ou épais selon le choix de l'utilisateur en définissant la valeur.

table{
border : 3px; dashed color-name;
}

6. Bordure de table double : Si nous voulons ajouter un double contour à notre tableau, cela est également possible en définissant une propriété dans le code CSS et en donnant une double bordure autour de la table.

table{
border : 1px; double color-name;
}

7. Bordure de tableau autour des cellules du tableau : Cette syntaxe nous aide à donner une bordure autour des cellules individuelles ou de toute cellule de tableau spécifique avec votre code couleur préféré. Dans cette syntaxe, nous souhaitons ajouter une valeur de code de bordure avec chaque cellule séparément.

table{
border : 1px; dotted color-name;
}
th{
border : 1px; color-name;
}
td{
border : 2px; color-name;
}

8. Bordure de tableau avec classes CSS : plutôt que de définir la bordure de chaque cellule individuelle du tableau, les classes CSS nous aident à donner un code de bordure commun à notre tableau. Cela peut être fait en utilisant la syntaxe suivante :

<style>
table{
background-color: color-name;
}
table th{
CSS code
}
table td{
CSS code
}
</style>

9. Bordure inférieure du tableau : Cette propriété de la bordure du tableau est utilisée pour donner des séparateurs horizontaux entre les balises th et td du tableau comme suit :

th, td{
border-bottom: value color-name;
}

10. Bordure de table arrondie : elle affichera les coins arrondis de la bordure de table.

table{
border-radius: value;
border: value color-name;
}

Exemples de bordure de tableau en HTML

Voici les exemples de bordure de table

Exemple n°1

L'exemple suivant montre deux tableaux différents avec des bordures différentes. Le premier tableau montre une bordure normale autour du tableau, tandis que le deuxième tableau est un exemple de format de bordure de tableau pliable.

Code HTML :

<style>
.collapsetable{
border-collapse: collapse;
border: 3px solid blue;
}
</style>

Genral Table Border

SR.NO	NAME	Education	AGE
1	Dinesh	BCA	26
2	Raj	CA	30
3	Deepti	ME	28
4	Akhilesh	B.com	21
5	Sara	MBA	26

Collapsible Table Border

Emp Code	Emp Name	Job Title	Salary(LPA)
911	Zoya Shaikh	Developer	3.6
912	Lisa Dev	Tester	2.8
913	Deepak Jadeja	Digital Marketing	5.2
914	Aditi Yewale	Developer	4
915	Simren Rao	HR	5.6

Sortie :

Exemple n°2

Cet exemple montre comment définir la bordure du tableau uniquement pour la partie extérieure avec différents types de bordure de tableau :

Code HTML :

<style>
table{
border: 1px solid red;
border-collapse: collapse;
}
</style>


<h4 id="Table-with-outside-border">Table with outside border</h4>

Index	Seasons	Durations
1	Summer	4 months
2	Rainy Seasons	4 months
3	Winter	4 months

Table with dotted border

Index	Seasons	Durations
1	Summer	4 months
2	Rainy Seasons	4 months
3	Winter	4 months

Table with dashed border

Index	Seasons	Durations
1	Summer	4 months
2	Rainy Seasons	4 months
3	Winter	4 months

Table with double border

Index	Seasons	Durations
1	Summer	4 months
2	Rainy Seasons	4 months
3	Winter	4 months

Sortie : Cette sortie montre un tableau avec une bordure en pointillés, en tirets et double à l'extérieur du tableau.

Exemple #3

Exemple montrant les cellules d'un tableau bordées de différentes couleurs individuelles comme :

Code HTML :

<style>
table{
border: 3px solid red;
}
th{
border: 2px solid blue;
}
td{
border: 2px solid black;
}
</style>


<h4 id="Table-border-around-Cell">Table border around Cell</h4>

First Name	Last Name	City
Rita	Mishra	Mumbai
Rashmi	Patil	Nagpur
Kartik	Dev	Pune

Sortie :

Exemple n°4

Une autre bordure arrondie de tableau avec une bordure comme séparateur horizontal

Code HTML :

<style>
.round{
border-radius: 15px;
border: 2px solid purple;
padding: 5px;
}
th, td {
border-bottom: 1px solid black;
}
</style>


<h4 id="Table-border-around-Cell">Table border around Cell</h4>

Cake	Weight	Price
Chocalate	1/2 kg	400/-
Rasmalai	1 kg	850/-

Sortie :

Conclusion

• La bordure du tableau en HTML est définie en attribuant la valeur 1 pour afficher une bordure autour du tableau, tandis que 0 pour masquer une bordure autour du tableau.
• On peut définir une bordure autour de la table de différents types, comme une simple bordure épaisse ou fine, des bordures pliables, en pointillés, doubles ou en pointillés.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!