Les attributs de table HTML vous donnent beaucoup plus de contrôle sur les tables HTML. Il y a beaucoup d'attributs disponibles pour les tableaux pour les rendre plus intéressants et changer l'apparence de votre page.
Attributs des éléments HTML TABLE
Dans HTML5 l'élément utilise les attributs globaux et un autre attribut et il a changé pour n'avoir que la valeur 1 ou vide (c'est-à-dire border=""). Si vous souhaitez modifier la largeur de la bordure, vous devez utiliser le border-width Propriété CSS.
Voir ci-dessous pour en savoir plus sur les attributs de table HTML5 valides.
Il existe également plusieurs attributs qui font partie de la spécification HTML 4.01 qui est devenue obsolète en HTML5:
- : utilise la propriété CSS padding sur les éléments TD et TH de la table.
- —Utilisez la propriété CSS border-spacing sur la table.
- —Utiliser les styles CSS border-color: black; et border-style sur la table.
- —Utiliser les styles CSS border-color: black; et border-style sur les éléments appropriés de la table.
- — Au lieu de cela, vous devez décrire la structure de la table dans une LÉGENDE ou mettre la table entière dans une FIGURE et la décrire dans une FIGCAPTION. Alternativement, vous pouvez simplifier la structure du tableau afin qu'aucune explication ne soit nécessaire.
- : utilise la propriété CSS width.
Et un attribut qui a été déprécié dans HTML 4.01 et est également obsolète dans HTML5.
- align: utilisez plutôt la propriété CSS margin.
Il existe également plusieurs attributs qui ne font partie d'aucune spécification HTML. Utilisez ces attributs si vous savez que les navigateurs que vous prenez en charge peuvent les gérer et que vous ne vous souciez pas du code HTML valide.
- : utilisez plutôt la propriété CSS background-color.
- bordercolor: utilisez plutôt la propriété CSS border-color.
- bordercolorlight: utilisez plutôt la propriété CSS border-color.
- bordercolordark: utilisez plutôt la propriété CSS border-color.
- cols: il n'y a pas d'alternative à cet attribut.
- height: utilisez plutôt la propriété CSS height.
- : utilisez plutôt la marge de la propriété CSS.
- : utilisez plutôt la propriété CSS white-space.
- : utilisez plutôt la propriété CSS vertical-align.
Attributs des éléments HTML5 TABLE
Comme nous l'avons mentionné ci-dessus, il n'y a qu'un seul attribut, au-delà des attributs globaux, qui est valide sur un élément TABLE HTML5: border.
L'attribut border est utilisé pour définir une bordure autour de l'ensemble du tableau et de toutes les cellules qu'il contient. Il y avait une certaine question quant à savoir si elle serait incluse dans la spécification HTML5, mais elle est restée parce qu'elle a fourni des informations sur la structure du tableau, au-delà des simples implications de style.
Pour ajouter l'attribut border, vous définissez la valeur sur 1 s'il y a une bordure et vide (ou omettez l'attribut) s'il n'y en a pas. La plupart des navigateurs prendront également en charge 0 pour aucune bordure, et toute autre valeur entière (2, 3, 30, 500, etc.) pour déclarer la largeur de la bordure en pixels, mais cela est obsolète en HTML5. Au lieu de cela, vous devez utiliser les propriétés de style de bordure CSS pour définir la largeur de la bordure et d'autres styles.
Pour créer un tableau avec une bordure, écrivez:
frontière="1">
Ceci est une table avec une bordure
Ceci décrit les attributs TABLE valides dans HTML 4.01, mais obsolètes dans HTML5. Si vous écrivez toujours des documents HTML 4.01, vous pouvez utiliser ces attributs, mais la plupart d'entre eux ont des alternatives qui rendront vos pages plus à l'épreuve du temps lorsque vous passerez à HTML5.
Attributs HTML 4.01 valides
L'attribut que nous avons décrit ci-dessus. La seule différence entre HTML 4.01 et HTML5 est que vous pouvez spécifier n'importe quel entier (0, 1, 2, 15, 20, 200, etc.) pour définir la largeur de la bordure en pixels.
Pour créer un tableau avec une bordure de 5px, écrivez:
border="5">
Ce tableau a une bordure de 5px.
L'attribut définit la quantité d'espace entre les bordures de cellule et le contenu de la cellule. La valeur par défaut est de deux pixels. Définissez le cellpadding sur 0 si vous ne voulez pas d'espace entre le contenu et les bordures.
Pour définir le remplissage des cellules sur 20, écrivez:
cellpadding="20">
Ce tableau a un remplissage de cellule de 20.
Les bordures des cellules seront séparées de 20 pixels.
Voir un exemple de table avec cellpadding.
L'attribut définit la quantité d'espace entre les cellules du tableau et le contenu des cellules. Comme cellpadding, la valeur par défaut est définie sur deux pixels, vous devez donc la définir sur 0 si vous ne souhaitez pas d'espacement entre les cellules.
Pour ajouter un espacement entre les cellules d'un tableau, écrivez:
espacement des cellules="20">
Ce tableau a un espacement des cellules de 20.
Les cellules seront séparées de 20 pixels.
L'attribut identifie les parties de la bordure entourant l'extérieur d'un tableau qui seront visibles. Vous pouvez encadrer votre table sur les quatre côtés, sur n'importe quel côté, en haut et en bas, à gauche et à droite, ou aucun.
Voici le code HTML d'un tableau avec uniquement la bordure gauche:
frame="lhs">
Cette table
aura
seulement le
côté gauche encadré.
Et un autre exemple avec le cadre du bas:
cadre="ci-dessous">
Cette table a un cadre sur le fond.
Découvrez quelques tables avec des cadres.
L'attribut est similaire à l'attribut frame, sauf qu'il affecte les bordures autour des cellules du tableau. Vous pouvez définir des règles sur toutes les cellules, entre les colonnes, entre des groupes comme TBODY et TFOOT ou aucun.
Pour construire un tableau avec des lignes uniquement entre les lignes, écrivez:
règles="lignes">
Cette table 4x4 a
les lignes pas les colonnes
décrit avec le
attribut de règles.
Et un autre avec des lignes entre les colonnes:
règles="cols">
C'est
une table
où le
Colonnes
sont
Souligné
le l'attribut fournit des informations à propos de la table pour les lecteurs d'écran et autres agents utilisateurs qui pourraient avoir des difficultés à lire les tables. Pour utiliser l'attribut récapitulatif, vous rédigez une brève description de la table et la définissez comme valeur de l'attribut. Le résumé ne s'affichera pas sur la page Web dans la plupart des navigateurs Web standard.
Voici comment rédiger un tableau simple avec un résumé:
summary="Ceci est un exemple de tableau qui contient des informations de remplissage. Le but de ce tableau est de démontrer un résumé.">
colonne 1 ligne 1.
colonne 2 ligne 1.
colonne 1 ligne 2.
colonne 2 ligne 2.
L'attribut définit la largeur du tableau en pixels ou en pourcentage de l'élément conteneur. Si la largeur n'est pas définie, le tableau n'occupera que l'espace dont il a besoin pour afficher le contenu, avec une largeur maximale identique à la largeur de l'élément parent.
Pour construire un tableau avec une largeur spécifique en pixels, écrivez:
largeur="300">
Cette table fait 80 % de la largeur du conteneur dans lequel elle se trouve.
Et pour construire un tableau avec une largeur qui est un pourcentage de l'élément parent, écrivez:
largeur="80%">
Cette table fait 80 % de la largeur du conteneur dans lequel elle se trouve.
Attribut TABLE HTML 4.01 obsolète
Il existe un attribut de l'élément TABLE qui est obsolète en HTML 4.01 et obsolète en HTML5: align. Cet attribut vous permet de définir l'emplacement du tableau sur la page par rapport au texte qui se trouve à côté. Cet attribut a été déprécié dans HTML 4.01 et vous devez éviter de l'utiliser. Au lieu de cela, vous devez utiliser la propriété CSS ou margin-left: auto; et marge droite: auto; modes. La propriété float vous donne un résultat plus proche de celui fourni par l'attribut align, mais cela peut affecter la façon dont le reste du contenu de la page s'affiche. La marge de droite: auto; et marge gauche: auto; sont ce que le W3C recommande comme alternative.
Voici un exemple obsolète utilisant l'attribut align:
align="right">
Ce tableau est aligné à droite.
Le texte l'entoure vers la gauche.
Et pour obtenir le même effet avec du code HTML valide (non obsolète), écrivez:
style="float: right ;">
Ce tableau est aligné à droite.
Le texte l'entoure vers la gauche.
Attributs de TABLE obsolètes
Les informations précédentes décrivent les attributs de l'élément HTML qui sont valides en HTML 4.01 mais sont obsolètes en HTML5.
Ce qui suit décrit les attributs TABLE qui ne sont valides dans aucune spécification actuelle. Si vous ne vous souciez pas de la validation de vos pages et que vos utilisateurs utilisent un navigateur prenant en charge ces éléments, vous pouvez utiliser ces éléments. Mais la plupart d'entre eux ne sont pas pris en charge dans les navigateurs modernes ou ont des alternatives plus conformes aux normes.
Nous vous déconseillons d'utiliser ces attributs sur vos tableaux HTML.
L'attribut est un ancien attribut qui a été inclus avant que CSS ne soit largement pris en charge. Il vous permet de changer la couleur de fond du tableau. Vous pouvez définir un nom de couleur ou un code hexadécimal. Cet attribut fonctionne toujours dans de nombreux navigateurs, mais pour le HTML à l'épreuve du futur, vous ne devriez pas l'utiliser et utiliser CSS à la place.
La meilleure alternative à cet attribut est la propriété style.
Pour changer la couleur de fond d'un tableau, écrivez:
style="couleur de fond: #ccc;">
Ce tableau a un fond gris.
Semblable à l'attribut bgcolor, l'attribut bordercolor vous permet de changer la couleur de l'attribut. Cet attribut est uniquement pris en charge par Internet Explorer. À la place, vous devez utiliser la propriété de style border-color.
Pour changer la couleur de la bordure de votre tableau, écrivez:
style="border-color: red ;">
Ce tableau a une bordure rouge.
Les attributs bordercolorlight et bordercolordark ont été inclus dans Internet Explorer pour vous permettre de créer une bordure 3D autour de votre table. Cependant, à partir d'IE8 et plus, cela n'est pris en charge qu'en mode standard IE7 et Mode de quirks. Microsoft déclare que ces propriétés ne sont plus prises en charge.
Pendant une courte période, l'attribut cols sur l'élément TABLE a été proposé pour aider les navigateurs à connaître le nombre de colonnes d'une table. Le principe était que cela aiderait à accélérer le rendu de grandes tables. Cependant, il n'a été implémenté que par Internet Explorer, et à partir d'IE8 et des versions ultérieures, cela n'est pris en charge qu'en mode standard IE7 et en mode Quirks.
Comme il existe un attribut width (obsolète en HTML5), de nombreuses personnes ont supposé qu'il existait également un attribut height pour les tableaux. Mais comme les tableaux se conforment à la largeur de leur contenu ou à la largeur définie dans l'attribut CSS ou width, la hauteur n'a pas pu être contrainte. Ainsi, à la place, les navigateurs autorisaient l'attribut height à définir la hauteur minimale du tableau. Si la table était plus haute que cette hauteur, elle s'afficherait plus haute. Mais vous devriez utiliser la propriété.
Avec la propriété CSS height, vous pouvez contraindre la hauteur si vous utilisez également la propriété CSS pour définir ce qui se passe avec tout excès de contenu.
Pour définir la hauteur minimale sur une table, écrivez:
style="hauteur: 30em;">
Cette table a une hauteur d'au moins 30 cm.
Les deux attributs et l'espace ajouté autour des côtés gauche/droit (hspace) et haut/bas (vspace) de la table. Vous devriez plutôt utiliser la propriété style.
Pour définir l'espace vertical à 20 pixels et l'espace horizontal à 40 pixels, écrivez:
style="marge: 20px 40px ;"
Cette table a un vspace de 20 pixels et un hspace de 40 pixels.
L'attribut est un attribut booléen qui définit si le contenu de la table doit s'enrouler au bord de l'élément parent ou de la fenêtre ou forcer le défilement horizontal. Au lieu de cela, vous devez définir les caractéristiques d'emballage de chaque cellule du tableau à l'aide de la propriété CSS.
Pour créer une colonne avec beaucoup de texte sans retour à la ligne, écrivez:
style="white-space: nowrap;">C'est une colonne avec une tonne de contenu. Mais même s'il est plus large que le conteneur, le texte ne doit pas passer à la ligne suivante, mais forcer la fenêtre du navigateur à défiler horizontalement pour voir tout le contenu.
Enfin, l'attribut définit comment le contenu de chaque cellule doit s'aligner verticalement dans la cellule. Au lieu de cet attribut invalide, vous devez utiliser la propriété CSS sur chaque cellule dont vous souhaitez modifier l'alignement. Vous ne remarquerez pas les effets de ce style à moins que le contenu de la cellule ne soit inférieur à l'espace disponible créé par d'autres cellules plus grandes.
Pour forcer une cellule à s'aligner en bas (plutôt qu'au milieu, par défaut), écrivez:
Cette cellule est plus longue que les autres et forcera donc la hauteur à être plus haute. Ainsi, vous verrez que la cellule alignée verticalement est alignée vers le bas.
style="vertical-align: bottom;">Contenu en bas.
Contenu au milieu.