Supprimer les bordures du tableau HTML

1. Utilisez la propriété CSS border-collapse pour supprimer la bordure des cellules du tableau en HTML
2. Définissez la propriété CSS border sur none pour supprimer la bordure d’un tableau en HTML

Cet article présentera des méthodes pour supprimer les bordures du tableau HTML. Nous apprendrons à supprimer les bordures des cellules tout en insérant des images dans les cellules du tableau.

Utilisez la propriété CSS border-collapse pour supprimer la bordure des cellules du tableau en HTML

Nous pouvons utiliser le tableau HTML pour insérer des images. Nous pouvons attribuer des classes aux éléments du tableau et définir les attributs des classes en CSS. Cette méthode nous aide à définir la hauteur et la largeur de l’élément td et à insérer l’image en utilisant la propriété background-image. Ainsi, dans chacun des éléments td, nous pouvons insérer l’image. En insérant les images de cette façon, nous pouvons voir la bordure de chaque cellule du tableau. Nous pourrions vouloir supprimer les bordures dans les cellules et le tableau pour améliorer l’apparence de nos images. Pour cela, nous pouvons utiliser la propriété CSS border-collapse. Nous pouvons définir la valeur de la propriété sur collapse afin que la bordure des cellules fusionne. Cela permet l’espacement des cellules à 0. La bordure n’apparaîtra pas si nous n’utilisons pas l’attribut border dans la balise table.

Par exemple, en HTML, écrivez la balise <table> puis la balise <tr> à l’intérieur. A l’intérieur de la balise <tr>, écrivez trois balises <td> et écrivez les classes left, middle et right dans les première, deuxième et troisième classes. Dans CSS, sélectionnez la balise table et définissez la propriété border-collapse sur collapse. Sélectionnez ensuite les trois classes left, middle et right à la fois et définissez la hauteur, la largeur et une image de fond.

Nous avons créé trois éléments td et inséré des images dans ces éléments dans l’exemple ci-dessous. En utilisant la propriété border-collapse, nous avons supprimé les bordures des cellules. Nous pouvons supprimer la propriété border-collapse pour voir à quoi ressemble la bordure des cellules.

Exemple de code :

<table>
 <tr>
 <td class="left"></td>
 <td class="middle"></td>
 <td class="right"></td>
 </tr> 
</table>

table{
 border-collapse:collapse;
}
.left, .middle, .right
{
 width: 200px;
 height: 280px;
 background-image: url('https://loremflickr.com/212/280'); 
}

Définissez la propriété CSS border sur none pour supprimer la bordure d’un tableau en HTML

Nous pouvons définir la propriété border sur none pour supprimer la bordure d’un tableau HTML. La propriété est l’abréviation de différentes propriétés border. Ces différentes propriétés sont border-width, border-style et border-color. Une bordure ne sera pas formée lorsque nous utiliserons la propriété border et la définirons sur none.

Par exemple, nous pouvons utiliser le tableau créé ci-dessus. Nous pouvons modifier un peu le CSS ci-dessus pour atteindre notre objectif en utilisant la propriété border. Nous pouvons sélectionner les balises table, tr et td dans la table et définir la propriété border sur none. De cette façon, nous pouvons supprimer la bordure d’un tableau et les bordures des cellules du tableau en HTML.

Exemple de code :

table, tr, td{
 border:none;
}

<table>
 <tr>
 <td class="left"></td>
 <td class="middle"></td>
 <td class="right"></td>
 </tr> 
</table>