Supprimer les bordures d’un tableau HTML

Pour supprimer les bordures visibles d’un tableau HTML, définissez la propriété CSS border sur none pour le tableau et les cellules qui affichent un trait. Utilisez border-collapse: collapse si vous souhaitez que les bordures de cellules adjacentes partagent une même ligne : cette propriété les combine, elle ne les supprime pas. Cette distinction est utile lorsque vous placez des images ou d’autres éléments dans des cellules : collapse modifie la façon dont les bordures adjacentes se rejoignent, tandis que border: none supprime les bordures affichées des éléments concernés.

Utiliser border-collapse: collapse pour fusionner les bordures adjacentes des cellules d’un tableau HTML

La propriété CSS border-collapse détermine si un tableau utilise le modèle de bordures séparées ou fusionnées. Avec la valeur collapse, les bordures des cellules adjacentes sont combinées : deux cellules ne dessinent donc pas de lignes distinctes sur leur bord commun. Les bordures existantes peuvent toutefois rester visibles autour du tableau et de ses cellules ; cette déclaration ne les supprime pas. Elle ne permet pas non plus de définir l’espacement à zéro. Dans le modèle séparé, border-spacing règle l’écart entre les bordures des cellules. Le modèle fusionné combine plutôt les bordures adjacentes ; modifier border-spacing ne résout donc pas la présence de lignes dans ce modèle.

Cet exemple HTML minimal contient deux cellules avec des bordures. La règle du tableau combine les lignes à leur jonction, tandis que la règle des cellules conserve les bordures visibles :

const example = `<style>
table { border-collapse: collapse; }
td { border: 1px solid #555; padding: 0.5rem; }
</style>
<table>
  <tr><td>Image</td><td>Caption</td></tr>
</table>`;
console.log(example);

<style>
table { border-collapse: collapse; }
td { border: 1px solid #555; padding: 0.5rem; }
</style>
<table>
  <tr><td>Image</td><td>Caption</td></tr>
</table>

Remplacez le texte des cellules par votre propre contenu, y compris un élément image si elles en contiennent. Ce CSS fonctionne avec les cellules <td> et <th> classiques et ne dépend d’aucun service d’images. La déclaration padding ajoute de l’espace à l’intérieur de chaque cellule ; elle ne règle pas l’écart entre des bordures de cellules séparées. Pour obtenir une grille aux lignes communes, conservez les bordures des cellules et utilisez collapse. Pour supprimer les lignes, retirez les déclarations de bordure concernées comme indiqué ci-dessous.

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

Pour masquer les bordures, définissez border: none sur le tableau et sur chaque type de cellule dont vous voulez supprimer les bordures. Une règle table, th, td cible à la fois le tableau, les cellules d’en-tête et les cellules de données. Si le contour du tableau est déjà absent et que seules les lignes des cellules restent visibles, th, td permet de ne cibler que ces cellules. Le sélecteur détermine les éléments auxquels la déclaration s’applique ; la cascade CSS détermine quelle déclaration correspondante l’emporte. Une règle plus spécifique peut remplacer un sélecteur général et, à spécificité égale, la déclaration placée plus loin dans la feuille de style l’emporte.

La propriété border est une propriété raccourcie pour border-width, border-style et border-color. La valeur none supprime la bordure affichée des éléments ciblés, mais ne supprime ni le remplissage intérieur des cellules ni leur contenu. Par exemple, une feuille de style peut utiliser table, th, td { border: none; } si ces trois types d’éléments ne doivent afficher aucune bordure. Ajoutez border-collapse: collapse uniquement si vous souhaitez également utiliser le modèle de bordures fusionnées ; cette propriété ne remplace pas border: none.

Si un trait reste visible, vérifiez quel élément le dessine. Une bordure portée par le tableau nécessite une règle qui cible le tableau ; une bordure portée par une cellule d’en-tête ou de données nécessite une règle qui cible th ou td. Vérifiez ensuite si une autre règle de feuille de style remplace votre déclaration. Vous pourrez ainsi limiter la correction aux éléments qui ont réellement des bordures, sans modifier l’espacement du tableau ni son contenu.