Tutoriel HTML

ACCUEIL HTML Introduction HTML Éditeurs HTML HTML de base Éléments HTML Attributs HTML En-têtes HTML Paragraphes HTML Styles HTML Formatage HTML Citations HTML Commentaires HTML Couleurs HTML HTMLCSS Liens HTML Images HTML Icône de favori HTML Tableaux HTML Listes HTML Bloc HTML et Inline Cours HTML Identifiant HTML Iframes HTML HTMLJavaScript Chemins d'accès aux fichiers HTML Tête HTML Mise en page HTML HTML réactif Code informatique HTML Sémantique HTML Guide de style HTML Entités HTML Symboles HTML Émojis HTML Jeu de caractères HTML Encodage d'URL HTML HTML contre XHTML

Formulaires HTML

Formulaires HTML Attributs de formulaire HTML Éléments de formulaire HTML Types d'entrée HTML Attributs d'entrée HTML Attributs du formulaire de saisie HTML

Graphiques HTML

Canevas HTML HTML SVG

Médias HTML

Médias HTML Vidéo HTML Audio HTML Modules externes HTML YouTube HTML

API HTML

Géolocalisation HTML Glisser/déposer HTML Stockage Web HTML Travailleurs Web HTML HTML SSE

Exemples HTML

Exemples HTML Questionnaire HTML Exercices HTML Certificat HTML Résumé HTML Accessibilité HTML

Références HTML

Liste de balises HTML Attributs HTML Attributs globaux HTML Prise en charge du navigateur HTML Événements HTML Couleurs HTML Canevas HTML HTML Audio/Vidéo Doctypes HTML Jeux de caractères HTML Encodage d'URL HTML Codes de langue HTML Messagerie HTTP Méthodes HTTP Convertisseur PX en EM Raccourcis clavier

Bordures de tableau HTML


Les tableaux HTML peuvent avoir des bordures de styles et de formes différents.


Comment ajouter une bordure

Lorsque vous ajoutez une bordure à un tableau, vous ajoutez également des bordures autour de chaque cellule du tableau :

     
     
     

Pour ajouter une bordure, utilisez la borderpropriété CSS sur les éléments table, thet td:

Exemple

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

Bordures de tableau réduites

border-collapse Pour éviter d'avoir des bordures doubles comme dans l'exemple ci-dessus, définissez la propriété CSS sur collapse.

Cela fera s'effondrer les bordures en une seule bordure :

     
     
     

Exemple

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}


Style des bordures de tableau

Si vous définissez une couleur d'arrière-plan pour chaque cellule et donnez à la bordure une couleur blanche (la même que l'arrière-plan du document), vous obtenez l'impression d'une bordure invisible :

     
     
     

Exemple

table, th, td {
  border: 1px solid white;
  border-collapse: collapse;
}
th, td {
  background-color: #96D4D4;
}

Bordures de table ronde

Avec la border-radiuspropriété, les bordures ont des coins arrondis :

     
     
     

Exemple

table, th, td {
  border: 1px solid black;
  border-radius: 10px;
}

Ignorez la bordure autour du tableau en tableomettant le sélecteur CSS :

     
     
     

Exemple

th, td {
  border: 1px solid black;
  border-radius: 10px;
}

Bordures de tableau en pointillés

Avec la border-stylepropriété, vous pouvez définir l'apparence de la bordure.

     
     
     

Les valeurs suivantes sont autorisées :

  • dotted     
  • dashed     
  • solid     
  • double     
  • groove     
  • ridge     
  • inset     
  • outset     
  • none     
  • hidden     

Exemple

 th, td {
  border-style: dotted;
}

Couleur de la bordure

Avec la border-colorpropriété, vous pouvez définir la couleur de la bordure.

     
     
     

Exemple

 th, td {
  border-color: #96D4D4;
}