Langage de balisage HTML - Production de pages Web de balisage de table_HTML/Xhtml_Web
PHP中文网
Libérer： 2016-05-16 16:45:46
original
1796 Les gens l'ont consulté
Solutions de conception standardisées - Manuel de langage et de style de balisage Solutions de normes Web Le manuel de balisage et de style Partie 1 : Commencez avec le balisage à partir de la syntaxe de balisage Chapitre2 Forme maléfique ? Saviez-vous que depuis quand l'utilisation de tableaux est-elle devenue un acte coupable ? En effet, le plus grand mythe concernant l'écriture de pages Web basées sur les standards du Web est "N'utilisez plus jamais de tableaux Écoutez Les formulaires doivent être évités !" la peste, doit être scellée et jetée dans des armoires poussiéreuses, et conservée comme des antiquités transmises depuis les premiers jours d'Internet D'où vient un tel dégoût Peut-être au début Très simple, au moins il y a un bon. C'est pour cette raison que de nombreuses personnes vanteront avec confiance les avantages de l'abandon de la disposition traditionnelle des tableaux imbriqués et des images GIF à remplir, et du passage à la disposition CSS flexible et structurée. toutes les tables, et même commencer à insister obstinément pour expulser toutes les tables - quelle que soit l'occasion Nous verrons la méthode de mise en page CSS et tous les avantages de le faire plus tard dans le livre. Mais pour l'instant, commençons par. découvrez comment utiliser les tableaux dans le bon contexte, c'est-à-dire lors du balisage des listes de données. Nous examinerons quelques façons simples de rendre nos listes de données plus faciles à utiliser et plus belles C'est ça. it Table Il n'y a absolument aucune raison de ne pas utiliser la balise table lors de l'étiquetage des données de liste. Mais attendez, qu'est-ce que les données de liste ?
calendrier
tableur
Graphique
Calendrier Pour ces exemples et bien d'autres cas, des effets CSS très complexes et stricts doivent être utilisés pour que les données ressemblent à un tableau. Vous pouvez peut-être imaginer ce que vous obtenez après avoir utilisé des flotteurs CSS intelligents et positionné tous les éléments. des résultats incompatibles et contradictoires, sans compter que sans CSS, lire avec précision chaque élément d'information peut devenir une tâche impossible. En fait, nous n'avons pas à avoir peur des tableaux - nous devons les utiliser dans le but pour lequel ils ont été conçus. . Des formulaires pour tout le monde L'une des raisons pour lesquelles les formulaires sont vilipendés est qu'ils présentent des défauts d'utilisation s'ils ne sont pas utilisés avec précaution. Par exemple : les lecteurs d'écran ont du mal à lire correctement le contenu et le petit écran. Les appareils sont souvent perturbés par les tableaux utilisés pour la mise en page, mais nous disposons de moyens simples pour augmenter la convivialité des tableaux de données de liste. En même temps, créons une structure flexible pour le style futur avec CSS Jetons un coup d'œil à la figure 3. - Un exemple simple de 1, c'est le record de la Ligue américaine : Figure 3-1 : Exemple de tableau de données typique C'est peut-être très déprimant pour les fans des Red Sox Données statistiques, mais la figure 3-1 est un exemple parfait de données de liste. Elle comporte trois en-têtes de tableau (année, adversaire, record de la saison (w-l)), suivis de quatre années de données. Au-dessus du tableau se trouvent le titre du tableau, la description du contenu. table. La façon de marquer ce tableau de données est très intuitive. Nous pouvons terminer le travail avec un code comme celui-ci :
Championnats des Red Sox de Boston< ;/ p>
Année
< ="center">Adversaire
Record de la saison (W-L)< ;/ td>
1918
Chicago Cubs
1916
Brooklyn Robins
< ;td>91-63
1915
Phillies de Philadelphie
101-50
1912
Giants
105-47
Les résultats affichés de cette manière doivent être les la même chose que l'image 3-1 est très similaire, mais nous pouvons ajouter quelques améliorations sur cette base Tout d'abord, nous pouvons utiliser une balise
plus sémantique pour stocker "Boston Red Sox World Series Championships".< caption> La balise ; doit suivre immédiatement la balise de début
, qui est généralement utilisée pour stocker le titre du tableau ou la description des données du tableau Il semble que cela facilite la visualisation par les utilisateurs. le thème du tableau, et cela peut également aider quelqu'un qui connaît le contenu de la page d'une autre manière. Supprimons le paragraphe d'ouverture et ajoutons la correcte :
Championnats de la Série mondiale des Red Sox de Boston
Année< /b>
Adversaire
< b>Record de saison (W-L)
1918
75-51
1916
Brooklyn Robins
91-63
1915
Phillies de Philadelphie
101-50
Géants de New York
105-47
< caption> Les fichiers css ne sont pas compatibles avec ce qui se passe — Il n'y a rien de plus simple qu'un simple CSS.独特的标签内,正好让我们之后的修工作变得轻松简单.
#p#
标签也能帮助非可视化浏览器 —这部分我们稍后进行深入讨论. 示例表格中的表头是最上面的那一行 : Année, adversaire et record de la saison (W-L).
Championnats de la série mondiale des Red Sox de Boston
Année
< th id="adversaire">Adversaire
Record de saison (W-L)
< ;tr> ;
1918
Chicago Cubs
75-51
1915
Phillies de Philadelphie
101-50
1912
Géants de New York
105- 47
Nous choisissons un nom court et descriptif pour chaque identifiant d'en-tête, puis nous donnons à chaque donnée Ajoutez les attributs d'en-tête appropriés à la cellule afin que le contenu corresponde à l'identifiant d'en-tête correct :
Boston Red Championnats des Sox World Series
Année
Adversaire
Record de saison (W-L)
< >1918
Chicago Cubs
75-51 < ;/tr>
1916
Brooklyn Robins< ;/td>
91-63
1915
Phillies de Philadelphie
101-50
1912
Géants de New York
105-47
Après avoir établi la correspondance entre l'en-tête du tableau et le contenu, le lecteur d'écran Il Il est possible de lire chaque ligne du tableau de cette manière : « Année : 1918, Adversaire : Cubs de Chicago, Record de saison (W-L) : 75-51 ». Par rapport à la lecture du contenu de chaque cellule de gauche à droite, ceci a beaucoup plus de sens. Permettre à chaque
d'avoir un identifiant unique présente d'autres avantages. Nous pouvons utiliser cette base d'identification pour définir des règles CSS spéciales, qui seront discutées dans l'extension de la technique à la fin de ce document. chapitre. Cette méthode.
#p#
Utilisez l'attribut abbr Dans l'exemple précédent, vous pouvez avoir l'impression que le "Season Record (W-L)" dans l'en-tête est trop long pour être prononcé à l'aide d'un discours synthétiseur À ce stade, tant que nous ajoutons l'attribut abbr, nous pouvons raccourcir le contenu de la prononciation tout en conservant le texte original dans la cellule
pour le navigateur visuel.
Année
Adversaire
Record de saison ( W-L)< ;/th>
1918
Chicago Cubs
1916
Brooklyn Robins
91-63
1915
Phillies de Philadelphie
101-50
1912
Giants de New York
105-47
Nous avons ajouté abbr="Record" , le lecteur d'écran lira "Enregistrer" en utilisant la version courte de l'en-tête du tableau. >Ici, je voudrais également mentionner trois balises liées au tableau. Elles fournissent non seulement une sémantique plus précise pour la structure du tableau, mais fournissent également des balises supplémentaires pour. css, afin que vous n'ayez pas besoin d'utiliser < lors du style des lignes du tableau. tr>Il existe de nombreuses classes dans la conception des balises. Citant une description du W3C dans la spécification HTML4.01 (http://www .php.cn/): Citation : Les lignes du tableau peuvent être divisées en en-têtes de tableau, pieds de page et un nombre illimité de corps de tableau à l'aide des balises thead, tfoot et tbody. Cette méthode de classification permet au navigateur de prendre en charge la fonction de défilement indépendant du corps du tableau. Lors de l'impression de tableaux longs, l'en-tête et le pied de page peuvent également être répétés sur chaque page contenant des données de tableau
Par conséquent, l'utilisation de cette méthode de classification peut être utilisée. permettent également aux utilisateurs de navigateurs prenant en charge les corps de tableau indépendants de lire le contenu du tableau, en particulier les tableaux longs et
doivent apparaître avant contenu en premier et marquez le tableau de cette manière de classification des lignes du tableau. Il ressemble à ceci :
...table. contenu de l'en-tête...
... contenu du pied de page du tableau...
...ligne de données du tableau...
...ligne de données du tableau...
...ligne de données du tableau...
< ;/table>
Vous constaterez que les données d'en-tête et de pied de page sont entourées de balises et et placées avant les lignes de données du tableau Comme je l'ai déjà dit, ces balises fournissent non seulement plus d'informations pour la sémantique précise du tableau. , et peut également fournir des ancres de style pour CSS, vous permettant de définir des règles CSS pour ces contenus spécifiques sans avoir à concevoir autant de classes pour chaque
. Par exemple, si nous voulons uniquement donner un bloc de données (marqué avec
) définit une couleur d'arrière-plan différente des autres blocs. Il nous suffit ensuite d'écrire ce morceau de CSS pour atteindre l'objectif : tbody { background-color: gray ; > S'il n'y a pas de balise tbody, nous devons ajouter un attribut de classe à chaque balise
à laquelle nous souhaitons ajouter un fond gris. Des méthodes de marquage significatives peuvent souvent être utilisées ultérieurement avec les paramètres CSS. La définition des styles devient très simple. C'est un bon exemple.
#p#
Les tables sont-elles mauvaises ? Je pense que si nous utilisons les balises de table selon leur objectif initial, alors la réponse est définitivement « non ! » Les abus des tables sont à juste titre condamnés. pour créer des mises en page complexes et imbriquées, mais les tableaux donnent aux blocs de données la bonne structure dont ils ont besoin Nous ne pouvons pas passer tout le livre à décrire tout ce qui est nécessaire pour créer les techniques de tableau parfaites, je vais donc m'arrêter ici et j'espère. vous commencez à savoir comment créer des tableaux simples, utilisables et facilement modifiables avec CSS. En parlant de styles, modifions l'exemple précédent avec quelques techniques CSS différentes. Extension de compétences Comme dans le chapitre précédent, nous utilisons comme base un balisage structuré sémantique flexible, puis utilisons CSS pour y ajouter des styles Tout d'abord, jetons un coup d'œil à la bordure simple technique, créons une bordure sur une seule ligne sur l'exemple, puis nous ajoutons un style unique au titre et à l'en-tête du tableau Créer une bordure Avoir déjà un effet 3D sur l'attribut par défaut de la bordure En avez-vous marre ? Moi aussi. De manière générale, ajouter border="1" à la balise table aura un effet similaire à celui de la figure 3-1. Bien sûr, vous pouvez également changer de méthode. pour utiliser CSS L'astuce des bordures. Tout d'abord, nous ajoutons une bordure d'un pixel des deux côtés (à droite et en bas) de chaque
Ajouter uniquement des bordures des deux côtés revient à créer des bordures de même largeur partout tout en profitant au maximum de La clé est que le navigateur puisse l'afficher correctement. Si j'ajoute une bordure sur tous les côtés, les côtés supérieur et gauche de la bordure provoqueront un chevauchement lorsque les cellules seront disposées. Dans un exemple ultérieur, je donnerai une méthode. pour n'en utiliser qu'un seul La règle de bordure est un moyen d'obtenir l'effet enfantin Vous constaterez qu'il ne manque que les bordures supérieure et gauche dans tout le tableau de la figure 3-2. Afin de compléter la bordure, nous ajoutons des styles. à l'élément
Figure 3-2 : pour l'exemple de tableau avec et td plus lignes latérales des deux côtés
Figure 3-3 Exemple de tableau après avoir rempli les lignes latérales
#p#
Supprimer l'espace Nous avons maintenant un tableau complet, mais qu'en est-il de l'espacement entre les bordures Malheureusement, puisque la plupart des navigateurs l'éditeur définira un petit patch extérieur ? par défaut, ces lacunes gênantes seront exposées. Ce que nous pouvons faire est d'ajouter l'attribut border-collapse à l'élément table pour supprimer ces lacunes et obtenir le style que nous voulons. table { border-top : 1px solid #999; border-left : 1px solid #999; border-collapse : réduire; }th, td { border-right : 1px solid #999; border-bottom: 1px solid #999; } Après avoir ajouté l'attribut collapse à border-collapse, nous pouvons voir que le style précis de bordure sur une seule ligne est obtenu, comme illustré dans la figure 3-4
Figure 3-4 : Exemple de tableau après utilisation de l'attribut border-collapse
Ne prend pas en charge la version d'IE pour Mac
À l'exception d'Internet Explorer pour Mac, d'autres navigateurs prennent en charge l'abréviation de CSS comme ceci : table { border-collapse: collapse; } th, td { border: 1px solid # 999;> La méthode à utiliser dépend bien sûr de vous, il y a encore des gens qui utilisent encore IE pour Mac, et l'utilisation de cette méthode alternative leur fera voir une duplication des bords, si vous ne vous souciez pas de cette chose, utilisons une approche simplifiée. À proprement parler, il ne s'agit que d'un problème d'affichage, et la fonctionnalité du tableau n'est pas du tout affectée Puisque je ne peux pas ignorer le fanatique de Mac (tout concepteur de sites Web digne de ce nom devrait (comme ça), donc. dans les exemples futurs, j'utiliserai toujours la version qui peut être affichée correctement dans IE pour Mac Agrandissez l'espace Maintenant, nous avons une table parfaite entre nos mains, elle a l'air un peu à l'étroit. cependant... Ajoutons un peu d'inline aux règles th, td à portée de main pour leur donner de l'espace pour respirer (Figure 3-5) table { border-top: 1px solid #999; border-left : 1px solid #999 ; border-collapse : collapse; } th, td { padding : 10px; border-right : 1px solid #999 ; border-bottom : 1px solid #999; } Figure 3-5 : Exemple de tableau avec un patch intérieur de 10 pixels Le saviez-vous si vous utilisez ? une seule valeur pour définir le patch intérieur (comme 10px dans l'exemple précédent), vous devez ajouter la même valeur de paramètre aux quatre côtés de l'élément. Vous pouvez également suivre l'ordre dans le sens des aiguilles d'une montre (haut, droite, bas, gauche). spécifiez les paramètres de chaque côté séparément. Si vous définissez le patch interne sur 10px 5px 2px 10px, cela ajoutera un patch interne de 10px en haut, un patch interne de 5px à droite et un patch interne de 2px en bas. ajoutez un patch intérieur de 10 pixels sur le côté gauche. Un autre raccourci : si les valeurs de réglage pour le haut et le bas sont les mêmes, et que les valeurs de réglage pour la gauche et la droite sont également les mêmes. , vous ne devez les définir qu'une seule fois respectivement. Si vous définissez If padding: 10px 5px est défini, des patchs internes de 10px seront ajoutés aux parties supérieure et inférieure, et des patchs internes de 5px seront ajoutés aux côtés gauche et droit Figure 3-6 : Définissez les patchs intérieurs dans le sens des aiguilles d'une montre et l'ordre des limites extérieures
#p#
Ajuster l'effet d'affichage de l'en-tête du compteurNous pouvons facilement ajouter une couleur d'arrière-plan à l'en-tête du compteur et choisir différentes polices pour rendre l'en-tête du compteur plus évident, car we La balise
est utilisée au lieu de définir directement le contenu en gras dans la ligne, nous pouvons donc définir directement le style du contenu de l'en-tête sans ajouter d'autres balises Nous ajoutons également en dessous du titre Dans le précédent. point, nous utilisons également différentes polices et couleurs (rouge, bien sûr) pour mettre en évidence le contenu du titre (Figure 3-7)
Ajouter une image d'arrière-plan à l'en-tête du tableauNous venons d'ajouter un arrière-plan gris à l'élément
du tableau, mais nous pouvons en fait aller plus loin et utiliser une image d'arrière-plan en mosaïque pour créez de beaux effets dans la grille, par exemple, nous pouvons utiliser des rayures grises détaillées pour simuler de nombreux styles de fenêtre sous Mac OS (Autres outils de dessin que vous connaissez) Créer une petite image Dans cet exemple, nous allons créer un effet alterné. de 2 pixels de gris et 2 pixels de blanc, l'image ne doit donc avoir qu'une hauteur de 4 pixels. Peu importe si la largeur est différente, car elle l'aplatira en
afin d'économiser de la bande passante, nous ne faisons qu'une largeur de 1 pixel (Figure 3-8)
Figure 3-8 : Image en bande de 1X4 pixels (agrandie) CSS Suivez le code de l'exemple tout à l'heure. La seule chose que nous devons modifier est de changer la couleur d'arrière-plan en fonction du chemin de la petite image que nous venons de créer, sauf indication contraire, sinon selon les paramètres par défaut, l'image d'arrière-plan sera carreler automatiquement dans chaque direction
La figure 3-9 est le tableau après avoir appliqué ce style. La partie d'en-tête a un arrière-plan rayé. Vous devez également expérimenter avec d'autres images d'arrière-plan. pouvez essayer de créer le meilleur effet pour les en-têtes ou les informations. Profitez du processus de cette expérience . 圖3-9:在表頭使用平鋪背景的範例
#p#
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
}
Figure 3-6 : Définissez les patchs intérieurs dans le sens des aiguilles d'une montre et l'ordre des limites extérieures 
Figure 3-7 : Titre stylisé et < th>
Suivez le code de l'exemple tout à l'heure. La seule chose que nous devons modifier est de changer la couleur d'arrière-plan en fonction du chemin de la petite image que nous venons de créer, sauf indication contraire, sinon selon les paramètres par défaut, l'image d'arrière-plan sera carreler automatiquement dans chaque direction 
組合規則,簡化內容
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
