Balise TABLE
Rôle
La balise <table> permet de créer un tableau dont le rôle principal est de ranger des données en ligne et en colonne. Les tableaux ne doivent pas être utilisés pour faire de la mise en page.
Un tableau HTML se compose de l’élément table et d’un ou plusieurs éléments tr , th , et td.
L’élément tr définit une ligne de tableau, l’élément th définit un en-tête de tableau, et l’élément tddéfinit une cellule de tableau.
Testez vous-même cette balise
Utilisez Codepen.
Voici le resultat
Compatibilité
La balise <table> est pris en charge par tous les principaux navigateurs
Attributs spécifiques
Attributs spécifiques à cet élément
- align
- Spécifie l’alignement de la table par rapport à l’élément qui la contient(n’est plus supporté en HTML5)
Syntaxe :
<table align="right" > ...</table> - Valeurs possible :
- align=’left’ : alignement à gauche
- align=’right’ : alignement à droite
- align=’center’ : alignement au milieu
- bgcolor
- Spécifie la couleur de fond de la table (n’est plus supporté en HTML5)
Syntaxe :
<table bgcolor="orange" > ...</table> - Valeurs possible :
- bgcolor=’rgb(255,0,0)’ : en rgb
- bgcolor=’#FF0000′ : en hexadécimal
- bgcolor=’red’ : couleur en toute lettre
- border
- Permet d’affiché une bordure dont la valeur est en pixel (n’est plus supporté en HTML5)
Syntaxe :
<table border="1" > ...</table> - cellpadding
- Spécifie l’espace en pixel entre le contenu et le bord de chaque cellule (n’est plus supporté en HTML5)
Syntaxe :
<table cellpadding="10" > ...</table> - cellspacing
- Spécifie l’espace en pixel entre les cellules (n’est plus supporté en HTML5)
Syntaxe :
<table cellspacing="10" > ...</table> - rules
- Spécifie quelles bordures intérieures doivent être affiché (n’est plus supporté en HTML5, ne fonctionne qu’à partir de IE-9)
Syntaxe :
<table rules="rows" > ...</table> - Valeurs possible :
- rules=’none’ : pas de bordure
- rules=’groups’ : entre les groupes de lignes et les groupes de colonnes
- rules=’rows’ : entre les lignes
- rules=’cols’ : entre les colonnes
- rules= »all’ : toutes les bordures intérieures
- summary
- Spécifie le résumé du contenu du tableau (n’est plus supporté en HTML5)
Syntaxe :
<table summary="nom et prénom d'individus" > ...</table> - width
- Spécifie la largeur du tableau en pixel ou en pourcentage (n’est plus supporté en HTML5)
Syntaxe :
<table width="600" > ...</table>
La balise <table> prend aussi en charge les attributs globaux
Attibuts de type événement
La balise <table> prend aussi en charge les événements souris
