Question

est-il nécessaire d'avoir <th> dans une table? même si la table n'a pas cap?

table a 3 autre balise <thead> <tbody> <tfoot> est-il nécessaire d'utiliser tout, même si je n'ai rien pour le pied de table. Firefox par défaut ajouter tout cela dans le code.

et est-il nécessaire, <th> doit toujours être dans un <thead>

et si j'ai un cap dans le contenu reçu du client, et le cap est à l'extérieur de la table, mais ayant trait au tableau alors comment dois-je placer cette position pour la table

En tant que tableau ci-dessus

<h3>Heading of table<h3>
<table>......</table>

comme rubrique de la table

<table>
<thead><tr rowspan=3><th>Heading of table</th></tr></thead>

ou comme légende du tableau

<table>
<caption> Heading of table</caption>

Ce qui est bon pour lecteur d'écran et sémantiquement correct?

Était-ce utile?

La solution

Selon le DTD HTML c'est le modèle de contenu pour les tables HTML:

<!ELEMENT TABLE - -
     (CAPTION?, (COL*|COLGROUP*), THEAD?, TFOOT?, TBODY+)>
<!ELEMENT CAPTION  - - (%inline;)*     -- table caption -->
<!ELEMENT THEAD    - O (TR)+           -- table header -->
<!ELEMENT TFOOT    - O (TR)+           -- table footer -->
<!ELEMENT TBODY    O O (TR)+           -- table body -->
<!ELEMENT COLGROUP - O (COL)*          -- table column group -->
<!ELEMENT COL      - O EMPTY           -- table column -->
<!ELEMENT TR       - O (TH|TD)+        -- table row -->
<!ELEMENT (TH|TD)  - O (%flow;)*       -- table header cell, table data cell-->

Donc, c'est la syntaxe illégale:

<thead><th>Heading of table</th></thead>

Il devrait être:

<thead><tr><th>Heading of table</th></tr></thead>

éléments de <th> ne sont pas tenus partout. Ils sont tout simplement l'un des deux types de cellules (l'autre étant de <td>) que vous pouvez utiliser dans une ligne de tableau. Un <thead> est une section de table facultative qui peut contenir une ou plusieurs rangées.

Modifier Quant à pourquoi pour utiliser <thead> il y a plusieurs raisons:

  1. sémantique: Vous différencier entre le contenu de votre table et "métadonnées". Ceci est le plus souvent utilisé pour délimiter entre les en-têtes de colonnes et de lignes de données;
  2. Accessibilité: il aide les gens qui utilisent des lecteurs d'écran pour comprendre le contenu de la table;
  3. Médias non-écran: Impression d'une table multi-pages peut vous permettre de mettre le contenu de <thead> en haut de chaque page afin que les gens puissent comprendre ce que les colonnes qui signifie sans effleurant à plusieurs pages;
  4. Styling: CSS peut être appliquée à <tbody> éléments, éléments de <thead>, à la fois ou une autre combinaison. Il vous donne quelque chose d'autre à écrire un sélecteur contre;
  5. Javascript: cela vient souvent lors de l'utilisation des bibliothèques jQuery et similaires. Les informations supplémentaires sont utiles dans le code d'écriture.

À titre d'exemple (5), vous pouvez faire ceci:

$("table > tbody > tr:nth-child(odd)").addClass("odd");

L'élément <thead> signifie les lignes ne seront pas de style de cette façon. Ou vous pourriez faire:

$("table > tbody > tr").hover(function() {
  $(this).addClass("hover");
}, function() {
  $(this).removeClass("hover");
});

avec:

tr.hover { background: yellow; }

ce qui exclut à nouveau les lignes de <thead>.

Enfin, un grand nombre de ces mêmes arguments à l'aide d'éléments de <th> sur des éléments de <td>: vous indiquez que cette cellule ne sont pas données, mais un en-tête d'une sorte. Souvent, ces cellules seront regroupées en une ou plusieurs lignes dans la section <thead> ou être la première cellule de chaque ligne en fonction de la structure et la nature de votre table.

Autres conseils

Utilisez <th>s si vous affichez des données sous forme de tableau - utiliser une pour chaque colonne. Il est agréable pour vos utilisateurs réguliers et essentiel pour les lecteurs d'écran. Ne pas utiliser <th>s si vous utilisez la table à des fins de mise en page (ou d'autres régimes infâmes ...)

Non, il est pas nécessaire d'avoir e. Mais il ne semble pas que vous utilisez e droit. En règle générale, vous en avez un pour chaque colonne. Un exemple simple de th utilisé correctement est:

<table>
<tr><th>Breed</th><th>Name</th></tr>
<tr><td>Pekingese</td><td>Pluto</td></tr>
<tr><td>Lab</td><td>Buddy</td></tr>
</table>

Vous pouvez également faire:

<table>
<thead><tr><th>Breed</th><th>Name</th></tr></thead>
<tr><td>Pekingese</td><td>Pluto</td></tr>
<tr><td>Lab</td><td>Buddy</td></tr>
</table>

La réponse est

OUI!

si vous utilisez des tables pour afficher les données tabulaires .

Les données tabulaires sont organisées en lignes et en colonnes pour une raison. La signification de la donnée dans une cellule de table est définie par le sens de la colonne et la ligne dans laquelle il apparaît.

Il est important d'identifier les cellules qui donnent un sens aux lignes et colonnes plutôt séparément des cellules qui contiennent des données simplement.

Par exemple, le tableau suivant transmet aucune information significative:

34 56 90 15
45 65 85 30
50 55 70 35

Les chiffres ont de sens que si les lignes et les colonnes sont donnés des noms. Ces noms sont marqués à l'aide <th>:

    Feb May Aug Nov
ITH
JFK
IST

Bien sûr, nous ne savons toujours pas ce que ces chiffres signifient ce qui explique pourquoi <caption> est nécessaire:

Average Temperatures by Month at Selected Airports
    Feb May Aug Nov
ITH
JFK
IST

Enfin, il est important de noter des détails tels que les unités de mesure, les sources de données, etc. Ce type d'information va généralement dans le pied de la table:

Average Temperatures by Month at Selected Airports
    Feb May Aug Nov
ITH
JFK
IST
Temperatures in °F. Source: Publication #456 MNMO

Le titre de la table passe en <caption> . <thead> et les sections de <tfoot> sont particulièrement utiles quand une table grossit. Voir Comment traiter les sauts de page lorsque l'impression d'une grande table HTML pour un exemple.

Vous pouvez utiliser <colgroups> regrouper les données liées logiquement.

Vous voulez utiliser ce qui décrit le mieux vos données.

<caption> décrira la table. th va créer une cellule unique qui est généralement utilisé pour décrire une colonne (mais peut également être utilisé pour les titres de ligne).

thead, tfoot et tbody. tous peuvent être utilisés et sont facultatifs à condition qu'ils soient dans cet ordre, le cas échéant, et vous avez seulement un thead et un tfoot (mais vous pouvez avoir plusieurs tbody. De nombreux navigateurs (tous?) seront les ajouter implicitement si vous n » t, mais la spécification dit qu'ils sont en option.

th peut apparaître dans toute tr quel que soit l'endroit où le tr est.

<table>
     <tr>
        <td>text</td>
     </tr>      
</table>

est la table minimum que je peux penser.

Les avantages sont la sémantique. Les moyens de <th> T capable H eader. Utilisez-le pour baliser les en-têtes de vos colonnes. En général, dans un <thead>.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top