‘0212021 Mise en page de tableaux- Apprendre le développement wal | MDN, Mise en page de tableaux Styliser un tableau HTML n'est pas le travail le plus passionnant au monde, mais... quelquefois nous devons le faire. Cet article est un guide pour donner un bel aspect aux tableaux HTML a aide des fonctionnalités détaillées dans les articles précédents. Notions de HTML (voir Introduction & HTML), tableaux en HTML (voir le module sur les tableaux HTML (TBD)) et une idée du fonctionnement des CSS (voir Introduction aux CSS.) Apprendre & donner effectivement un style aux tableaux HTML. Un tableau HTML typique Commengons par un tableau HTML typique. Bien, je dis typique — la plupart des exemples de tableaux HTML concement des chaussures, ou le temps, ou des employés ... nous avons décidé de faire quelque chose de plus intéressant et notre tableau se rapportera aux célébres groupes punk du Royaume Uni. Le balisage ressemble a quelque chose comme ceci : hitps:ideveloper mozilla orgiidacs!Apprendre/CSS/Building_blocks/Styling tables we‘0212021 ‘Mise en page de tableaux. Apprendre le développement web | MON quelques lignes supprimées pour condenser le texte

Récapitulatif des groupes punk les plus célébres du RU

Groupe	Année de formation	Nombre d' albums	Morceau le plus célébre
	1976	9	Ever fallen in love (with someone you shouldn't've)
The Clash	1976	6	London Calling
The Stranglers	1974	17	No More Heroes

