Langue de balisage HTML - Tags de table

Cliquez ici pour revenir à la colonne de tutoriel Wulin.com HTML.

Ci-dessus: Langue de balisage - Titre

Source d'origine

Savez-vous? Je ne sais pas quand il a commencé, l'utilisation de tables transformée en acte de pécheur? En effet, le plus grand mythe de la rédaction de pages Web basée sur les normes Web est d'arrêter plus d'utiliser des tables, jamais! Cela ressemble à une peste, il doit être évité, et doit être scellé et jeté dans une armoire poussiéreuse, et il est considéré comme une antique transmise des premiers jours de l'ère du développement Internet.

D'où vient un tel dégoût? C'était peut-être très simple au début, du moins avec une bonne raison. Beaucoup de gens seraient confiants dans la promotion des avantages de l'abandon de la disposition traditionnelle de la nidification de table et des images GIF vides, et à la place en utilisant une disposition CSS structurée flexible. Nous pouvons commencer à retirer toutes les tables de manière détachée, et même insister obstinément pour expulser toutes les tables, sans l'occasion.

Plus tard dans le livre, nous verrons la méthode de la disposition CSS et tous les avantages de le faire. Mais maintenant, examinons comment utiliser les tables dans la bonne situation, c'est-à-dire lors du marquage des listes de données. Nous examinerons quelques façons simples de rendre nos listes de données plus faciles à utiliser et plus belles.

Lorsque vous marquiez les données de liste, il n'y a absolument aucune raison de ne pas utiliser les balises de table. Mais attendez, qu'est-ce que les données de liste? Voici quelques exemples: itinéraire de temps de table de calcul du calendrier

Pour ces exemples et de nombreux autres cas, des effets CSS très complexes et stricts doivent être utilisés pour faire ressembler les données à un tableau. Vous pouvez peut-être imaginer que l'utilisation de flotteurs CSS intelligents pour localiser tous les projets entraînera des résultats incompatibles et contradictoires, sans parler qu'après avoir supprimé CSS, la lecture avec précision de chaque données deviendra probablement une tâche impossible. En fait, nous n'avons pas à avoir peur des tables - nous devons les utiliser avec leurs objectifs de conception originaux.

L'une des raisons pour lesquelles les tables sont critiquées est que si vous n'êtes pas utilisé avec soin, il y aura des défauts d'utilisation. Par exemple: les programmes de lecture d'écran sont difficiles à lire correctement le contenu, tandis que les petits appareils d'écran sont souvent dérangés par les tables utilisées pour disposer, mais nous avons des moyens simples d'augmenter la convivialité des tables de données de liste. Dans le même temps, nous établissons une structure flexible pour faciliter le réglage des styles avec CSS à l'avenir.

Regardons l'exemple simple de la figure 3-1, qui est le record de la ligue de l'American Baseball League:

Figure 3-1: Exemple de représentation des données typique

Il s'agit peut-être d'une données statistique très déprimantes pour les fans des Red Sox, mais la figure 3-1 est un parfait exemple des données de liste. Il a trois en-têtes de table (année, adversaire, record de saison (WL)), suivi des données de quatre ans. Sur la table se trouve le titre de la table, qui explique le contenu de la table.

La façon de marquer ce tableau de données est très intuitive, et nous pouvons le faire avec du code comme ceci:

<P Align = Center> Boston Red Sox World Series Championships </p>

<ballage>

<tr>

<td align = Center> <b> année </b> </td>

<td align = Center> <b> adversaire </b> </td>

<td align = Center> <b> Record de saison (WL) </b> </td>

</tr>

<tr>

<TD> 1918 </td>

<TD> Chicago Cubs </td>

<TD> 75-51 </td>

</tr>

<tr>

<TD> 1916 </td>

<TD> Brooklyn Robins </td>

<TD> 91-63 </td>

</tr>

<tr>

<TD> 1915 </td>

<TD> Philadelphia Phillies </td>

<TD> 101-50 </td>

</tr>

<tr>

<TD> 1912 </td>

<TD> New York Giants </td>

<TD> 105-47 </td>

</tr>

</ table>

Les résultats présentés de cette manière devraient être très similaires à la figure 3-1, mais nous pouvons ajouter quelques améliorations à cette base.

Tout d'abord, nous pouvons utiliser une balise <genture> plus sémantique pour stocker les championnats des Boston Red Sox World Series. La balise <légende> doit être suivie immédiatement après la balise de départ <Bile>, qui est généralement utilisée pour stocker le titre de la table ou la description des informations du tableau.

Il semble que cela permet aux utilisateurs de voir plus facilement le sujet du tableau, et cela peut également aider les personnes qui connaissent le contenu du Web par d'autres moyens.

Supprimons le paragraphe de début et ajoutons la <ménage correcte>:

<ballage>

<Wegention> Boston Red Sox World Series Championships </pention>

<tr>

<td align = Center> <b> année </b> </td>

<td align = Center> <b> adversaire </b> </td>

<td align = Center> <b> Record de saison (WL) </b> </td>

</tr>

<tr>

<TD> 1918 </td>

<TD> Chicago Cubs </td>

<TD> 75-51 </td>

</tr>

<tr>

<TD> 1916 </td>

<TD> Brooklyn Robins </td>

<TD> 91-63 </td>

</tr>

<tr>

<TD> 1915 </td>

<TD> Philadelphia Phillies </td>

<TD> 101-50 </td>

</tr>

<tr>

<TD> 1912 </td>

<TD> New York Giants </td>

<TD> 105-47 </td>

</tr>

</ table>

Surtout, le titre doit transmettre rapidement le sujet des informations suivantes. Selon les paramètres par défaut, la plupart des navigateurs visuels centrent le texte dans la balise <légende> en haut de la table. Bien sûr, nous pouvons utiliser CSS pour modifier le style des paramètres par défaut plus tard - ce problème sera discuté dans l'extension des pointes de ce chapitre. En fait, le titre est désormais situé dans une balise unique, ce qui rend notre travail de modification ultérieur plus facile et simple.

Page précédente 2 3 4 5 6 7 8 Page suivante Lire le texte complet