‘0212021 Matir en forma un tableau HTML avec du CSS - Piare Giraud Mettre en forme un tableau HTML avec du CSS Télécharg le PDF du cours OS H Cours complet HTML et css INTRODUCTION AU COURS HTML ET css. 1 Introduction au cours HTML et CSS. 2 Défintion et usage du HTML et du CSS B.Evolution de Vinformatique et des langages Web 4 Travail en local et fen production 5. Choix et installation d'un éditewr de texte LES BASES DU HTML 6.Fléments, balses et attribute HTML 7. Structure minimale dune page HTML Les tableaux sont des entités trés particulidres en HTML et des propriétés CSS ont done été créées spécialement pour les mettre en forme et les personnaliser. Dans cette lecon, nous allons découvrir ces différentes propriétés et apprendre a les utilise. Mettre en forme un tableau : attributs HTML vs CSS ? Sil est vrai que le HTML sert & structurer le contenu et & lui donner du sens, nous créons des sites pour des visiteurs humains et donc nous voulons que ces sites soient compréhensibles pour eux et agréables & consulter. Pour cela, nous devons généralement mettre en forme notre contenu HTML brut afin de mieux le présenter. Pour les tableaux, comme pour la majorité des éléments HTML, nous utilisions a I’époque des attributs de mise en forme HTML. Les attributs les plus communs utilisés avec les tableaux étaient les suivants * align pour définir 'alignement du tableau dans la page ; * bgcolor pour définir la couleur de fond du tableau ; + border pour définir la taille d'une bordure autour du tableau ; + cellpadding pour définir espace entre le contenu d'une cellule et sa bordure ; + cellspacing pour définir espace entre deux cellules ; ‘char pour aligner le contenu au sein d'une ligne a partir d'un certain caractére ; * charoff pour définir le nombre de caractéres & partir desquels le contenu doit étre aligné depuis le caractére défini par 'attribut char; + frame pour définir les cétés du tableau sur lesquels tracer une bordure ; + rules pour définirla maniére dont les traits doivent apparaftre au sein du tableau ; + summary pour définir un texte servant 3 résumer le tableau au cas oti celui-ci ne pourrait pas étre affiché ; * valign pour aligner verticalement le contenu des cellules au sein d'une ligne, Ces attributs sont tous néanmoins tous dépréciés et vous ne devriez jamais les utiliser pour mettre en forme vos tableaux HTML. A la place, nous utiliserons plutét le CSS qui nous offre aujourd'hui de trés bonnes alternatives et un bon support pour la mise en forme de nos tableaux Ainsi, nous allons pouvoir par exemple ajouter des bordures autour de chaque cellule de notre tableau en appliquant la propriété border 8 nos éléments td puis fusionner les différentes bordures en une pour harmoniser ensemble en appliquant un border-collapse collapse & notre élément table. Ce site utlse des cookies pour vous fournir la meilleure expérience de navigation poss‘ble, En continuant sur ce site, vous acceptez Vutisation des cookies. Réglages hitps:lwwn pierre giraud.comihtmi-css-apprendre-coder-coursiborder-calapse-spacing! ana‘0212021 Metire en forma un tableau HTML avec du CSS - Piere Giraud HTML oS aL) Fast pice: execution Rend 9. Lindentation et les HTML TO.Les ties et les paragraphes en HTML 24/5 support. desktop, tablet, mobile Tebes espaces et retou's & la ligne en TMU 12.Définir Ie niveau importance des contenus en HTML Nous allons encore pouvoir modifier la couleur de fond de notre tableau ou d’un élément particulier de notre tableau ou aligner son contenu en CSS. 13. Créer des istes en Dans cette lecon, nous allons voir les propriétés CSS suivantes liées aux tableaux HTM 1A, Créer des liens en * border collapse ne © border-spacing = caption-side ; 1S.Envoi de mails et © empty-cells; téléchargement de # table-layout fichiers ep HTML + vertical-align 16. Compatibilts, support et validation ddu code HTML et CSS Lespasrsoucss LS propriétés border-collapse et border-spacing 17.sélecteurs et_La création de bordures dans les tableaux semble complexe a priori. En effet, en appliquant propriés CSS une propriété border & notre élément table, nous allons créer une bordure autour de notre tableau mais pas entre chaque cellule de celui-c 18.04 éerire Ie code css? Au contraire, en appliquant une bordure & chaque élément th ou td, cest-a-dire & chaque 19.Commentaires et cellule de notre tableau, les bordures autour de chaque cellule ne vont pas se coller entre indentation en CSS__elles, ce qui n‘est généralement pas le comportement voulu. 20, Sélecteurs SS simples et combinateurs 21. Les attribute HTML dass et id et les sélecteurs css 22. Ordre ‘application (cascade) et heritage 23 tes HTML div et. span (conteneurs illse des cookies pour vous fournir la melleure expérience de navigation possible, En continuant sur ce site, wous acceptez jutlisation des cookies. Réglages hitps:/lwwn pierre giraud.comihtmi-css-apprencre-coder-coursiborder-colapse-spacing!‘0212021 Matire en forme un tableau HTML avec du CSS - Piere Giraud HTML block et inline 25, Notations Reeser aac eee ne a ences complétes “long ha ‘short hand’ CSS . MISE EN FORME DE TEXTES EN © Hle| Meyiyusers/prerre/Desisop/Cours/eours html * éléments HTML ‘Nom Prénom Giraud Pierro 33.Gestion des rmarges. interes ou padding en CSS ‘Nom| Prénom Goly | Pauline 34.Gestion des bordures en CSS ‘Nom [Prénom] [Giraud Pieme 38, Gestion des | Vyoty Pauline marges —_externes (margin) en c8s. 36.La propriété css boxsizing 37.Créer des bordures artondies en css POSITION tT ‘okies pour vous fournir la meileure expérie 16 de navigation possible, En continuant sur ce site, vous accep ‘utlisation des cookies, hitps:lwwn pierre giraud.comihtmi-css-apprendre-coder-coursiborder-calapse-spacing! ane‘0212021 Matire en forme un tableau HTML avec du CSS - Piere Giraud 39.12 propriété. css position 40.La propriété. Ss border 2px solid bla float 2 td, 2th border’ 1px solic orang [Nom|Prénom| 41 Gestio es Uely Pauline conflts entre display position et float Sos Fim CREATION DE (Giraud Pierre TABLEAUX HTML lly _|Pauline 42. Créer des tableaux en HTM, 43. Structures un—_Les propriétés et ont été créées pour répondre 4 ce probléme. tableau HIML La propriété va nous permettre de choisir si on veut faire fusionner les Mettre en forme tun tableau HTML avec du CSS bordures des différentes cellules de notre tableau ou pas. On va pouvoir lui passer l'une de ces deux valeurs INSERTION DE . Valeur par défaut ; les bordures seront séparges et distinctes ; MEDIAS EN HTML . Les bordures adjacentes vont étre fusionnées. 45, Insérer des images dans des pages HTML Nous allons done généralement appliquer a nos éléments th et td ainsi que la propriété avec sa valeur a notre élément 46 Insérer dela musique wn Vélment HTML audio AT. Insérer des vidéos rn Tae oant avec [élément HTML Sone vi eee emrs 48.4 HIM iframe FOND, _DEGRADES ET OMBRES CSS 49.Gérer Ia couleur de fond des éléments HTML oeeieege! S0.Ajouter des Pierre SF QO Ale | tileysers/Pierre/Desktop/Cours/cours htm! * 19 Nom | Prénom Mail Giraud | Pierre — | pierre giraude@edhec-com Joly | Pauline | pjl@gmail.com table border-collapse: collapse: Nom | Prénom Mail Giraud | Pierre | pierre.gireud@edhee.com th, td border: px soli¢ black: Joly | Pauline | pil@gmailcom pacding: 20px. Dans le cas oi! 'on souhaite conserver des bordures séparées, on va tout de méme pouvoir gérer la distance entre chaque bordure grace a la propriété border-spacing. Cette propriété va prendre une distance en valeur (en px, cm, em, rem, etc.) qui représente espace entre deux bordures adjacentes. Il faudra nouveau lappliquer a l’élément table, xpérie 1e de navigation possible, En continuant sur ce site, vous accep tuisation des cookies. 2églages hitps:lwwn pierre giraud.comihtmi-css-apprendre-coder-coursiborder-colapse-spacing! sna‘0212021 68. Gérer Falignement des éléments flexibles 69. Gérer i alle et la flexbiine lémentsflexibles 70. Cas dutilisation et limites du flexbox TLEXERCICE - tion d'un men HTML et CSS en Utiisant le flexbox T2.Introduction au responsive design Tala balise meta viewport 7A.Créer un design responsive avec. les media queries 75. Images responsive T6.EXERCICE Création d'un menu déroulant responsive HTML et CSS 77-Sémantique et léments structurants du HTML TREXERCICE Création d'un site de CV responsive en ATML et C58 79. Introduction au le des grilles 80. Créer une grille et définir des pistes de orille Matir en forma un tableau HTML avec du CSS - Piare Giraud COE eet eer ae petraer eaerey ts c es Sees ect ee eee Dee a cane eeoeetry Se eae ee eats Pretty a tere corn Eeritr) @O fy coucuruercss x + > SO Aile| hle:jjusers/Pierre/Oesktop/Cours/eours htm Nom | | Prénom Mail Giraud | | Piene Pré xpérie 1 de navigation poss ble. E jutisation des cookies. Réglages hitps:lwwn pierre giraud.comihtmi-css-apprendre-coder-coursiborder-calapse-spacing! continuant sur ce site, vous acceptes one‘0212021 82. Aligner et espacer des éléments dans une grille BR EERCICE Création dune page & 3 colonnes contenant des éléments flexibles EVOLUTION ET FUTUR DU CSS BALLe CSS, un quasi langage de programmation 85, Les fonctions CSS 86.Les —_propriétés personnalisées ov varables CSS 87. Les ragles arobase css 88. Imbrication et héritage étendu CONCLUSION DU COURS 89.Conclision du cours HTML et CSS. Matir en forma un tableau HTML avec du CSS - Piare Giraud border-spacing: 15px Nom | | prénom ‘Mail border-spacing oP: Giraud | | Pieme pierre giraud@edhec th, te border: 29x soli¢ black: padding: 209% Nom | Prénom Mail Joly} Pautine | pil@gmail.com Notez quiindiquer un border-spacing : Opx ne va pas fusionner les bordures des cellules adjacentes comme le ferait border-collapse : collapse mais simplement coller les bordures des cellules adjacentes. Contréler la largeur des colonnes avec table-layout La propriété table-layout va nous permettre de gérer la largeur des différentes colonnes de notre tableau ou plus exactement de choisir selon quel algorithme la largeur de chaque colonne doit étre calculée, On va pouvoir choisir parmi deux valeurs + auto : Valeur par défaut ; la largeur des différentes colonnes du tableau est calculée automatiquement afin que le tableau prenne le moins d'espace possible en hauteur. De plus, si une largeur a été définie avec width pour le tableau, alors celui-ci essaiera de la respecter tant que son contenu ne dépasse pas du tableau * fixed : La largeur des colonnes va étre déterminge & partir de la propriété width des éléments table ou col ou de la premiére ligne du tableau Ce site utlse des cookies pour vous fournir la meilleure expérience de navigation poss‘ble, En continuant sur ce site, vous acceptez Vutisation des cookies. Réglages hitps:lwwn pierre giraud.comihtmi-css-apprendre-coder-coursiborder-colapse-spacing! 74‘0212021 Matire en forme un tableau HTML avec du CSS - Piere Giraud Sere a etait eee en Cees er aa a eae aie rhea ear ee a euee! Cue et cae eas res ea es eee eect ees eee eee et cee! a Cone cerca tC width: 300) Der et et Peet b eer coer Perit) i okies pour vous fournir la meilleure expérience de navigation possible. En continuant sur ee site, vous acceptez tuisation des cookies. 2églages hitps:lwwn pierre giraud.comihtmi-css-apprendre-coder-coursiborder-colapse-spacing! ane‘0212021 Matir en forma un tableau HTML avec du CSS - Piare Giraud SOS Oy coursttmercss xt > CO File| fie:y/Users/Piere/Desktop/Cours/cours html % 19 3 Nom Prénom Mail Giraud | Pierre pierre giraudPedhee.com, Nom | Prénom Malt Pierre | pierre giraud@éedhec com table Nom Prénom ™ border-coltapse: collapse wicth: 30¢px wetpin-oothem 2epx Girmd | Piene Picre.girauddbedh cs table-layout:: Fixed Nom | Prénom Mail tha Giraud | Pierre | pierre giraud@edhec.com border: 1px soli¢ black. padding: 20x Définir |'affichage des cellules vides d'un tableau avec empty- cells La propriété empty-cells va nous permettre de choisir si larriére-plan et les bordures d'une cellule sans contenu doivent étre affichés ou pas Notez que cette propriété ne va pouvoir s‘appliquer que si la valeur de la propriété border- collapse pour le tableau est separate. ‘On va pouvoir choisir parmi deux valeurs ‘© show : Valeur par défaut ; les bordures et l'arriére-plan des cellules vides du tableau seront bien visibles ; ‘© hide : Les bordures et larriére-plan des cellules vides du tableau ne sont pas affichés. Ce site utlse des cookies pour vous fournir la meilleure expérience de navigation poss‘ble, En continuant surce site, vous acceptez Vutisation des cookies. Réglages hitps:lwwn pierre giraud.comihtmi-css-apprendre-coder-coursiborder-calapse-spacing! ona‘0212021 Matire en forme un tableau HTML avec du CSS - Piere Giraud Sa Ue ees eae D tate eee ea rs co ee reno e ea coer Plea Crea Cer aera? ere SU see Poe ae Cree Perit aca Erect Cae e 5) Cours HTML eto x + 2c oO file://Users/Pierre/Desktop/Cours/eours. html * Nom |] Prénom | Mail Giraud |) Pierre Nom || Prénom | Mail okies pour vous fournir la meilleure expérience de navigation possible. En continuant sur ee site, vous acceptez ‘utlisation des cookies, hitps:lwwn pierre giraud.comihtmi-css-apprendre-coder-coursiborder-colapse-spacing! ron‘0212021 Matire en forme un tableau HTML avec du CSS - Piere Giraud table Nom || Prénom | Mail margin-bottom: 2¢px th, td Giraud |) Pieme order: 1px solid black: padding: 20px Nom || Prénom | Mail Giraud |} Pieme Choisir oi s'affiche la |egende d'un tableau avec caption-side La propriété caption-side va nous permetire de choisir ott doit s'afficher la légende d'un tableau, c'est-a-dire ol doit s‘afficher le texte présent dans I'élément caption du tableau, Aujourd'hui, nous pouvons choisir entre deux valeurs qui représentent deux emplacements ‘© top Valeur par défaut ; la légende sera positionnée au-dessus du tableau ‘© bottom : La légende sera positionnée en dessous du tableau, Serr Tatas er ere eure eee? aption»Info utilisateurs< our eae eaeae! ee at ea Teva Cate CC okies pour vous fournirla meilleure expérience de navigation possible. E tinuant sur ce site, vous acceptez ‘utlisation des cookies, hitps:lwwn pierre giraud.comihtmi-css-apprendre-coder-coursiborder-calapse-spacing! wna‘0212021 hitps:lwwn pierre giraud.comihtmi-css-apprendre-coder-coursiborder-calapse-spacing! Matir en forma un tableau HTML avec du CSS - Piare Giraud Peecente re coer Perri eael ee ecg coerce css x + © OO coustrm. 2¢ le | fle://UsersjPierte/Desktop/Cours/cours hm! x 1 Nom |] Prénom Ma Giraud |] Pieme | pierre.giraud@edhec com Joly |) Pautine | pjt@gmail.com sable caption-side: botten th, td border: px soli¢ black: padding: 20p% ackgrouné-color: #940. font-weight: bole okies pour vous fournir la meilleure expér Aligner le contenu des cellules d'un tableau avec vertical-align La propriété vertical-align sert 8 définir lalignement vertical du contenu d'une cellule d’un tableau. On va pouvoir lui passer une valeur de type longueur (en px ou en em par exemple), une valeur en pourcentage ou un mot clef a cette propriété, nce de navigation poss'ble. En continuant sur ce site, vous acceptez tuisation des cookies. 2églages rane‘0212021 Matir en forma un tableau HTML avec du CSS - Piare Giraud ISO 9001:2015 Book gratuit. Télécharger maintenant! softexpert.com Dans la grande majorité des cas, nous nous contenterons de choisir parmi l'un de ces 3 mots clefs + top: Le contenu de chaque cellule va se placer en haut de la cellule; ‘+ middle : Le contenu de chaque cellule va se placer au milieu de la cellule ; + bottom : Le contenu de chaque cellule va se placer se bas de la cellule. Ce site utilise des cookies pour vous fournir la meilleure experience de navigation possible En continuant sur ce site, vous accept Vutisation des cookies. Réglages hitps:lwwn pierre giraud.comihtmi-css-apprendre-coder-coursiborder-calapse-spacing! 134‘0212021 Matir en forma un tableau HTML avec du CSS - Piare Giraud wigth: 409px th, td border: 1px soli¢ black. padding: 20px Nom Prénom Mail Giraud | Pierre Vietor | pierre giraud@edt Raphael Joly ~ Pauline Pil@gmail.com Dechand Précédent Laisser un commentaire Vous devez vous connecter pour publier un commentaire. Suivant Ce site utlse des cookies pour vous fournir la meilleure expérience de navigation possible, En continuant surce site, vous acceptez Vutisation des cookies. Réglages hitps:lwwn pierre giraud.comihtmi-css-apprendre-coder-coursiborder-calapse-spacing! vane