{"id":254452,"date":"2024-10-31T06:30:00","date_gmt":"2024-10-31T06:30:00","guid":{"rendered":"https:\/\/datascientest.com\/?p=254452"},"modified":"2024-10-22T12:01:07","modified_gmt":"2024-10-22T12:01:07","slug":"tables-html-tout-savoir","status":"publish","type":"post","link":"https:\/\/datascientest.com\/tables-html-tout-savoir","title":{"rendered":"Les tables HTML : Qu&rsquo;est-ce que c&rsquo;est ? Comment \u00e7a fonctionne ?"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"254452\" class=\"elementor elementor-254452\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-506be15 e-flex e-con-boxed e-con\" data-id=\"506be15\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c2bafa4 elementor-widget elementor-widget-text-editor\" data-id=\"c2bafa4\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.15.0 - 02-08-2023 *\/\n.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:#69727d;color:#fff}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap{color:#69727d;border:3px solid;background-color:transparent}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap{margin-top:8px}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap-letter{width:1em;height:1em}.elementor-widget-text-editor .elementor-drop-cap{float:left;text-align:center;line-height:1;font-size:50px}.elementor-widget-text-editor .elementor-drop-cap-letter{display:inline-block}<\/style>\t\t\t\t<p><strong>Les tables HTML servent \u00e0 structurer et pr\u00e9senter des donn\u00e9es sur le web. Leur \u00e9quivalent CSS (comme les grids ou les flexbox) leur sont souvent pr\u00e9f\u00e9r\u00e9s car plus modernes, mais les tables HTML restent id\u00e9ales pour organiser des informations sous forme de tableau.<\/strong><\/p><p><span style=\"font-weight: 400;\">Elles permettent de pr\u00e9senter les donn\u00e9es de fa\u00e7on structur\u00e9e en les organisant en lignes et en colonnes. Cela facilite la pr\u00e9sentation de donn\u00e9es complexes et permet \u00e0 l&rsquo;utilisateur de mieux comprendre les informations fournies. Elles sont souvent utilis\u00e9es pour les tableaux de comparaison, les rapports financiers, ou simplement pour afficher des informations bien ordonn\u00e9es.<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-74a93ce elementor-align-center button-principale elementor-widget elementor-widget-button\" data-id=\"74a93ce\" data-element_type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm elementor-animation-grow\" href=\"https:\/\/datascientest.com\/formation-software-engineer\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t<span class=\"elementor-button-text\">D\u00e9couvrez tout sur HTML<\/span>\n\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-f5f2e87 e-flex e-con-boxed e-con\" data-id=\"f5f2e87\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b103a47 elementor-widget elementor-widget-heading\" data-id=\"b103a47\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.15.0 - 02-08-2023 *\/\n.elementor-heading-title{padding:0;margin:0;line-height:1}.elementor-widget-heading .elementor-heading-title[class*=elementor-size-]>a{color:inherit;font-size:inherit;line-height:inherit}.elementor-widget-heading .elementor-heading-title.elementor-size-small{font-size:15px}.elementor-widget-heading .elementor-heading-title.elementor-size-medium{font-size:19px}.elementor-widget-heading .elementor-heading-title.elementor-size-large{font-size:29px}.elementor-widget-heading .elementor-heading-title.elementor-size-xl{font-size:39px}.elementor-widget-heading .elementor-heading-title.elementor-size-xxl{font-size:59px}<\/style><h3 class=\"elementor-heading-title elementor-size-default\">Structure d'une Table HTML<\/h3>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-759a870 elementor-widget elementor-widget-text-editor\" data-id=\"759a870\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Les tables HTML sont construites en utilisant des balises imbriqu\u00e9es qui d\u00e9finissent les diff\u00e9rents niveaux de la structure. Voici les principaux \u00e9l\u00e9ments que vous pouvez utiliser pour construire une table.<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-92edd5f elementor-widget elementor-widget-heading\" data-id=\"92edd5f\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">1. <<span style=\"color: #008000;\">table<\/span> > : Le conteneur principal<\/h4>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-23e42f6 elementor-widget elementor-widget-text-editor\" data-id=\"23e42f6\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Cette balise est le conteneur principal de toute table HTML. Elle contient tous les \u00e9l\u00e9ments de la table, y compris les lignes, les colonnes, et les cellules. Par d\u00e9faut, une table n&rsquo;a pas de bordure visible. Pour lui en ajouter une, il est possible d&rsquo;utiliser l&rsquo;attribut <i>border<\/i>.<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-913acc4 elementor-widget elementor-widget-heading\" data-id=\"913acc4\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">2. <<span style=\"color: #008000;\">thead<\/span> >, <<span style=\"color: #008000;\">tbody<\/span> > et <<span style=\"color: #008000;\">tfoot<\/span> > : Organisation de la table<\/h4>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-973e76e elementor-widget elementor-widget-text-editor\" data-id=\"973e76e\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<ul><li><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"color: #008000;\">thead<\/span><span style=\"font-weight: 400;\">&gt;<\/span><span style=\"font-weight: 400;\"> : Contient les en-t\u00eates des colonnes. Utiliser cette balise permet de regrouper les \u00e9l\u00e9ments qui servent d&rsquo;en-t\u00eate \u00e0 la table. Les balises dans <\/span><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"color: #008000;\">thead<\/span><span style=\"font-weight: 400;\">&gt;<\/span><span style=\"font-weight: 400;\"> sont souvent des <\/span><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;<\/span><span style=\"font-weight: 400;\"> (table headers).<\/span><\/li><li><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"color: #008000;\">tbody<\/span><span style=\"font-weight: 400;\">&gt;<\/span><span style=\"font-weight: 400;\"> : Contient le corps principal de la table, c&rsquo;est ici que les donn\u00e9es sont g\u00e9n\u00e9ralement plac\u00e9es. Les lignes de donn\u00e9es sont cr\u00e9\u00e9es avec la balise <\/span><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><span style=\"font-weight: 400;\">.<\/span><\/li><li><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"color: #008000;\">tfoot<\/span><span style=\"font-weight: 400;\">&gt;<\/span><span style=\"font-weight: 400;\"> : Utilis\u00e9 pour regrouper les informations qui vont en bas de la table, comme un r\u00e9sum\u00e9 ou des totaux.<\/span><\/li><\/ul>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f029b18 elementor-widget elementor-widget-text-editor\" data-id=\"f029b18\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Voici un exemple d&rsquo;un tableau :<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8a42b9a elementor-widget elementor-widget-text-editor\" data-id=\"8a42b9a\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<pre style=\"padding-left: 40px;\"><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">table<\/span> <span style=\"font-weight: 400; color: #0000ff;\">border<\/span><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400; color: #ff0000;\">\"1\"<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">thead<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;Variable&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;Type&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;Description&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">thead<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tbody<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;\u00c2ge&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Entier&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Repr\u00e9sente l'\u00e2ge d'une personne en ann\u00e9es&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Revenu&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Flottant&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Repr\u00e9sente le revenu annuel en euros&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tbody<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tfoot<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td <\/span><span style=\"font-weight: 400; color: #0000ff;\">colspan<\/span><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400; color: #ff0000;\">\"2\"<\/span><span style=\"font-weight: 400;\">&gt;Nombre total de variables&lt;\/<\/span><span style=\"font-weight: 400;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;2&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tfoot<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\">&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">table<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/pre>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f7bb58c elementor-widget elementor-widget-text-editor\" data-id=\"f7bb58c\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Ici, <\/span><span style=\"font-weight: 400;\">\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><span style=\"font-weight: 400;\">,<\/span><span style=\"font-weight: 400;\"> &lt;<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;,<\/span><span style=\"font-weight: 400;\"> et<\/span><span style=\"font-weight: 400;\"> &lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><span style=\"font-weight: 400;\"> cr\u00e9ent respectivement des lignes, des cellules d&rsquo;en-t\u00eate (souvent stylis\u00e9 en gras par d\u00e9faut), et des cellules de donn\u00e9es.<\/span><\/p><p><span style=\"font-weight: 400;\">Voici ce simple tableau concr\u00e8tement : <\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1405bce elementor-widget elementor-widget-html\" data-id=\"1405bce\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<table border=\"1\">\r\n  <thead>\r\n    <tr>\r\n      <th>Variable<\/th>\r\n      <th>Type<\/th>\r\n      <th>Description<\/th>\r\n    <\/tr>\r\n  <\/thead>\r\n  <tbody>\r\n    <tr>\r\n      <td>\u00c2ge<\/td>\r\n      <td>Entier<\/td>\r\n      <td>Repr\u00e9sente l'\u00e2ge d'une personne en ann\u00e9es<\/td>\r\n    <\/tr>\r\n    <tr>\r\n      <td>Revenu<\/td>\r\n      <td>Flottant<\/td>\r\n      <td>Repr\u00e9sente le revenu annuel en euros<\/td>\r\n    <\/tr>\r\n  <\/tbody>\r\n  <tfoot>\r\n    <tr>\r\n      <td colspan=\"2\">Nombre total de variables<\/td>\r\n      <td>2<\/td>\r\n    <\/tr>\r\n  <\/tfoot>\r\n<\/table>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1babcec elementor-align-center button-principale elementor-widget elementor-widget-button\" data-id=\"1babcec\" data-element_type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm elementor-animation-grow\" href=\"https:\/\/datascientest.com\/formation-software-engineer\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t<span class=\"elementor-button-text\">Formez-vous \u00e0 HTML<\/span>\n\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-f7464d9 e-flex e-con-boxed e-con\" data-id=\"f7464d9\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d332f57 elementor-widget elementor-widget-heading\" data-id=\"d332f57\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Tables complexes<\/h3>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-33c05d9 elementor-widget elementor-widget-text-editor\" data-id=\"33c05d9\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Les tables HTML peuvent devenir assez complexes lorsqu&rsquo;elles doivent repr\u00e9senter de grandes quantit\u00e9s de donn\u00e9es ou des relations plus d\u00e9taill\u00e9es entre les diff\u00e9rentes colonnes et lignes. Voici un exemple de table complexe qui utilise des colonnes fusionn\u00e9es et des lignes fusionn\u00e9es :<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b733a04 elementor-widget elementor-widget-text-editor\" data-id=\"b733a04\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<pre style=\"padding-left: 40px;\"><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">table<\/span> <span style=\"font-weight: 400; color: #0000ff;\">id<\/span><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400; color: #ff0000;\">\"maTable\"<\/span> <span style=\"font-weight: 400; color: #0000ff;\">border<\/span><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400; color: #ff0000;\">\"1\"<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">thead<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span> <span style=\"font-weight: 400; color: #0000ff;\">rowspan<\/span><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400; color: #ff0000;\">\"2\"<\/span><span style=\"font-weight: 400;\">&gt;Nom&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">th <\/span><span style=\"font-weight: 400; color: #0000ff;\">colspan<\/span><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400; color: #ff0000;\">\"2\"<\/span><span style=\"font-weight: 400;\">&gt;Informations Professionnelles&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">th <\/span><span style=\"font-weight: 400; color: #0000ff;\">rowspan<\/span><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400; color: #ff0000;\">\"2\"<\/span><span style=\"font-weight: 400;\">&gt;Salaire (\u20ac)&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;M\u00e9tier&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;Niveau&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">thead<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tbody<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Bob Sponge&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Data Analyst&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Junior&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;45 000&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Alice Wonderland&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Data Scientist&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Senior&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;60 000&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Bart Simpson&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Data Engineer&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Interm\u00e9diaire&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;55 000&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Rick Sanchez&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Architecte Big Data&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Expert&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;75 000&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Morty Smith&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Machine Learning Engineer&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Junior&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;70 000&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tbody<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\">&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">table<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/pre>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-964812d elementor-widget elementor-widget-text-editor\" data-id=\"964812d\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<ul><li style=\"font-weight: 400;\" aria-level=\"1\"><b>Fusion de colonnes<\/b> <span style=\"font-weight: 400; color: #0000ff;\">colspan<\/span> : Dans l&rsquo;en-t\u00eate <span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">thead<\/span><span style=\"font-weight: 400;\">&gt;<\/span><span style=\"font-weight: 400;\">, la cellule \u00ab\u00a0Informations Professionnelles\u00a0\u00bb couvre deux colonnes (\u00ab\u00a0M\u00e9tier\u00a0\u00bb et \u00ab\u00a0Niveau\u00a0\u00bb). Cela est r\u00e9alis\u00e9 gr\u00e2ce \u00e0 l&rsquo;attribut <span style=\"color: #0000ff;\"> colspan<\/span>=<span style=\"color: #ff0000;\">\u00ab\u00a02\u00a0\u00bb<\/span>.<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><b>Fusion de lignes<\/b> <span style=\"font-weight: 400; color: #0000ff;\">rowspan<\/span> : La cellule \u00ab\u00a0Nom\u00a0\u00bb est fusionn\u00e9e sur deux lignes d&rsquo;en-t\u00eate, gr\u00e2ce \u00e0 <span style=\"color: #0000ff;\">rowspan<\/span>=<span style=\"color: #ff0000;\">\u00ab\u00a02\u00a0\u00bb<\/span>, pour indiquer que le nom de chaque personne est ind\u00e9pendant des sous-cat\u00e9gories (m\u00e9tier et niveau).<\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><b>Structure plus complexe <\/b><span style=\"font-weight: 400;\">: Ce type de table est particuli\u00e8rement utile pour pr\u00e9senter des donn\u00e9es avec des sous-cat\u00e9gories, comme le niveau de comp\u00e9tence ou des d\u00e9tails suppl\u00e9mentaires sur chaque entr\u00e9e.<\/span><\/li><li><span style=\"font-weight: 400;\">En utilisant des techniques avanc\u00e9es comme <span style=\"color: #0000ff;\">colspan<\/span> et <span style=\"font-weight: 400; color: #0000ff;\">rowspan<\/span>, vous pouvez cr\u00e9er des tables qui non seulement structurent vos donn\u00e9es de mani\u00e8re claire, mais qui fournissent \u00e9galement un niveau d&rsquo;information plus complexe, tout en restant facile \u00e0 lire pour les utilisateurs.<\/span><\/li><\/ul>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a4023fb elementor-widget elementor-widget-text-editor\" data-id=\"a4023fb\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Le r\u00e9sultat est le suivant : <\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3dec28a elementor-widget elementor-widget-html\" data-id=\"3dec28a\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<table id=\"maTable\" border=\"1\">\r\n  <thead>\r\n    <tr>\r\n      <th rowspan=\"2\">Nom<\/th>\r\n      <th colspan=\"2\">Informations Professionnelles<\/th>\r\n      <th rowspan=\"2\">Salaire (\u20ac)<\/th>\r\n    <\/tr>\r\n    <tr>\r\n      <th>M\u00e9tier<\/th>\r\n      <th>Niveau<\/th>\r\n    <\/tr>\r\n  <\/thead>\r\n  <tbody>\r\n    <tr>\r\n      <td>Bob Sponge<\/td>\r\n      <td>Data Analyst<\/td>\r\n      <td>Junior<\/td>\r\n      <td>45 000<\/td>\r\n    <\/tr>\r\n    <tr>\r\n      <td>Alice Wonderland<\/td>\r\n      <td>Data Scientist<\/td>\r\n      <td>Senior<\/td>\r\n      <td>60 000<\/td>\r\n    <\/tr>\r\n    <tr>\r\n      <td>Bart Simpson<\/td>\r\n      <td>Data Engineer<\/td>\r\n      <td>Interm\u00e9diaire<\/td>\r\n      <td>55 000<\/td>\r\n    <\/tr>\r\n    <tr>\r\n      <td>Rick Sanchez<\/td>\r\n      <td>Architecte Big Data<\/td>\r\n      <td>Expert<\/td>\r\n      <td>75 000<\/td>\r\n    <\/tr>\r\n    <tr>\r\n      <td>Morty Smith<\/td>\r\n      <td>Machine Learning Engineer<\/td>\r\n      <td>Junior<\/td>\r\n      <td>70 000<\/td>\r\n    <\/tr>\r\n  <\/tbody>\r\n<\/table>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-41f2a90 elementor-align-center button-principale elementor-widget elementor-widget-button\" data-id=\"41f2a90\" data-element_type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm elementor-animation-grow\" href=\"https:\/\/datascientest.com\/formation-software-engineer\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t<span class=\"elementor-button-text\">Apprenez davantages sur HTML<\/span>\n\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-0fb7a0c e-flex e-con-boxed e-con\" data-id=\"0fb7a0c\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-dad4155 elementor-widget elementor-widget-heading\" data-id=\"dad4155\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Styliser les tables HTML<\/h3>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-dcf879f elementor-widget elementor-widget-text-editor\" data-id=\"dcf879f\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Bien que certaines propri\u00e9t\u00e9s peuvent permettre de personnaliser une table HTML, la m\u00e9thode privil\u00e9gi\u00e9e est bien souvent le CSS.<\/span><\/p><p><span style=\"font-weight: 400;\">L&rsquo;exemple suivant montre une personnalisation relativement simple d&rsquo;une table HTML :<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5c3df1f elementor-widget elementor-widget-text-editor\" data-id=\"5c3df1f\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<pre style=\"padding-left: 40px;\"><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">style<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0<\/span><span style=\"font-weight: 400; color: #008000;\">table<\/span><span style=\"font-weight: 400;\"> {<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400; color: #ff0000;\">width<\/span><span style=\"font-weight: 400;\">: <\/span><span style=\"font-weight: 400; color: #008000;\">100%<\/span><span style=\"font-weight: 400;\">;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400; color: #ff0000;\">border-collapse<\/span><span style=\"font-weight: 400;\">: <\/span><span style=\"font-weight: 400; color: #0000ff;\">collapse<\/span><span style=\"font-weight: 400;\">;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0}<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">, <\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\"> {<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400; color: #ff0000;\">border<\/span><span style=\"font-weight: 400;\">: <\/span><span style=\"font-weight: 400; color: #008000;\">1px<\/span> <span style=\"font-weight: 400; color: #0000ff;\">solid <\/span><span style=\"color: #800080;\"><b>black<\/b><\/span><span style=\"font-weight: 400;\">;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400; color: #ff0000;\">padding<\/span><span style=\"font-weight: 400;\">: <\/span><span style=\"font-weight: 400; color: #008000;\">10px<\/span><span style=\"font-weight: 400;\">;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400; color: #ff0000;\">text-align<\/span><span style=\"font-weight: 400;\">: <\/span><span style=\"font-weight: 400; color: #0000ff;\">left<\/span><span style=\"font-weight: 400;\">;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0}<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\"> {<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400; color: #ff0000;\">background-color<\/span><span style=\"font-weight: 400;\">: <\/span><span style=\"font-weight: 400; color: #0000ff;\">#f2f2f2<\/span><span style=\"font-weight: 400;\">;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0}<\/span><br \/><span style=\"font-weight: 400;\">&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">style<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">table<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">thead<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;Nom&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;M\u00e9tier&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;Salaire (\u20ac)&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">thead<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tbody<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Bob Sponge&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Data Analyst&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;45 000&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Alice Wonderland&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Data Scientist&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;60 000&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Bart Simpson&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Data Engineer&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;55 000&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Rick Sanchez&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Architecte Big Data&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;75 000&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Morty Smith&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Machine Learning Engineer&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;70 000&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tbody<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\">&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">table<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/pre>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6f6d610 elementor-widget elementor-widget-text-editor\" data-id=\"6f6d610\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Le r\u00e9sultat para\u00eet d\u00e9j\u00e0 moins aust\u00e8re :<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-90929f2 elementor-widget elementor-widget-html\" data-id=\"90929f2\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\r\n  table {\r\n    width: 100%;\r\n    border-collapse: collapse;\r\n  }\r\n  th, td {\r\n    border: 1px solid black;\r\n    padding: 10px;\r\n    text-align: left;\r\n  }\r\n  th {\r\n    background-color: #f2f2f2;\r\n  }\r\n<\/style>\r\n\r\n<table>\r\n  <thead>\r\n    <tr>\r\n      <th>Nom<\/th>\r\n      <th>M\u00e9tier<\/th>\r\n      <th>Salaire (\u20ac)<\/th>\r\n    <\/tr>\r\n  <\/thead>\r\n  <tbody>\r\n    <tr>\r\n      <td>Bob Sponge<\/td>\r\n      <td>Data Analyst<\/td>\r\n      <td>45 000<\/td>\r\n    <\/tr>\r\n    <tr>\r\n      <td>Alice Wonderland<\/td>\r\n      <td>Data Scientist<\/td>\r\n      <td>60 000<\/td>\r\n    <\/tr>\r\n    <tr>\r\n      <td>Bart Simpson<\/td>\r\n      <td>Data Engineer<\/td>\r\n      <td>55 000<\/td>\r\n    <\/tr>\r\n    <tr>\r\n      <td>Rick Sanchez<\/td>\r\n      <td>Architecte Big Data<\/td>\r\n      <td>75 000<\/td>\r\n    <\/tr>\r\n    <tr>\r\n      <td>Morty Smith<\/td>\r\n      <td>Machine Learning Engineer<\/td>\r\n      <td>70 000<\/td>\r\n    <\/tr>\r\n  <\/tbody>\r\n<\/table>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f0004bd elementor-widget elementor-widget-text-editor\" data-id=\"f0004bd\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">En combinant l&rsquo;utilisation fine du CSS avec les tables, il sera possible d&rsquo;obtenir des r\u00e9sultats tr\u00e8s attrayants visuellement, de mettre en exergue tel ou tel \u00e9l\u00e9ments, et bien d&rsquo;avantage.<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6d3a68e elementor-align-center button-principale elementor-widget elementor-widget-button\" data-id=\"6d3a68e\" data-element_type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm elementor-animation-grow\" href=\"https:\/\/datascientest.com\/formation-software-engineer\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t<span class=\"elementor-button-text\">Approfondisez vos connaissances sur HTML<\/span>\n\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-cfbcf97 e-flex e-con-boxed e-con\" data-id=\"cfbcf97\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1068973 elementor-widget elementor-widget-heading\" data-id=\"1068973\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Accessibilit\u00e9 et bonnes pratiques<\/h3>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ff917c5 elementor-widget elementor-widget-text-editor\" data-id=\"ff917c5\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Les tables peuvent poser des probl\u00e8mes d&rsquo;accessibilit\u00e9 si elles ne sont pas bien structur\u00e9es. Cela peut \u00eatre d&rsquo;autant plus impactant selon les navigateurs, mais surtout en ce qui concerne les utilisateurs utilisant des lecteurs d&rsquo;\u00e9cran. Il s&rsquo;agit de logiciels permettant aux personnes ayant des d\u00e9ficiences visuelles de naviguer sur un site Internet. Ce logiciel convertit ce qui se trouve sur l&rsquo;\u00e9cran en sortie audio ou braille.<\/span><\/p><p><span style=\"font-weight: 400;\">Voici quelques bonnes pratiques pour rendre vos tables accessibles :<\/span><\/p><ul><li style=\"font-weight: 400;\" aria-level=\"1\"><b>Utilisez des en-t\u00eates claires<\/b><span style=\"font-weight: 400;\"> : Les balises <\/span><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;<\/span><span style=\"font-weight: 400;\"> aident les lecteurs d&rsquo;\u00e9cran \u00e0 comprendre les en-t\u00eates de colonne. Chaque en-t\u00eate doit d\u00e9crire pr\u00e9cis\u00e9ment le contenu de la colonne ou de la ligne, afin que les utilisateurs puissent naviguer facilement dans la table.<\/span><\/li><li><b>Ajoutez des Attributs scope<\/b><span style=\"font-weight: 400;\"> : Utilisez <\/span><span style=\"font-weight: 400;\"><span style=\"color: #0000ff;\">scope<\/span>=<span style=\"color: #ff0000;\">\u00ab\u00a0col\u00a0\u00bb<\/span><\/span><span style=\"font-weight: 400;\"> ou <\/span><span style=\"font-weight: 400;\">scope=\u00a0\u00bbrow\u00a0\u00bb<\/span><span style=\"font-weight: 400;\"> pour indiquer \u00e0 quelle colonne ou ligne appartient une en-t\u00eate. Cela aide les lecteurs d&rsquo;\u00e9cran \u00e0 associer chaque cellule de donn\u00e9es avec son en-t\u00eate correspondant. Par exemple :<\/span><\/li><\/ul>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-2d90715 e-flex e-con-boxed e-con\" data-id=\"2d90715\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3364e90 elementor-widget elementor-widget-text-editor\" data-id=\"3364e90\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<pre style=\"padding-left: 40px;\"><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">table <\/span><span style=\"font-weight: 400; color: #0000ff;\">border<\/span><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400; color: #ff0000;\">\"1\"<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">thead<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">th <\/span><span style=\"font-weight: 400; color: #0000ff;\">scope<\/span><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400; color: #ff0000;\">\"col\"<\/span><span style=\"font-weight: 400;\">&gt;Nom&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">th <\/span><span style=\"font-weight: 400; color: #0000ff;\">scope<\/span><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400; color: #ff0000;\">\"col\"<\/span><span style=\"font-weight: 400;\">&gt;M\u00e9tier&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">th <\/span><span style=\"font-weight: 400; color: #0000ff;\">scope<\/span><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400; color: #ff0000;\">\"col\"<\/span><span style=\"font-weight: 400;\">&gt;Salaire (\u20ac)&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">thead<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tbody<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Alice Wonderland&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Data Scientist&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;60 000&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tbody<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\">&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">table<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/pre>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d062154 elementor-widget elementor-widget-text-editor\" data-id=\"d062154\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><b>Ajoutez une <\/b><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">caption<\/span><span style=\"font-weight: 400;\">&gt;<\/span><span style=\"font-weight: 400;\"> : Cette balise peut \u00eatre utilis\u00e9e pour fournir un titre descriptif \u00e0 la table. Cela permet aux utilisateurs, y compris ceux utilisant des lecteurs d&rsquo;\u00e9cran, de comprendre rapidement le but de la table. Par exemple :<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4f4b6f8 elementor-widget elementor-widget-text-editor\" data-id=\"4f4b6f8\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<pre style=\"padding-left: 40px;\"><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">table<\/span> <span style=\"font-weight: 400; color: #0000ff;\">border<\/span><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400; color: #ff0000;\">\"1\"<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">caption<\/span><span style=\"font-weight: 400;\">&gt;Tableau des salaires des employ\u00e9s du p\u00f4le Data&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">caption<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">thead<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">th <\/span><span style=\"font-weight: 400; color: #0000ff;\">scope<\/span><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400; color: #ff0000;\">\"col\"<\/span><span style=\"font-weight: 400;\">&gt;Nom&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">th <\/span><span style=\"font-weight: 400; color: #0000ff;\">scope<\/span><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400; color: #ff0000;\">\"col\"<\/span><span style=\"font-weight: 400;\">&gt;M\u00e9tier&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">th <\/span><span style=\"font-weight: 400; color: #0000ff;\">scope<\/span><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400; color: #ff0000;\">\"col\"<\/span><span style=\"font-weight: 400;\">&gt;Salaire (\u20ac)&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">thead<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tbody<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Alice Wonderland&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Data Scientist&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;60 000&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tbody<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\">&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">table<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/pre>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0cd7520 elementor-widget elementor-widget-text-editor\" data-id=\"0cd7520\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<ul><li style=\"font-weight: 400;\" aria-level=\"1\"><b>Privil\u00e9giez le CSS pour la personnalisation <\/b><span style=\"font-weight: 400;\">: Gardez le HTML simple et utilisez le CSS pour la personnalisation. Cela am\u00e9liore la maintenance et rend le code plus accessible. Par exemple, vous pouvez styliser vos tables avec CSS afin de les rendre plus attrayantes sans alourdir le HTML.<\/span><\/li><li><b>Tables complexes et association des en-t\u00eates et des cellules<\/b><span style=\"font-weight: 400;\"> : Lorsque vous travaillez avec des tables complexes, o\u00f9 les donn\u00e9es sont organis\u00e9es sur plusieurs niveaux, il est utile d&rsquo;associer chaque cellule de donn\u00e9es \u00e0 son en-t\u00eate \u00e0 l&rsquo;aide des attributs <\/span><i><span style=\"font-weight: 400;\">headers <\/span><\/i><span style=\"font-weight: 400;\">et<\/span><i><span style=\"font-weight: 400;\"> id<\/span><\/i><span style=\"font-weight: 400;\">. Cela permet de garantir une meilleure navigation pour les utilisateurs des lecteurs d&rsquo;\u00e9cran. Par exemple :<\/span><\/li><\/ul>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b5f3135 elementor-widget elementor-widget-text-editor\" data-id=\"b5f3135\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<pre style=\"padding-left: 40px;\"><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">table <\/span><span style=\"font-weight: 400; color: #0000ff;\">border<\/span><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400; color: #ff0000;\">\"1\"<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">thead<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">th <\/span><span style=\"font-weight: 400; color: #0000ff;\">id<\/span><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400; color: #ff0000;\">\"nom\"<\/span><span style=\"font-weight: 400;\">&gt;Nom&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">th <\/span><span style=\"font-weight: 400; color: #0000ff;\">id<\/span><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400; color: #ff0000;\">\"metier\"<\/span><span style=\"font-weight: 400;\">&gt;M\u00e9tier&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">th <\/span><span style=\"font-weight: 400; color: #0000ff;\">id<\/span><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400; color: #ff0000;\">\"salaire\"<\/span><span style=\"font-weight: 400;\">&gt;Salaire Moyen (\u20ac)&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">thead<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tbody<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td <\/span><span style=\"font-weight: 400; color: #0000ff;\">headers<\/span><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400; color: #ff0000;\">\"nom\"<\/span><span style=\"font-weight: 400;\">&gt;Alice Wonderland&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td <\/span><span style=\"font-weight: 400; color: #0000ff;\">headers<\/span><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400; color: #ff0000;\">\"metier\"<\/span><span style=\"font-weight: 400;\">&gt;Data Scientist&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span> <span style=\"font-weight: 400; color: #0000ff;\">headers<\/span><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400; color: #ff0000;\">\"salaire\"<\/span><span style=\"font-weight: 400;\">&gt;45 000&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tbody<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\">&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">table<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/pre>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4175dd2 elementor-align-center button-principale elementor-widget elementor-widget-button\" data-id=\"4175dd2\" data-element_type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm elementor-animation-grow\" href=\"https:\/\/datascientest.com\/formation-software-engineer\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t<span class=\"elementor-button-text\">Acqu\u00e9rez des comp\u00e9tences sur HTML<\/span>\n\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-04df5cc e-flex e-con-boxed e-con\" data-id=\"04df5cc\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c4fa1b9 elementor-widget elementor-widget-heading\" data-id=\"c4fa1b9\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Tables et donn\u00e9es dynamiques<\/h3>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-827b002 elementor-widget elementor-widget-text-editor\" data-id=\"827b002\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Il peut \u00eatre utile de proposer une dynamique aux tableaux propos\u00e9s. Avec JavaScript, vous pouvez ajouter ou supprimer dynamiquement des lignes, ce qui rend les interfaces plus interactives.<\/span><\/p><p><span style=\"font-weight: 400;\">Voici un exemple de script simple qui ajoute une ligne \u00e0 une table :<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-56fdb98 elementor-widget elementor-widget-text-editor\" data-id=\"56fdb98\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<pre style=\"padding-left: 40px;\"><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">button <\/span><span style=\"font-weight: 400; color: #0000ff;\">onclick<\/span><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400; color: #ff0000;\">\"ajouterLigne()\"<\/span><span style=\"font-weight: 400;\">&gt;Ajouter une ligne&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">button<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">style<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0<\/span><span style=\"font-weight: 400; color: #008000;\">table<\/span><span style=\"font-weight: 400;\"> {<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400; color: #ff0000;\">width<\/span><span style=\"font-weight: 400;\">: <\/span><span style=\"font-weight: 400; color: #008000;\">100%<\/span><span style=\"font-weight: 400;\">;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400; color: #ff0000;\">border-collapse<\/span><span style=\"font-weight: 400;\">: <\/span><span style=\"font-weight: 400; color: #0000ff;\">collapse<\/span><span style=\"font-weight: 400;\">;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0}<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">, <\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\"> {<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400; color: #ff0000;\">border<\/span><span style=\"font-weight: 400;\">: <\/span><span style=\"font-weight: 400; color: #008000;\">1px<\/span> <span style=\"font-weight: 400;\">solid<\/span> <b>black<\/b><span style=\"font-weight: 400;\">;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400; color: #ff0000;\">padding<\/span><span style=\"font-weight: 400;\">: <\/span><span style=\"font-weight: 400; color: #008000;\">10px<\/span><span style=\"font-weight: 400;\">;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400; color: #ff0000;\">text-align<\/span><span style=\"font-weight: 400;\">: <\/span><span style=\"color: #0000ff;\"><span style=\"font-weight: 400;\">left<\/span><span style=\"font-weight: 400;\">;<\/span><\/span><br \/><span style=\"font-weight: 400;\"> \u00a0}<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\"> {<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400; color: #ff0000;\">background-color<\/span><span style=\"font-weight: 400;\">: <\/span><span style=\"font-weight: 400; color: #0000ff;\">#f2f2f2<\/span><span style=\"font-weight: 400;\">;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0}<\/span><br \/><span style=\"font-weight: 400;\">&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">style<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><br \/><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">table <\/span><span style=\"font-weight: 400; color: #0000ff;\">id<\/span><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400; color: #ff0000;\">\"maTable\"<\/span> <span style=\"font-weight: 400; color: #0000ff;\">border<\/span><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400; color: #ff0000;\">\"1\"<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">thead<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;Nom&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;M\u00e9tier&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;Salaire (\u20ac)&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">thead<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tbody<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Alice Wonderland&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Data Scientist&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;60 000&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tbody<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\">&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">table<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><br \/><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">script<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0<\/span><span style=\"color: #800080;\"><b>function<\/b><\/span> <span style=\"font-weight: 400; color: #0000ff;\">ajouterLigne<\/span><span style=\"font-weight: 400;\"><span style=\"color: #0000ff;\">()<\/span> {<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0<\/span><span style=\"color: #800080;\"><b>var<\/b> <\/span><span style=\"font-weight: 400; color: #0000ff;\">table<\/span> <span style=\"color: #ff00ff;\"><b>=<\/b><\/span> <span style=\"font-weight: 400; color: #33cccc;\">document<\/span><span style=\"color: #993300;\"><span style=\"font-weight: 400;\">.<\/span><span style=\"font-weight: 400;\">getElementById<\/span><\/span><span style=\"font-weight: 400;\">(<\/span><span style=\"font-weight: 400; color: #ff0000;\">\"maTable\"<\/span><span style=\"font-weight: 400;\">)<span style=\"color: #993300;\">.<\/span><\/span><span style=\"font-weight: 400; color: #993300;\">getElementsByTagName<\/span><span style=\"font-weight: 400;\">(<\/span><span style=\"font-weight: 400; color: #ff0000;\">'tbody'<\/span><span style=\"font-weight: 400;\">)[<\/span><span style=\"font-weight: 400; color: #008000;\">0<\/span><span style=\"font-weight: 400;\">];<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0<\/span><span style=\"color: #800080;\"><b>var<\/b><\/span> <span style=\"font-weight: 400; color: #0000ff;\">nouvelleLigne <\/span><span style=\"color: #ff00ff;\"><b>=<\/b><\/span> <span style=\"font-weight: 400; color: #333399;\">table<\/span><span style=\"color: #993300;\"><span style=\"font-weight: 400;\">.<\/span><span style=\"font-weight: 400;\">insertRow<\/span><\/span><span style=\"font-weight: 400;\">();<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0<\/span><span style=\"color: #800080;\"><b>var<\/b><\/span> <span style=\"font-weight: 400; color: #0000ff;\">cellule1<\/span> <span style=\"color: #ff00ff;\"><b>=<\/b><\/span> <span style=\"font-weight: 400; color: #333399;\">nouvelleLigne<\/span><span style=\"color: #993300;\"><span style=\"font-weight: 400;\">.<\/span><span style=\"font-weight: 400;\">insertCell<\/span><\/span><span style=\"font-weight: 400;\">(<\/span><span style=\"font-weight: 400; color: #008000;\">0<\/span><span style=\"font-weight: 400;\">);<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0<\/span><span style=\"color: #800080;\"><b>var<\/b><\/span> <span style=\"font-weight: 400; color: #0000ff;\">cellule2<\/span> <span style=\"color: #ff00ff;\"><b>=<\/b><\/span> <span style=\"font-weight: 400; color: #333399;\">nouvelleLigne<\/span><span style=\"color: #993300;\"><span style=\"font-weight: 400;\">.<\/span><span style=\"font-weight: 400;\">insertCell<\/span><\/span><span style=\"font-weight: 400;\">(<\/span><span style=\"font-weight: 400; color: #008000;\">1<\/span><span style=\"font-weight: 400;\">);<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0<\/span><span style=\"color: #800080;\"><b>var<\/b><\/span> <span style=\"font-weight: 400; color: #0000ff;\">cellule3<\/span> <span style=\"color: #ff00ff;\"><b>=<\/b><\/span> <span style=\"font-weight: 400; color: #333399;\">nouvelleLigne<\/span><span style=\"color: #993300;\"><span style=\"font-weight: 400;\">.<\/span><span style=\"font-weight: 400;\">insertCell<\/span><\/span><span style=\"font-weight: 400;\">(<\/span><span style=\"font-weight: 400; color: #008000;\">2<\/span><span style=\"font-weight: 400;\">);<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400; color: #333399;\">cellule1<\/span><span style=\"color: #993300;\"><span style=\"font-weight: 400;\">.<\/span><span style=\"font-weight: 400;\">innerHTML<\/span><\/span> <span style=\"color: #ff00ff;\"><b>=<\/b><\/span> <span style=\"font-weight: 400; color: #ff0000;\">\"Pr\u00e9nom Nom\"<\/span><span style=\"font-weight: 400;\">;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400; color: #333399;\">cellule2<\/span><span style=\"color: #993300;\"><span style=\"font-weight: 400;\">.<\/span><span style=\"font-weight: 400;\">innerHTML<\/span><\/span> <span style=\"color: #ff00ff;\"><b>=<\/b> <\/span><span style=\"font-weight: 400; color: #ff0000;\">\"Data Engineer\"<\/span><span style=\"font-weight: 400;\">;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400; color: #333399;\">cellule3<\/span><span style=\"color: #993300;\"><span style=\"font-weight: 400;\">.<\/span><span style=\"font-weight: 400;\">innerHTML<\/span><\/span> <span style=\"color: #ff00ff;\"><b>=<\/b><\/span> <span style=\"font-weight: 400; color: #ff0000;\">\"55 000\"<\/span><span style=\"font-weight: 400;\">;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0}<\/span><br \/><span style=\"font-weight: 400;\">&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">script<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/pre>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0e73ca7 elementor-widget elementor-widget-text-editor\" data-id=\"0e73ca7\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Le bouton permettra ainsi d&rsquo;ajouter une nouvelle ligne, dans cet exemple, avec des valeurs par d\u00e9faut.<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-60216d1 elementor-widget elementor-widget-html\" data-id=\"60216d1\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<button onclick=\"ajouterLigne()\">Ajouter une ligne<\/button>\r\n<style>\r\n  table {\r\n    width: 100%;\r\n    border-collapse: collapse;\r\n  }\r\n  th, td {\r\n    border: 1px solid black;\r\n    padding: 10px;\r\n    text-align: left;\r\n  }\r\n  th {\r\n    background-color: #f2f2f2;\r\n  }\r\n<\/style>\r\n\r\n<table id=\"maTable\" border=\"1\">\r\n  <thead>\r\n    <tr>\r\n      <th>Nom<\/th>\r\n      <th>M\u00e9tier<\/th>\r\n      <th>Salaire (\u20ac)<\/th>\r\n    <\/tr>\r\n  <\/thead>\r\n<\/table>\r\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-acf0788 e-flex e-con-boxed e-con\" data-id=\"acf0788\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d9fd70f elementor-widget elementor-widget-heading\" data-id=\"d9fd70f\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Conclusion<\/h3>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-263533e elementor-widget elementor-widget-text-editor\" data-id=\"263533e\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Les tables HTML sont puissantes pour pr\u00e9senter des donn\u00e9es sous forme structur\u00e9e, facilitant ainsi la lisibilit\u00e9 et la compr\u00e9hension des informations. En connaissant les \u00e9l\u00e9ments de base comme <\/span><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">table<\/span><span style=\"font-weight: 400;\">&gt;<\/span><span style=\"font-weight: 400;\">, <\/span><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">thead<\/span><span style=\"font-weight: 400;\">&gt;<\/span><span style=\"font-weight: 400;\">, <\/span><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tbody<\/span><span style=\"font-weight: 400;\">&gt;<\/span><span style=\"font-weight: 400;\">,<\/span><span style=\"font-weight: 400;\"> &lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><span style=\"font-weight: 400;\">, <\/span><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;<\/span><span style=\"font-weight: 400;\">, et <\/span><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><span style=\"font-weight: 400;\">, ainsi que des concepts plus avanc\u00e9s comme <\/span><span style=\"font-weight: 400;\">colspan <\/span><span style=\"font-weight: 400;\">et <\/span><span style=\"font-weight: 400;\">rowspan<\/span><span style=\"font-weight: 400;\">, vous serez en mesure de cr\u00e9er des tableaux sophistiqu\u00e9s et accessibles. D&rsquo;autant plus en combinant le <a href=\"https:\/\/datascientest.com\/css3-tout-savoir\">CSS<\/a> pour la personnalisation graphique et le <a href=\"https:\/\/datascientest.com\/javascript-tout-savoir\">Javascript<\/a> pour rendre le tout interactif. Avec les bonnes pratiques, notamment li\u00e9es \u00e0 l&rsquo;accessibilit\u00e9, vos tables seront utilisables par le plus grand nombre d&rsquo;utilisateurs, et \u00e9galement sur un grand nombre de navigateurs.<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-898d14f elementor-align-center button-principale elementor-widget elementor-widget-button\" data-id=\"898d14f\" data-element_type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm elementor-animation-grow\" href=\"https:\/\/datascientest.com\/formation-software-engineer\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t<span class=\"elementor-button-text\">Tout ma\u00eetriser sur HTML<\/span>\n\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-ec2fe67 e-flex e-con-boxed e-con\" data-id=\"ec2fe67\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-042c813 elementor-widget elementor-widget-html\" data-id=\"042c813\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<script type=\"application\/ld+json\">\r\n{\r\n  \"@context\": \"https:\/\/schema.org\",\r\n  \"@type\": \"FAQPage\",\r\n  \"mainEntity\": [{\r\n    \"@type\": \"Question\",\r\n    \"name\": \"Qu'est-ce qu'une table en HTML ?\",\r\n    \"acceptedAnswer\": {\r\n      \"@type\": \"Answer\",\r\n      \"text\": \"Une table en HTML est une structure utilis\u00e9e pour organiser des donn\u00e9es sous forme de tableau. Elle est compos\u00e9e de lignes (balise <tr>), de cellules de donn\u00e9es (balise <td>), et de cellules d'en-t\u00eate (balise <th>) pour structurer les informations de mani\u00e8re claire et lisible.\"\r\n    }\r\n  }, {\r\n    \"@type\": \"Question\",\r\n    \"name\": \"Comment cr\u00e9er une table de base en HTML ?\",\r\n    \"acceptedAnswer\": {\r\n      \"@type\": \"Answer\",\r\n      \"text\": \"Pour cr\u00e9er une table de base en HTML, vous devez utiliser les balises <table> pour d\u00e9limiter la table, <tr> pour d\u00e9finir une ligne, <td> pour une cellule de donn\u00e9es et <th> pour une cellule d'en-t\u00eate. Par exemple :\\n```html\\n<table>\\n  <tr>\\n    <th>Nom<\/th>\\n    <th>\u00c2ge<\/th>\\n  <\/tr>\\n  <tr>\\n    <td>John<\/td>\\n    <td>30<\/td>\\n  <\/tr>\\n<\/table>\\n```\"\r\n    }\r\n  }, {\r\n    \"@type\": \"Question\",\r\n    \"name\": \"Quelles sont les bonnes pratiques pour structurer une table HTML ?\",\r\n    \"acceptedAnswer\": {\r\n      \"@type\": \"Answer\",\r\n      \"text\": \"Les bonnes pratiques incluent l'utilisation des balises <thead>, <tbody>, et <tfoot> pour bien structurer la table. Utilisez <thead> pour les en-t\u00eates, <tbody> pour les donn\u00e9es, et <tfoot> pour les informations de bas de tableau comme les totaux. Cela am\u00e9liore l'accessibilit\u00e9 et la lisibilit\u00e9 du code.\"\r\n    }\r\n  }, {\r\n    \"@type\": \"Question\",\r\n    \"name\": \"Comment styliser une table en HTML avec CSS ?\",\r\n    \"acceptedAnswer\": {\r\n      \"@type\": \"Answer\",\r\n      \"text\": \"Pour styliser une table HTML, vous pouvez utiliser des propri\u00e9t\u00e9s CSS comme `border` pour ajouter des bordures, `padding` pour espacer le contenu des cellules, et `text-align` pour aligner le texte. Par exemple :\\n```css\\ntable {\\n  border-collapse: collapse;\\n}\\nth, td {\\n  border: 1px solid black;\\n  padding: 8px;\\n  text-align: left;\\n}\\n```\"\r\n    }\r\n  }]\r\n}\r\n<\/script>\r\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Les tables HTML servent \u00e0 structurer et pr\u00e9senter des donn\u00e9es sur le web. Leur \u00e9quivalent CSS (comme les grids ou les flexbox) leur sont souvent pr\u00e9f\u00e9r\u00e9s car plus modernes, mais les tables HTML restent id\u00e9ales pour organiser des informations sous forme de tableau. Elles permettent de pr\u00e9senter les donn\u00e9es de fa\u00e7on structur\u00e9e en les organisant [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":254464,"comment_status":"open","ping_status":"open","sticky":false,"template":"elementor_theme","format":"standard","meta":{"content-type":"","inline_featured_image":false},"categories":[2494],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v21.7 (Yoast SEO v21.7) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Les tables HTML : Qu&#039;est-ce que c&#039;est ? Comment \u00e7a fonctionne ?<\/title>\n<meta name=\"description\" content=\"D\u00e9couvrez comment cr\u00e9er et styliser des tables HTML pour organiser vos donn\u00e9es efficacement. Apprenez des astuces et techniques pour am\u00e9liorer l&#039;accessibilit\u00e9 et le design de vos tableaux.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/datascientest.com\/tables-html-tout-savoir\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Les tables HTML : Qu&#039;est-ce que c&#039;est ? Comment \u00e7a fonctionne ?\" \/>\n<meta property=\"og:url\" content=\"https:\/\/datascientest.com\/tables-html-tout-savoir\" \/>\n<meta property=\"og:site_name\" content=\"Formation Data Science | DataScientest.com\" \/>\n<meta property=\"article:published_time\" content=\"2024-10-31T06:30:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-10-22T12:01:07+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/datascientest.com\/wp-content\/uploads\/2024\/10\/html-table-datascientest.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1000\" \/>\n\t<meta property=\"og:image:height\" content=\"500\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"Margalith Mamou\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Margalith Mamou\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/datascientest.com\/tables-html-tout-savoir\",\"url\":\"https:\/\/datascientest.com\/tables-html-tout-savoir\",\"name\":\"Les tables HTML : Qu'est-ce que c'est ? Comment \u00e7a fonctionne ?\",\"isPartOf\":{\"@id\":\"https:\/\/datascientest.com\/#website\"},\"datePublished\":\"2024-10-31T06:30:00+00:00\",\"dateModified\":\"2024-10-22T12:01:07+00:00\",\"author\":{\"@id\":\"https:\/\/datascientest.com\/#\/schema\/person\/1c2cce73f7edd34162d45b93c92adb00\"},\"description\":\"D\u00e9couvrez comment cr\u00e9er et styliser des tables HTML pour organiser vos donn\u00e9es efficacement. Apprenez des astuces et techniques pour am\u00e9liorer l'accessibilit\u00e9 et le design de vos tableaux.\",\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/datascientest.com\/tables-html-tout-savoir\"]}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/datascientest.com\/#website\",\"url\":\"https:\/\/datascientest.com\/\",\"name\":\"Formation Data Science | DataScientest.com\",\"description\":\"Leader de la formation en Data Science\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/datascientest.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/datascientest.com\/#\/schema\/person\/1c2cce73f7edd34162d45b93c92adb00\",\"name\":\"Margalith Mamou\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/datascientest.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/datascientest.com\/wp-content\/uploads\/2023\/11\/Margalith.jpg\",\"contentUrl\":\"https:\/\/datascientest.com\/wp-content\/uploads\/2023\/11\/Margalith.jpg\",\"caption\":\"Margalith Mamou\"},\"description\":\"Margalith Mamou est Product Manager chez DataScientest, apr\u00e8s avoir occup\u00e9 le poste de Chef de projet Web pendant plus d'un an au sein de la m\u00eame entreprise. Auparavant, elle a \u00e9t\u00e9 D\u00e9veloppeur web pendant pr\u00e8s de 3 ans. Margalith est dipl\u00f4m\u00e9e du Digital College et de l'Institut F2I, avec une sp\u00e9cialisation en gestion du Web et design digital marketing.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/margalith-mamou-a2869919b\/\",\"user\"],\"url\":\"https:\/\/datascientest.com\/author\/margalith\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Les tables HTML : Qu'est-ce que c'est ? Comment \u00e7a fonctionne ?","description":"D\u00e9couvrez comment cr\u00e9er et styliser des tables HTML pour organiser vos donn\u00e9es efficacement. Apprenez des astuces et techniques pour am\u00e9liorer l'accessibilit\u00e9 et le design de vos tableaux.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/datascientest.com\/tables-html-tout-savoir","og_locale":"fr_FR","og_type":"article","og_title":"Les tables HTML : Qu'est-ce que c'est ? Comment \u00e7a fonctionne ?","og_url":"https:\/\/datascientest.com\/tables-html-tout-savoir","og_site_name":"Formation Data Science | DataScientest.com","article_published_time":"2024-10-31T06:30:00+00:00","article_modified_time":"2024-10-22T12:01:07+00:00","og_image":[{"width":1000,"height":500,"url":"https:\/\/datascientest.com\/wp-content\/uploads\/2024\/10\/html-table-datascientest.webp","type":"image\/webp"}],"author":"Margalith Mamou","twitter_card":"summary_large_image","twitter_misc":{"\u00c9crit par":"Margalith Mamou","Dur\u00e9e de lecture estim\u00e9e":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/datascientest.com\/tables-html-tout-savoir","url":"https:\/\/datascientest.com\/tables-html-tout-savoir","name":"Les tables HTML : Qu'est-ce que c'est ? Comment \u00e7a fonctionne ?","isPartOf":{"@id":"https:\/\/datascientest.com\/#website"},"datePublished":"2024-10-31T06:30:00+00:00","dateModified":"2024-10-22T12:01:07+00:00","author":{"@id":"https:\/\/datascientest.com\/#\/schema\/person\/1c2cce73f7edd34162d45b93c92adb00"},"description":"D\u00e9couvrez comment cr\u00e9er et styliser des tables HTML pour organiser vos donn\u00e9es efficacement. Apprenez des astuces et techniques pour am\u00e9liorer l'accessibilit\u00e9 et le design de vos tableaux.","inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/datascientest.com\/tables-html-tout-savoir"]}]},{"@type":"WebSite","@id":"https:\/\/datascientest.com\/#website","url":"https:\/\/datascientest.com\/","name":"Formation Data Science | DataScientest.com","description":"Leader de la formation en Data Science","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/datascientest.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"fr-FR"},{"@type":"Person","@id":"https:\/\/datascientest.com\/#\/schema\/person\/1c2cce73f7edd34162d45b93c92adb00","name":"Margalith Mamou","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/datascientest.com\/#\/schema\/person\/image\/","url":"https:\/\/datascientest.com\/wp-content\/uploads\/2023\/11\/Margalith.jpg","contentUrl":"https:\/\/datascientest.com\/wp-content\/uploads\/2023\/11\/Margalith.jpg","caption":"Margalith Mamou"},"description":"Margalith Mamou est Product Manager chez DataScientest, apr\u00e8s avoir occup\u00e9 le poste de Chef de projet Web pendant plus d'un an au sein de la m\u00eame entreprise. Auparavant, elle a \u00e9t\u00e9 D\u00e9veloppeur web pendant pr\u00e8s de 3 ans. Margalith est dipl\u00f4m\u00e9e du Digital College et de l'Institut F2I, avec une sp\u00e9cialisation en gestion du Web et design digital marketing.","sameAs":["https:\/\/www.linkedin.com\/in\/margalith-mamou-a2869919b\/","user"],"url":"https:\/\/datascientest.com\/author\/margalith"}]}},"_links":{"self":[{"href":"https:\/\/datascientest.com\/wp-json\/wp\/v2\/posts\/254452"}],"collection":[{"href":"https:\/\/datascientest.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/datascientest.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/datascientest.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/datascientest.com\/wp-json\/wp\/v2\/comments?post=254452"}],"version-history":[{"count":0,"href":"https:\/\/datascientest.com\/wp-json\/wp\/v2\/posts\/254452\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/datascientest.com\/wp-json\/wp\/v2\/media\/254464"}],"wp:attachment":[{"href":"https:\/\/datascientest.com\/wp-json\/wp\/v2\/media?parent=254452"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/datascientest.com\/wp-json\/wp\/v2\/categories?post=254452"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/datascientest.com\/wp-json\/wp\/v2\/tags?post=254452"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}