{"id":5319,"date":"2024-08-27T15:29:17","date_gmt":"2024-08-27T15:29:17","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/tableaux-html-creer-utiliser\/"},"modified":"2024-11-08T10:09:46","modified_gmt":"2024-11-08T10:09:46","slug":"tableaux-html-creer-utiliser","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/tableaux-html-creer-utiliser\/","title":{"rendered":"2.7 Les Tableaux en HTML : Cr\u00e9er et Utiliser"},"content":{"rendered":"\n\n\n<p><strong>Les tableaux en HTML<\/strong> sont une fonctionnalit\u00e9 essentielle pour structurer et organiser les donn\u00e9es de mani\u00e8re visuellement agr\u00e9able. Apprendre \u00e0 cr\u00e9er et \u00e0 utiliser les <strong>tableaux en HTML<\/strong> peut consid\u00e9rablement am\u00e9liorer la pr\u00e9sentation de donn\u00e9es dans vos pages web. D\u00e9couvrons comment les utiliser efficacement gr\u00e2ce \u00e0 des exemples concrets de code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction aux <strong>Tableaux en HTML<\/strong><\/h2>\n\n\n\n<div id=\"videoContainer\" style=\"position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; background: #000;\">\n  <iframe src=\"https:\/\/player.vimeo.com\/video\/586254269?dnt=1&#038;fullscreen=0&#038;pip=0\" loading=\"lazy\" loading=\"lazy\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\" frameborder=\"0\" allow=\"autoplay\" allowfullscreen id=\"vimeoPlayer\"><\/iframe>\n  \n  <!-- Popup Desktop -->\n  <div id=\"popupContainer\" class=\"desktop-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 400px; padding: 20px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <h2 style=\"color: #333; font-size: 1.5em; margin: 10px 0;\" id=\"profitez-de-loffre-spciale-\">Profitez de l\u2019offre sp\u00e9ciale !<\/h2>\n    <p style=\"color: #e74c3c; font-size: 1.2em; margin: 10px 0;\">Obtenez notre cours pour seulement <strong id=\"price\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d%C3%A9butant-%C3%A0-expert\/141\" target=\"_blank\" style=\"display: block; padding: 10px 20px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 1em; margin: 20px auto;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 10px 20px; font-size: 1em;\">Fermer<\/button>\n  <\/div>\n\n  <!-- Popup Mobile -->\n  <div id=\"popupContainerMobile\" class=\"mobile-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; max-width: 300px; padding: 15px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <p style=\"color: #e74c3c; font-size: 1em; margin: 5px 0;\">Cours sp\u00e9cial \u00e0 <strong id=\"priceMobile\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d%C3%A9butant-%C3%A0-expert\/141\" target=\"_blank\" style=\"display: inline-block; padding: 8px 15px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 0.9em;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 5px 10px; font-size: 0.9em;\">Fermer<\/button>\n  <\/div>\n<\/div>\n\n<script src=\"https:\/\/player.vimeo.com\/api\/player.js\"><\/script>\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n    var iframe = document.getElementById('vimeoPlayer');\n    var player = new Vimeo.Player(iframe);\n    var isPopupDisplayed = false;\n\n    player.on('play', function() {\n        if (!isPopupDisplayed) {\n            player.on('timeupdate', function(data) {\n                if (data.seconds >= 120 && !isPopupDisplayed) { \/\/ 120 seconds = 2 minutes\n                    \/\/ Pause the video and display the popup\n                    player.pause().then(function() {\n                        if (window.innerWidth > 768) {\n                            document.querySelector('.desktop-popup').style.display = 'block';\n                        } else {\n                            document.querySelector('.mobile-popup').style.display = 'block';\n                        }\n                        fetchPriceAndUpdatePopup();\n                        isPopupDisplayed = true;\n                    });\n                }\n            });\n        }\n    });\n\n    function fetchPriceAndUpdatePopup() {\n        fetch('https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-d%C3%A9veloppeur-python\/144')\n            .then(response => response.text())\n            .then(html => {\n                var parser = new DOMParser();\n                var fetchedDoc = parser.parseFromString(html, 'text\/html');\n                var priceElement = fetchedDoc.querySelector('.ammount .fw-500');\n                var originalPriceElement = fetchedDoc.querySelector('.ammount del');\n                var price = priceElement ? priceElement.textContent.trim() : '29.5\u20ac';\n                var originalPrice = originalPriceElement ? originalPriceElement.textContent.trim() : '59\u20ac';\n\n                document.getElementById('price').textContent = price;\n                document.getElementById('priceMobile').textContent = price;\n                document.querySelector('.desktop-popup del').textContent = originalPrice;\n                document.querySelector('.mobile-popup del').textContent = originalPrice;\n            })\n            .catch(error => console.error('Error fetching the price:', error));\n    }\n\n    function closePopup() {\n        document.querySelector('.desktop-popup').style.display = 'none';\n        document.querySelector('.mobile-popup').style.display = 'none';\n        player.play(); \/\/ Allows resuming the video only after closing the popup\n    }\n});\n<\/script>\n\n\n\n<p>Un tableau en HTML est un moyen de structurer les informations en lignes et colonnes, ce qui permet d\u2019afficher les donn\u00e9es de mani\u00e8re claire et organis\u00e9e. Chaque tableau est cr\u00e9\u00e9 avec la balise <code>&lt;table&gt;<\/code>, et les lignes sont d\u00e9finies par <code>&lt;tr&gt;<\/code> (table row) tandis que les colonnes sont d\u00e9finies par <code>&lt;td&gt;<\/code> (table data) ou <code>&lt;th&gt;<\/code> (table header). Pour en savoir plus sur les fondamentaux, explorez notre guide sur les <a href=\"https:\/\/wikiform.fr\/codespace\/bases-langage-html-apprendre-fondamentaux\">bases du langage HTML<\/a> et la <a href=\"https:\/\/wikiform.fr\/codespace\/creer-premiere-page-html-tutoriel-facile\">cr\u00e9ation de pages HTML<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Cr\u00e9er un Tableau HTML de Base<\/h3>\n\n\n\n<p>Pour commencer, voici comment cr\u00e9er un tableau HTML de base avec une simple structure :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;table&gt;\n  &lt;tr&gt;\n    &lt;th&gt;Nom&lt;\/th&gt;\n    &lt;th&gt;\u00c2ge&lt;\/th&gt;\n    &lt;th&gt;Ville&lt;\/th&gt;\n  &lt;\/tr&gt;\n  &lt;tr&gt;\n    &lt;td&gt;Alice&lt;\/td&gt;\n    &lt;td&gt;30&lt;\/td&gt;\n    &lt;td&gt;Paris&lt;\/td&gt;\n  &lt;\/tr&gt;\n  &lt;tr&gt;\n    &lt;td&gt;Bob&lt;\/td&gt;\n    &lt;td&gt;25&lt;\/td&gt;\n    &lt;td&gt;Lyon&lt;\/td&gt;\n  &lt;\/tr&gt;\n&lt;\/table&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Styler un Tableau HTML avec CSS<\/h3>\n\n\n\n<p>Pour am\u00e9liorer l\u2019apparence de votre tableau, vous pouvez utiliser du CSS. Voici un exemple qui ajoute du style aux \u00e9l\u00e9ments du tableau :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;style&gt;\ntable {\n  width: 50%;\n  border-collapse: collapse;\n  margin: 25px 0;\n  font-size: 18px;\n  text-align: left;\n}\nth, td {\n  padding: 12px;\n  border-bottom: 1px solid #ccc;\n}\nth {\n  background-color: #f4f4f4;\n}\n&lt;\/style&gt;\n\n&lt;table&gt;\n  &lt;tr&gt;\n    &lt;th&gt;Nom&lt;\/th&gt;\n    &lt;th&gt;\u00c2ge&lt;\/th&gt;\n    &lt;th&gt;Ville&lt;\/th&gt;\n  &lt;\/tr&gt;\n  &lt;tr&gt;\n    &lt;td&gt;Alice&lt;\/td&gt;\n    &lt;td&gt;30&lt;\/td&gt;\n    &lt;td&gt;Paris&lt;\/td&gt;\n  &lt;\/tr&gt;\n  &lt;tr&gt;\n    &lt;td&gt;Bob&lt;\/td&gt;\n    &lt;td&gt;25&lt;\/td&gt;\n    &lt;td&gt;Lyon&lt;\/td&gt;\n  &lt;\/tr&gt;\n&lt;\/table&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Ajouter des En-t\u00eates et des Pieds de Tableau<\/h3>\n\n\n\n<p>Pour ajouter des en-t\u00eates et des pieds de page au tableau, utilisez les balises <code>&lt;thead&gt;<\/code> et <code>&lt;tfoot&gt;<\/code> respectivement. Cela aide \u00e0 structurer le tableau et \u00e0 am\u00e9liorer l\u2019exp\u00e9rience utilisateur.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;table&gt;\n  &lt;thead&gt;\n    &lt;tr&gt;\n      &lt;th&gt;Nom&lt;\/th&gt;\n      &lt;th&gt;\u00c2ge&lt;\/th&gt;\n      &lt;th&gt;Ville&lt;\/th&gt;\n    &lt;\/tr&gt;\n  &lt;\/thead&gt;\n  &lt;tbody&gt;\n    &lt;tr&gt;\n      &lt;td&gt;Alice&lt;\/td&gt;\n      &lt;td&gt;30&lt;\/td&gt;\n      &lt;td&gt;Paris&lt;\/td&gt;\n    &lt;\/tr&gt;\n    &lt;tr&gt;\n      &lt;td&gt;Bob&lt;\/td&gt;\n      &lt;td&gt;25&lt;\/td&gt;\n      &lt;td&gt;Lyon&lt;\/td&gt;\n    &lt;\/tr&gt;\n  &lt;\/tbody&gt;\n  &lt;tfoot&gt;\n    &lt;tr&gt;\n      &lt;td colspan=\"3\"&gt;Fin du tableau&lt;\/td&gt;\n    &lt;\/tr&gt;\n  &lt;\/tfoot&gt;\n&lt;\/table&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Fusionner des Cellules avec colspan et rowspan<\/h3>\n\n\n\n<p>La balise <code>colspan<\/code> permet de fusionner des cellules sur plusieurs colonnes, et la balise <code>rowspan<\/code> permet de le faire sur plusieurs lignes. Voici comment les utiliser :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;table&gt;\n  &lt;tr&gt;\n    &lt;th colspan=\"2\"&gt;Identification&lt;\/th&gt;\n    &lt;th rowspan=\"2\"&gt;Ville&lt;\/th&gt;\n  &lt;\/tr&gt;\n  &lt;tr&gt;\n    &lt;th&gt;Nom&lt;\/th&gt;\n    &lt;th&gt;\u00c2ge&lt;\/th&gt;\n  &lt;\/tr&gt;\n  &lt;tr&gt;\n    &lt;td&gt;Alice&lt;\/td&gt;\n    &lt;td&gt;30&lt;\/td&gt;\n    &lt;td&gt;Paris&lt;\/td&gt;\n  &lt;\/tr&gt;\n  &lt;tr&gt;\n    &lt;td&gt;Bob&lt;\/td&gt;\n    &lt;td&gt;25&lt;\/td&gt;\n    &lt;td&gt;Lyon&lt;\/td&gt;\n  &lt;\/tr&gt;\n&lt;\/table&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Exemples Avanc\u00e9s de Tableaux HTML<\/h3>\n\n\n\n<p>Pour mieux illustrer l&rsquo;utilisation des tableaux en HTML, voici quelques exemples avanc\u00e9s.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Tableau avec Cellules Fusionn\u00e9es<\/h4>\n\n\n\n<p>Voici un exemple de tableau avec des cellules fusionn\u00e9es \u00e0 la fois horizontalement et verticalement :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;table&gt;\n  &lt;tr&gt;\n    &lt;th colspan=\"2\"&gt;Nom&lt;\/th&gt;\n    &lt;th&gt;\u00c2ge&lt;\/th&gt;\n    &lt;th rowspan=\"2\"&gt;Ville&lt;\/th&gt;\n  &lt;\/tr&gt;\n  &lt;tr&gt;\n    &lt;td rowspan=\"2\"&gt;Alice&lt;\/td&gt;\n    &lt;td&gt;Dupont&lt;\/td&gt;\n    &lt;td&gt;30&lt;\/td&gt;\n  &lt;\/tr&gt;\n  &lt;tr&gt;\n    &lt;td&gt;Martin&lt;\/td&gt;\n    &lt;td&gt;45&lt;\/td&gt;\n    &lt;td&gt;Paris&lt;\/td&gt;\n  &lt;\/tr&gt;\n  &lt;tr&gt;\n    &lt;td colspan=\"3\"&gt;Resume&lt;\/td&gt;\n    &lt;td&gt;France&lt;\/td&gt;\n  &lt;\/tr&gt;\n&lt;\/table&gt;\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Tableau avec des Lignes Altern\u00e9es<\/h4>\n\n\n\n<p>L&rsquo;utilisation de styles CSS peut \u00e9galement inclure une configuration de lignes altern\u00e9es pour am\u00e9liorer la lisibilit\u00e9 :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;style&gt;\ntr:nth-child(even) {\n  background-color: #f2f2f2;\n}\n&lt;\/style&gt;\n\n&lt;table&gt;\n  &lt;tr&gt;\n    &lt;th&gt;Nom&lt;\/th&gt;\n    &lt;th&gt;\u00c2ge&lt;\/th&gt;\n    &lt;th&gt;Ville&lt;\/th&gt;\n  &lt;\/tr&gt;\n  &lt;tr&gt;\n    &lt;td&gt;Alice&lt;\/td&gt;\n    &lt;td&gt;30&lt;\/td&gt;\n    &lt;td&gt;Paris&lt;\/td&gt;\n  &lt;\/tr&gt;\n  &lt;tr&gt;\n    &lt;td&gt;Bob&lt;\/td&gt;\n    &lt;td&gt;25&lt;\/td&gt;\n    &lt;td&gt;Lyon&lt;\/td&gt;\n  &lt;\/tr&gt;\n  &lt;tr&gt;\n    &lt;td&gt;Charlie&lt;\/td&gt;\n    &lt;td&gt;35&lt;\/td&gt;\n    &lt;td&gt;Marseille&lt;\/td&gt;\n  &lt;\/tr&gt;\n&lt;\/table&gt;\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Tableau et Ressources Externes<\/h4>\n\n\n\n<p>Les ressources externes peuvent aussi offrir de pr\u00e9cieuses informations pour approfondir la compr\u00e9hension des tableaux en HTML. Par exemple, le <a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/HTML\/Element\/table\" target=\"_blank\" rel=\"noopener\">site MDN Web Docs<\/a> fournit une documentation exhaustive sur les \u00e9l\u00e9ments de tableau en HTML et leur utilisation. Pour une formation plus structur\u00e9e, des plateformes comme <a href=\"https:\/\/www.udemy.com\/\" target=\"_blank\" rel=\"noopener\">Udemy<\/a> et <a href=\"https:\/\/www.coursera.org\/\" target=\"_blank\" rel=\"noopener\">Coursera<\/a> offrent des cours sur le d\u00e9veloppement web incluant les bases HTML et CSS.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Les <strong>tableaux en HTML<\/strong> sont un outil essentiel pour structurer et afficher des donn\u00e9es de mani\u00e8re ordonn\u00e9e. En comprenant comment cr\u00e9er des tableaux de base et avanc\u00e9s, ajouter des styles et des cellules fusionn\u00e9es, vous pouvez consid\u00e9rablement am\u00e9liorer\n","protected":false},"excerpt":{"rendered":"<p>Les tableaux en HTML sont une fonctionnalit\u00e9 essentielle pour structurer et organiser les donn\u00e9es de mani\u00e8re visuellement agr\u00e9able. Apprendre \u00e0 cr\u00e9er et \u00e0 utiliser les&#8230;<\/p>\n","protected":false},"author":1,"featured_media":2777,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3,8],"tags":[18],"class_list":["post-5319","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-3-css","category-2-html","tag-tutoriels"],"acf":[],"_titre_de_la_formation":null,"_description_":null,"_objectifs_pedagogiques":null,"_programme_":null,"_url_de_limage":null,"_materiel_necessaire":null,"_modalites_devaluation_des_acquis":null,"_moyens_pedagogiques_et_techniques":null,"_accessibilite_":null,"_formateur_":null,"menu_order":0,"_links":{"self":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5319","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/comments?post=5319"}],"version-history":[{"count":2,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5319\/revisions"}],"predecessor-version":[{"id":6027,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5319\/revisions\/6027"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2777"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5319"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5319"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5319"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}