Les attributs de table HTML vous donnent beaucoup plus de contrôle sur les tables HTML. Un grand nombre d'attributs sont disponibles dans les tableaux pour les rendre plus intéressants et modifier l'apparence de votre page.
Attributs d'élément HTML TABLE
En HTML5, l'élément utilise les attributs globaux et un autre attribut:. Et il a changé pour n’avoir que la valeur de 1 ou vide (c'est-à-dire border = ""). Si vous souhaitez modifier la largeur de la bordure, vous devez utiliser le largeur de la bordure Propriété CSS.
Voir ci-dessous pour en savoir plus sur les attributs de table HTML5 valides.
Il existe également plusieurs attributs faisant partie de la spécification HTML 4.01 qui sont devenus obsolètes dans HTML5:
- -Utilisez le CSS
rembourragepropriété sur la tableTDetTHéléments. - -Utilisez la propriété CSS
espacement des borduressur la table. - -Utilisez les styles CSS
couleur de bordure: noir;etstyle de borduresur la table. - -Utilisez les styles CSS
couleur de bordure: noir;etstyle de borduresur les éléments appropriés du tableau. - -Au lieu de cela, vous devriez décrire la structure de la table dans un
LÉGENDEou mettre toute la table dans unFIGUREet en le décrivant dans unFIGCAPTION. Vous pouvez également simplifier la structure du tableau afin qu'aucune explication ne soit nécessaire. - -Utilisez le CSS
largeurpropriété.
Et un attribut obsolète en HTML 4.01 et obsolète en HTML5.
En savoir plus sur les attributs HTML 4.01 TABLE.
aligner-Utilisez le CSSmargepropriété à la place.
Il existe également plusieurs attributs qui ne font pas partie d'une 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 la propriété CSS
Couleur de fondau lieu. couleur de la bordure-Utilisez la propriété CSScouleur de la bordureau lieu.bordercolorlight-Utilisez la propriété CSScouleur de la bordureau lieu.bordercolordark-Utilisez la propriété CSScouleur de la bordureau lieu.cols-Il n'y a pas d'alternative à cet attribut.la taille-Utilisez la propriété CSSla tailleau lieu.- -Utilisez la propriété CSS
margeau lieu. - -Utilisez la propriété CSS
margeau lieu. - -Utilisez la propriété CSS
espace blancau lieu. - -Utilisez la propriété CSS
alignement verticalau lieu.
En savoir plus sur les attributs TABLE spécifiques au navigateur.
Attributs d'élément TABLE TABLE HTML5
Comme nous l'avons mentionné ci-dessus, il n'y a qu'un attribut, au-delà des attributs globaux, qui est valide sur un HTML5 TABLE élément: frontière.
le frontière attribut est utilisé pour définir une bordure autour de la table entière et de toutes les cellules qu’elle contient. On se demandait s'il serait inclus dans la spécification HTML5, mais cela restait parce que cela fournissait des informations sur la structure du tableau, au-delà des implications de style.
Pour ajouter le frontière attribut, vous définissez la valeur sur 1 s'il y a une bordure et vide (ou laissez 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 celle-ci 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 une table avec une bordure, écrivez:
border = "1" >
Ceci est une table avec une bordure
Certains attributs HTML 4.01 sont obsolètes dans HTML5. Si vous envisagez d'écrire des documents HTML 4.01, vous pouvez les apprendre, sinon vous pouvez les ignorer. La plupart de ces attributs ont des alternatives, décrites ci-dessus.
Nous décrivons les attributs de l'élément valides en HTML5 (et HTML 4.01). Ceci décrit laTABLE attributs 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 proposent des alternatives qui rendront vos pages encore plus fiables pour l'avenir lorsque vous passerez au format 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 construire une table avec une bordure de 5 pixels, écrivez:
<> border = "5" > Cette table a une bordure de 5px.
Voir un exemple de deux tables avec des bordures.
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 deux pixels. Met lerembourrage cellulaire à0 si vous ne voulez pas d'espace entre le contenu et les bordures.
Pour définir le remplissage de la cellule sur 20, écrivez:
<> cellpadding = "20" > Cette table a un rembourrage cellulaire de 20. Les bordures de cellules seront séparées de 20 pixels.
Voir un exemple de tableau avec cellpadding
L'attribut définit la quantité d'espace entre les cellules du tableau et le contenu de la cellule. Commerembourrage cellulaire, la valeur par défaut est définie sur deux pixels, vous devez donc le définir sur0 si vous voulez pas d'espacement des cellules.
Pour ajouter un espacement de cellules à une table, écrivez:
<> cellpacing = "20" > Cette table a un espacement cellulaire de 20. Les cellules seront séparées de 20 pixels.
Voir un tableau avec cellulespacing
L'attribut identifie les parties de la bordure entourant l'extérieur d'une table qui seront visibles.Vous pouvez encadrer votre table sur les quatre côtés, un seul côté, haut et bas, gauche et droite, ou aucun.
Voici le code HTML pour une table avec seulement la bordure de gauche:
frame = "lhs" >
Cette table aura seulement le côté gauche encadré.
Et un autre exemple avec le cadre inférieur:
frame = "en dessous" >
Ce tableau a un cadre en bas.
Découvrez quelques tables avec des cadres
L'attribut est similaire à laCadre attribut, seulement il affecte les frontières autour des cellules de la table. Vous pouvez définir des règles sur toutes les cellules, entre les colonnes, entre les groupes tels queTBODY etTFOOT ou aucun.
Pour construire une table avec des lignes uniquement entre les lignes, écrivez:
rules = "rows" >
Cette table 4x4 a les lignes et non les colonnes décrit avec le attribut de règles.
Et un autre avec des lignes entre les colonnes:
rules = "cols" >
C'est une table où le des colonnes sont a souligné
Voici un exemple de tableau avec des règles
L'attribut fournit des informations sur la table aux lecteurs d'écran et aux autres agents utilisateurs susceptibles de rencontrer des difficultés pour lire les tables. Pour utiliser lerésumé attribut, vous écrivez une brève description de la table et le définissez comme valeur de l’attribut. Le résumé ne sera pas affiché sur la page Web dans la plupart des navigateurs Web standard.
Voici comment écrire un tableau simple avec un résumé:
<> summary = "Ceci est un exemple de table contenant des informations sur le remplisseur. Le but de cette table est de montrer un résumé." > colonne 1 rangée 1 colonne 2 rangée 1 colonne 1 rangée 2 colonne 2 rangée 2
Voir un tableau avec un résumé
L'attribut définit la largeur de la table en pixels ou en pourcentage de l'élément conteneur. Si lalargeur n'est pas défini, la table n'occupera que l'espace nécessaire pour afficher le contenu, avec une largeur maximale identique à la largeur de l'élément parent.
Pour construire un tableau d'une largeur spécifique en pixels, écrivez:
<> width = "300" > Cette table représente 80% de la largeur du conteneur dans lequel elle se trouve.
Et pour construire une table avec une largeur correspondant à un pourcentage de l'élément parent, écrivez:
<> width = "80%" > Cette table représente 80% de la largeur du conteneur dans lequel elle se trouve.
Voir un exemple de table avec une largeur
Attribut HTML 4.01 TABLE obsolète
Il y a un attribut de laTABLE Elément obsolète en HTML 4.01 et obsolète en HTML5:aligner. Cet attribut vous permet de définir l'emplacement de la table sur la page par rapport au texte qui se trouve à côté. Cet attribut est obsolète en HTML 4.01 et vous devez éviter de l'utiliser. Au lieu de cela, vous devez utiliser la propriété CSS ou lemarge gauche: auto; etmarge droite: auto; modes. leflotte la propriété vous donne un résultat plus proche de ce que lealigner attribut fourni, mais cela peut affecter l’affichage du reste du contenu de la page. lemarge droite: auto; etmarge gauche: auto; sont ce que le W3C recommande comme alternative.
Voici un exemple déconseillé utilisant lealigner attribut:
<> align = "right" > Ce tableau est bien aligné Le texte passe autour de lui vers la gauche
Voir un exemple déconseillé en utilisant lealigner attribut.
Et pour obtenir le même effet avec du code HTML valide (non obsolète), écrivez:
<> style = "float: right;" > Ce tableau est bien aligné Le texte passe autour de lui vers la gauche
Ce qui suit expliqueTABLE attributs qui ne font pas partie d'une spécification HTML.
Les informations précédentes décrivent les attributs de l'élément HTML qui sont valides dans HTML 4.01 mais obsolètes dans HTML5.
Ce qui suit décritTABLE attributs qui ne sont valables dans aucune spécification en cours. Si vous ne souhaitez pas que vos pages soient validées 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 par les navigateurs modernes ou proposent des alternatives plus conformes aux normes.
Nous déconseillons d'utiliser ces attributs sur vos tableaux HTML.
Cet attribut est un ancien attribut inclus avant que CSS ne soit largement pris en charge. Cela vous permet de changer la couleur de fond de la table. Vous pouvez définir un nom de couleur ou un code hexadécimal. Cet attribut fonctionne toujours dans de nombreux navigateurs, mais pour le code HTML évolué, vous ne devez pas l'utiliser, mais plutôt CSS.
La meilleure alternative à cet attribut est la propriété de style.
Pour changer la couleur de fond d'une table, écrivez:
<> style = "background-color: #ccc;" > Ce tableau a un fond gris
Semblable à labgcolor attribut, lecouleur de la bordure attribut vous permet de changer la couleur de l'attribut. Cet attribut est uniquement pris en charge par Internet Explorer. Au lieu de cela, vous devez utiliser la propriété de style border-color.
Pour changer la couleur de la bordure de votre table, écrivez:
style = "border-color: red;" >
Cette table a une bordure rouge.
lebordercolorlight etbordercolordark Des attributs ont été inclus dans Internet Explorer pour vous permettre de créer une bordure 3D autour de votre table. Cependant, à partir de IE8 et supérieur, cela n'est pris en charge que dans IE7 Standards Mode et Quirks Mode. Microsoft déclare que ces propriétés ne sont plus prises en charge.
Pendant une courte période, lecols attribuer sur leTABLE element a été proposé pour aider les navigateurs à savoir le nombre de colonnes d’un tableau. Le principe était que cela aiderait à accélérer le rendu de grands tableaux. Cependant, il n'a été implémenté que par Internet Explorer et, à partir de IE8, il n'est pris en charge que dans IE7 Standards Mode et Quirks Mode.
Parce qu'il y a unlargeur attribut (obsolète en HTML5), beaucoup de gens ont supposé qu’il y avait unela taille attribut pour les tables aussi. Mais parce que les tableaux se conforment à la largeur de leur contenu ou à la largeur définie dans le CSS oulargeur attribut, la hauteur ne peut pas être contrainte. Alors au lieu de cela, les navigateurs ont permis àla taille attribut pour définir la hauteur minimale de la table. Si la table était plus haute que cette hauteur, elle serait affichée plus grande. Mais vous devriez utiliser la propriété
Avec le CSSla taille Si vous utilisez également la propriété CSS, vous pouvez limiter la hauteur si vous définissez le contenu en excès.
Pour définir la hauteur minimale sur une table, écrivez:
<> style = "hauteur: 30em;" > Ce tableau a une hauteur minimale de 30 ems.
Les deux attributs et l’espace ajouté autour des côtés gauche / droit (hspace) et haut / bas (vspace) de la table. Vous devez utiliser la propriété style à la place.
Pour définir l’espace vertical sur 20 pixels et l’espace horizontal sur 40 pixels, écrivez:
<> style = "margin: 20px 40px;" Ce tableau a un espace de 20 pixels et un espace de 40 pixels.
L'attribut est un attribut booléen qui définit si le contenu de la table doit être renvoyé au bord de l'élément ou de la fenêtre parent ou forcer le défilement horizontal. Au lieu de cela, vous devez définir les caractéristiques d'habillage de chaque cellule de tableau à l'aide de la propriété CSS.
Pour créer une colonne avec beaucoup de texte non enveloppée, écrivez:
<> style = "espace-blanc: nowrap;" > Ceci est une colonne avec une tonne de contenu. Mais même s'il est plus large que le conteneur, le texte ne doit pas être renvoyé à la ligne suivante, mais obliger la fenêtre du navigateur à faire défiler horizontalement pour voir tout le contenu.
Enfin, l'attribut définit l'alignement vertical du contenu de chaque cellule dans la cellule. Au lieu de cet attribut non valide, vous devez utiliser la propriété CSS sur chaque cellule dont vous souhaitez modifier l'alignement. Vous ne remarquerez les effets de ce style que si le contenu de la cellule est inférieur à l'espace disponible créé par d'autres cellules plus grandes.
Pour forcer une cellule à s'aligner sur le bas (plutôt que le milieu, par défaut), écrivez:
Cette cellule est plus longue que le reste et obligera donc la hauteur à être plus grande. 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.
