recherche

Maison >interface Web >tutoriel HTML >Langage de balisage HTML - Production de pages Web de balisage de table_HTML/Xhtml_Web

Langage de balisage HTML - Production de pages Web de balisage de table_HTML/Xhtml_Web

PHP中文网
PHP中文网original
2016-05-16 16:45:461853parcourir

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>




< ="center">Adversaire









< ;td>91-63










Année Record de la saison (W-L)< ;/ td>
1918 Chicago Cubs
1916 Brooklyn Robins
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#

加上摘要
另外,我们也能为标签加上summary属性,进一步解释这个表格的目的和内容,摘要属性对非可视化浏览器以下是为示例表格加上摘要属性的代码 :
























Championnats de la Série mondiale des Red Sox de Boston
Année< /td>
Adversaire Record de la saison ( W-L)
1918 Chicago Cubs
75-51
1916 Brooklyn Robins 91-63
1915 Phillies de Philadelphie 101-50
1912 Géants de New York 105-47


表格的表头
在建立数据表格时,善用表头是件很重要的工作.在标记重要单元格时,我们可以发挥标签的作用,而不是使用之类在的显示效果标签.就像我们在第二章中使用标题标签标记段落标题一样.可视化浏览器或许会以粗体居中的效果显示些重要的内容加上不同的样式,以便于存放在内的一般资料及进行区别.
除显示效果的优势外,使用标签也能帮助非可视化浏览器 —这部分我们稍后进行深入讨论.
示例表格中的表头是最上面的那一行 : Année, adversaire et record de la saison (W-L).


< th id="adversaire">Adversaire


< ;tr> ;














Championnats de la série mondiale des Red Sox de Boston
Année Record de saison (W-L)
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 :






< >1918















Boston Red Championnats des Sox World Series
Année Adversaire Record de saison (W-L)
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
border- right: 1px solid #999;
border-bottom: 1px solid #999; }

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 Mêmes propriétés border-top et border-left, td { border-right: 1px solid #999;
border-bottom: 1px solid #999;
}


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

Déclaration：
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
Article précédent：Tutoriel d'apprentissage d'introduction à XHTML : formulaire tag_HTML/Xhtml_web production de pagesArticle suivant：Tutoriel d'apprentissage d'introduction à XHTML : formulaire tag_HTML/Xhtml_web production de pages

Articles Liés

Voir plus
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)

table { border-top: 1px solid #999;
border -gauche : 1px solide #999;
}
légende {
famille de polices : Arial, sans-serif;
couleur : #993333;
padding-bottom : 6px;
>
th, td {
padding : 10px;
border-right : 1px solid #999;
border-bottom : 1px solid #999;
}
th {
font-family : Verdana, sans-serif ;
background : #ccc;
}

Figure 3-7 : Titre stylisé et < th>

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

tableau { border-top : 1px solid #999 ; border-left : 1px solid #999 ; font-family : Arial, sans-serif ;
color : #993333 ;
padding-bottom : 6px; }
th, td {
padding : 10px;
border- à droite : 1px solid #999;
border-bottom : 1px solid #999;
}
th {
famille de polices : Verdana, sans -serif;
background : url(th_stripe. gif);
>

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#

為ID指定圖示
記得本章開始的時候我們為表格裡的每一個		加上唯一的ID嗎?那時我們把這些id與資料清單中的headers屬性相符起來,幫助非視覺化瀏覽器的使用者了解表格的內容,現在我們能在另一個地方發揮這個id的功能了,那就是為每個 指定不同的圖示.
圖示路徑會完全記錄在css檔案中,讓你能夠在網站重構,更新時輕易的替換,完全不必修改標籤部分.
圖示
我用photoshop做了三個獨特的圖示,分別用在範例中每個表頭上:Year, Opponent與Season Record(W-L).圖3-10就是這三個圖示:

圖3- 10hotoshop製作的三個表頭圖示
CSS
加上css並不困難,因為我們為每個		 都制定了獨特的id,因此我們能直接用background屬性來指定正確的圖示.
table {
border-top: 1px solid #999;
border-left: 1px solid #999;
}
caption { font-family: Arial, sans-serif;
color: #993333;
padding-bottom: 6px;
}
th, td {
padding: 10px; right: 1px solid #999;
border-bottom: 1px solid #999;
}
th {
font-family: Verdana, sans-serif;
} } {
padding-left: 26px;
background: #ccc url(icon_year.gif) no-repeat 10px 50%;
}
#opponent {
padding-left: 26padx; 🎜> background: #ccc url(icon_opp.gif) no-repeat 10px 50%;
}
#record {
padding-left: 26px;
background: #ccc url(icon_rec. ) no-repeat 10px 50%;
}

你應該注意到了,我們改用簡寫方式定義了背景樣式,我們從th的定義中取出background:#ccc規則,並把它放到每個表頭的圖示名稱旁邊,這會使得我們的圖示"坐"在我們指定的灰色背景上面,我們也在每個表頭內容的左邊留夠圖示的空間,不讓文字覆蓋上去,圖3-11就是我們想要的效果:

圖3-11:為每個		 制定獨特圖標的效果
使用簡寫語法有明顯的優點,然而,如果我們只以background屬性定義圖片,不定義背景色的話,就應該先取消掉先前在		 中以background定義的背景色.
組合規則,簡化內容

能夠達到相同功能的另一種寫法,是把每個表頭裡反覆出現的規則(在這個例子中是背景圖片,內補丁和位置)拿出來寫在		 定義一次就好了(因為它們的設定在每個 中的確都一樣),然後只在#year,#opponent,#record定義內保留各自不同的設定值(也就是圖片路徑)
table { border-top: 1px solid #999;
border-left: 1px solid #999;
}caption {
font-family: Arial, sans-serif;
color: #99333: #993 ;
padding-bottom: 6px;
}
th, td {
padding: 10px;
border-right: 1px solid #999;
borderorder-botsol:1px d 999;
}
th {
font-family: Verdana, sans-serif;
padding-left: 26px;
background-color: #ccc;
background-eat: no-repeat;
background-position: 10px 50%;
}
#year {
background-image: url(icon_year.gif);
}
#opponent {
background-image: url(icon_opp.gif);
}
#record {
background: url(icon_rec.gif);
}

這樣稍微簡潔一些了吧?藉著整合相同規則,我們能夠省下每次重複定義修改的時間和精力,以這個例子來說,看起來只差六個,半打而已,但是對大一些的樣式表來說,節省的量就很可觀了.

總結
在本章,我們不僅發現了表格並不邪惡,同時還深入了解表格之後,我們發現,他們很適合用來標記例表數據,而且仍然易於使用
我們更發現,只要加上一些樣式,就能控制列表數據的顯示方式,讓他們變得十分具有吸引力,別再為使用表格而感到恐懼了.