row” colspan: 77 Total albums Le tableau est bien balisé, facile a disposer et accessible, remercions les fonctionnalités scope, , , , ete. Malheureusement, il n'a pas un rendu bien terrible a 'écran (voyez-le directement ici punk-bands-unstyled.html) : Récapitulatif des groupes punk es pus célébres du RU Groupe Année de formation Nombre dalbums Morceau le plas célébre Buzzcocks ‘1976 9 Ever fallen in love with someone you shoukintve) The Clash 1976 6 London Calling The Damned 1976 lo ‘Smash it up Sex Pistols 1975 1 ‘Anarchy in the UK Sham 69 1976 1B If the kids are united Siouxsie and the Banshees 1976 rm Fong Kong Garden hitps:ideveloper mozilla orgiicacs!Apprendre/CSS/Building_blocks/Styling tables ane‘0212021 Mise en page de tableaux Apprendre le développement wal | MDN, Sum Lite Kingers —LY/f wu Suspect Device The Stranglers 197d Vv ‘No More Heroes Total albums 1 ll est d'aspect resserré, difficile a lire et austere. Utilisons une régle CSS pour corriger cela. Mettre en forme notre tableau Dans cette section d'apprentissage actif, nous allons travailler le style de l'exemple de tableau ci-dessus. 1. Pour débuter, faites une copie locale de’ exemple de balisage, téléchargez les images (_ noise.png et leopardskin.jpg) et placez les trois fichiers dans un répertoire de travail quelque part sur votre ordinateur. 2. Ensuite, créez un nouveau fichier nommé style.css et enregistrez-le dans le méme répertoire que les autres fichiers, 3. Liez le CSS au HTML en mettant la ligne suivante dans I'élément : La premiare chose & faire est de modifier 'espacement et la disposition — le style par défaut du tableau est tellement resserré ! Pour ce faire, ajoutez la régle CSS suivante au fichier style.css : 7* espacement */ table { table-layout: fixed; width: 100%; border-collapse: collapse; border: 3px solid purple; thead th:nth-child(1) { width: 30%; } thead th:nth-child(2) { width: 20%; } thoad thenth-child(ay £ hitps:ideveloper mozilla orgiiéacs!Apprendre/CSS/Building_blocks/Styling tables ana‘0212024 Mise en page de tableaux- Apprendre le développement wal | MDN, Cieau Urenunenauyay 1 width: 15%; thead th:nth-child(4) { width: 35%; } th, td { padding: 20px; } Voici les choses les plus importantes a noter : Nous mettons un cadre (border ) tout autour du tableau, cadre nécessaire car nous voulons encadrer I'en-téte et le pied de page du tableau plus tard — si vous n'avez pas d'encadrement général du tableau et terminez avec un espacement, 'apparence est insolite et peu cohérente * Définir pour le tableau la valeur fixed pour table- layout est généralement une bonne idée, car cela rend le comportement par défaut du tableau un peu plus prévisible. Normalement, les colonnes des tableaux sont dimensionnées en fonction de leur contenu, ce qui produit des résultats étranges. Avec table-layout: fixed, vous pouvez dimensionner les colonnes selon la largeur de leurs en-tétes, puis traiter leur contenu comme il convient. C'est pourquoi nous sélectionnons les quatre en-tétes distinctement avec le sélecteur thead th:nth-child(n) (:nth-child) (« sélectionner le niéme élément enfant dans la liste a lintérieur de élément ») et leur donnons un pourcentage de largeur défini, Chaque colonne prend la largeur de son en-téte, ce qui permet de bien dimensionner les colonnes du tableau. Chris Coyier expose cette technique de fagon détaillée dans Fixed Table Layouts. Ceci est couplé avec une largeur width de 100%, ce qui signifie que le tableau remplira complétement tout conteneur dans lequel il sera placé et sera bien adaptable (méme sil aura besoin de quelques aménagements complémentaires pour avoir bel aspect avec * Lavaleur collapse pour border-collapse est une bonne pratique courante pour toute mise en page de tableau. Par défaut, quand vous définissez des encadrements pour les éléments d'un tableau, il y a un espace entre eux, comme le montre cette illustration : IEn-téte n°1|En-téte n°2| [Données 1 [Données 2 hitps:ideveloper mozilla orgiidacs!Apprendre/CSS/Building_blocks/Styling tables ana‘0212021 Mise en page de tableaux - Apprendre le développement wal | MDN, Cela n’a pas lair trés joli (méme si clest peut-étre le look que vous voulez, qui sait ?) ‘Avec border-collapse : collapse; , les bordures se condensent en une seule, ce qui est beaucoup mieux IEn-téte n°1/En-téte n°2| [Données 1_ [Données 2 + Nous avons mis un cadre (border ) tout autour du tableau, cadre nécessaire car nous encadrerons plus tard intitulé et le pied de page — si vous n'avez pas d'encadrement général du tableau, terminer par un espacement donne un aspect insolite et peu net. + Nous avons défini une valeur pour le remplissage ( padding ) des éléments et — cela donne un peu d'air aux données et facilite la lecture de la table, Ace stade, le tableau a déja meilleure mine : Recapitulatf des groupes punk les plus célébres du Royaume Uni Groupe Morceau le plus célébre Buzzcocks rer elle in ove with someone you shoud) The Clash London Caling The Damned Smashitup Sex Pistols Anarchy inthe UK Sham 69 ithe kids ore uated Siouxsie and the Banshees Hong Kong Garden Stiff Little Fingers Suspect Device The Stranglers 1 No More Heroes ‘Total albums Maintenant, différencions un peu nos polices de caractére. Tout d'abord, nous avons trouvé une police sur Google Fonts convenant aux tableaux concernant les groupes punk. Vous pouvez visiter le site vous-méme et en choisir une autre si vous le souhaitez ; il vous suffit de remplacer I'élément <1ink> fourni et la déclaration font- hitpsfidevelopermozilaorgiricacs/ApprendrelCSSiBuilding_blocks/Stying, sna‘0212021 ‘Mise en page de tableaux - Apprendre le développement web | MON ‘ramiLy personnaiisee par ceues aonnees par Googie ronts. D'abord, ajoutons l'élément suivant dans I'élément HTML head , juste au-dessus de lélément déja présent : et pour un look accrocheur et « punky ». + Nous avons aussi défini une valeur particuligre de letter-spacing pour les en-tétes et hitps:ideveloper mozilla orgiidacs!ApprendreiCSS/Building_blocksiStying fables ena‘wo2r2021 Mise en page de laeaux- Apprendre le développement web | MON les cellules pour amétiorer Ia lisibilité. C'est encore un choix purement subjectif. + Nous avons choisi un alignement centré pour le texte des cellules dans I'élément pour quill soit bien aligné avec les tétes de colonnes. Par défaut, les cellules ont une valeur text-align égale a left et les en-tétes a center, mais généralement on obtient un meilleur aspect en prenant le méme alignement pour les deux. L'éppaisseur par défaut sur les polices de l'en-téte est suffisante pour différencier ces demiéres du contenu des cellules. + Nous avons aligné a droite le titre a 'intérieur de 'élément } pour quill soit mieux associé visuellement au résultat des données. Cela fait un peu plus propre Récapitulaif des groupes punk les plus célébres du Royaume Uni Année Nomeee : Grouee 06 MowceAu vg puns cee v'avgums FORMATION Buzzcocks 1976 Ever fallen in love (with someone you shouldn'tve) The Clash 1976 London Calling The Damned 1976 Smash it up Sex Pistols 1975 Anarchy inthe UK Sham 69 1976 Ifthe kids are united Siouxsie and the Banshees 1976 Hong Kong Garden Stiff Little Fingers 1977 Suspect Device The Stranglers 1974 ‘No More Heroes TorAt Avgums 77 Maintenant, graphisme et couleurs ! Comme ce tableau est plein de postures punk, nous allons lui donner un style assez clinquant qui devrait lui convenir. Pas de probléme, vous nfavez pas a rendre vos tableaux autant tape a l'oeil — vous pouvez opter pour quelque chose de plus subtil et de bon got htpsiiseveloper mozila orgflcocsiApprendrelCSSBuiéing_blocks/Siing tables ma‘022024 Mise en page de tableaux- Apprendre le développement wal | MDN, Commengons par ajouter le CSS suivant a la fin du fichier style. css head, toot { background: url (leopardskin. jpg); color: white; text-shadow: 1px 1px 1px black; } ‘thead th, tfoot th, tfoot td { background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(@,0,0,0.5)); border: 3px solid purple; } Encore une fois, il n'y a rien de propre aux tableaux ici, mais cela vaut la peine de noter certaines choses. Nous avons ajouté un élément background-image aux éléments et et changé la valeur de color du texte dans l'en-téte et le pied de page en blanc (nous avons aussi ombré avec text-shadow ) pour quill soit bien lisible. Assurez-vous que le texte contraste bien avec l'arriére-plan pour quil soit bien lisible, Nous avons également ajouté un gradient linéaire aux éléments } et } a lintérieur de 'en-tate et du pied de page pour donner un peu de texture ainsi qu'un cadre mauve brillant. Il est utile d'avoir plusieurs éléments imbriqués disponibles pour pouvoir superposer les styles. Oui, nous aurions pu mettre image de fond et gradient lingaire sur les éléments et } en utilisant plusieurs images de fond, mais nous avons décidé de le faire séparément pour le bénéfice des navigateurs plus anciens qui ne prennent pas en charge plusieurs images de fond ou gradients linéaires. Zébrures Nous avons souhaité dédier un paragraphe séparé a la mise en place de zébrures — une alternance de coloris des lignes faisant ressortir les données des tableaux, facilitant leur lecture et leur analyse. Ajoutez le CSS suivant au bas de votre fichier style. css : tbody trinth-child(odd) { background-color: #f33cc; tbody tr:nth-child(even) { background-color: #e495e4; + hitps:ideveloper mozilla orgiidacs/Apprendre/CSS/Building_blocks/Styling tables ana‘0212021 ‘Mise en page de tableaux. Apprendre le développement web | MON tbody tr { background- image: url (noise.png); } table { background-color: #FF33cc; * Plus haut, nous avons vu comment on utiisait le sélecteur :nth-child pour sélectionner un élément enfant. II est aussi possible de donner une formule en paramétre afin qu'l sélectionne une suite d'éiéments. La formule 2n-1 sélectionne tous les enfants impairs (1, 3, 5, etc.) et la formule 2n sélectionne tous les enfants pairs (2, 4, 6, etc.). Nous avons utilisé les mots-clés odd (impair) et even (pair) dans notre code ; ils font exactement la méme chose que les formules susmentionnées. Dans ce cas, nous donnons aux lignes paires et impaires des couleurs différentes (clinquantes) + Nous avons également ajouté un motif d'arriére-plan répétitif sur toutes les lignes ; il donne un peu de bruit (un .png semi-transparent avec un peu de distorsion visuelle) pour donner une certaine texture. * Finalement, nous avons donné @ toute la table une couleur de fond unie de fagon a ce que les navigateurs qui ne prennent pas en charge le sélecteur :nth-child disposent encore d'une teinte de fond pour les lignes du corps de tableau. Et voici explosion de couleurs résultante ceil des prunes preps ces u Rune Nga ae . oot een Mae ts aster ei Buzzeovks 1576 Everaln in ove (vith someone you stouldn) The Clash 1976 London Calling The Danned 1976 Smashitup Sex Pistals 1915 Anarchy inthe UK Sham 69 1976 Ire kids ave united Siouxsie and the Banshees 1976 Hong Kong Garden Stiff Litle Fingers 1977 Suspect Devoe hitps:ideveloper mozilla orgiiéacs!Apprendre/CSSiBuilding_blocks/Stying, sna‘022021 ‘Mise en page de tableaux - Apprendre le développement web | MON tse aes Maintenant, peut-étre trouverez-vous que nous avons forcé la dose et que ce n'est pas a votre goitt, mais ce que nous avons essayé de montrer ici est que les tableaux ne sont pas forcément ennuyeux ou académiques. II nous reste une demiére chose a faire avec ce tableau — styliser |'intitulé. Pour ce faire, ajoutez ce qui suit en fin de fichier style. css caption { font-family: 'Rock Salt', cursive; padding: 2@px; font-style: italic; caption-side: bottom; color: #666; text-align: right; letter-spacing: 1px; Rien de remarquable ici, sauf pour la propriété caption-side a laquelle on a donné la valeur bottom. Elle a pour effet de positioner la légende au bas du tableau, ce qui, avec les autres déclarations, nous donne ce look final (voir en direct sur punk-bands-complete.html) : hitps:ideveloper mozilla orgiidacs!Apprendre/CSS/Building_blocks/Styling tables sone‘0212021 Mise en page de tableaux- Apprendre le développement wal | MDN, Ny Moa eea Mia Mme tage oor aU ceed Buzzcocks Everall in love with someone you shouldnt) The Clash London Caling The Damned Smash itup Sox Pistols ‘Anarchy inte UK. Sham 69 ‘tthe kids are united Siouxsie andthe Banshees HongKong Garden Siif Little Fingers Suspect Devoe ‘The Stranglers ‘No More Heroes WOta ty 4 PecdeiriiAne nes GRoures PINK LES Plu Pu Roswell Apprentissage actif : mettez en page votre propre tableau Maintenant, prenez cet exemple de tableau HTML (en tout ou en partie !) et stylisez-le pour faire quelque chose de beaucoup mieux congu et moins voyant que le tableau ci-dessus. Quelques conseils rapides Avant de poursuivre, voici une liste rapide des points les plus utiles illustrés ci-dessus + Faites un balisage du tableau aussi simple que possible et gardez les choses souples, par exemple en utilisant des pourcentages, afin que le design soit adaptable. * Utilisez table-layout : fixed pour créer une disposition de tableau prévisible qui vous permet de fixer les largeurs de colonnes en définissant la valeur de width sur hitps:ideveloper mozilla. orgiidacs/ApprendreiCSS/Building_blocks/Styling tables sna‘0212021 ‘Mise en page de tableaux. Apprendre le développement web | MON élément d'en-téte ( . * Utilisez border-collapse : collapse pour faire en sorte que les éléments du tableau fusionnent, produisant un aspect plus net et plus facile a contrdler. * Utilisez , et pour diviser le tableau en unités logiques et disposer d'entités supplémentaires pour application du CSS, de sorte quill soit plus facile d'empiler les styles si nécessaire. * Utilisez les zébrures pour distinguer chaque ligne et en faciliter la lecture. * Utilisez text-align pour aligner le texte des éléments et pour rendre les choses plus nettes et plus faciles a suivre. Résumé Maintenant que nous avons franchi les hauteurs vertigineusement passionnantes des mises en page de tableaux, a quoi allons-nous occuper notre temps ? N'ayez crainte — le chapitre qui suit donne un apergu de certains effets avancés avec les boites ; certains de ces effets ne sont apparus que trés récemment dans les navigateurs (comme les modes blend et les filtres), d'autres sont établis depuis plus longtemps (comme les ombrages). Dans ce module * Le modéle de boite : récapitulatif * Arrigre-plans + Encadrements + Mise en page des tableaux + Effets de boite avancés * Création d'un en-téte de papier a lettre élégant * Une boite d'aspect rafraichissant Last modified: 16 juil. 2020, by MDN contributors hitps:idevelopermozi corgitidacs!ApprendreiCSS/Building_blocks/Styling tables rane