DEV Community

Cover image for Tableaux HTML avec Données Cachées : Extraire Ce Que Vous Ne Voyez Pas
circobit
circobit

Posted on

Tableaux HTML avec Données Cachées : Extraire Ce Que Vous Ne Voyez Pas

#javascript #webscraping #html #french

Le tableau affiche 10 colonnes. Vous l'exportez. Le CSV a 10 colonnes.

Mais la page contient 15 colonnes de données. Où sont passées les 5 autres ?

Les tableaux HTML contiennent souvent plus de données que ce qui est visible. Colonnes cachées, attributs data, lignes repliées — tout invisible pour les méthodes d'extraction basiques.

Voici comment trouver et extraire les données que vous ne voyez pas.

Types de Données Cachées

1. Colonnes Cachées par CSS

Le cas le plus simple : les colonnes existent dans le DOM mais sont masquées avec du CSS.

<th style="display: none;">ID Interne</th>
<td style="display: none;">12345</td>
Enter fullscreen mode Exit fullscreen mode

Ou via des classes :

.hidden-column { display: none; }
Enter fullscreen mode Exit fullscreen mode

Pourquoi les sites font ça : Responsivité mobile (cacher des colonnes sur petit écran), données internes pour le JavaScript, divulgation progressive.

Comment détecter : Ouvrez les DevTools, inspectez le tableau, cherchez les cellules avec display: none ou visibility: hidden.

2. Attributs Data

HTML5 permet des attributs data-* personnalisés sur n'importe quel élément. Les tableaux les utilisent pour stocker des métadonnées auxquelles le JavaScript accède mais que les utilisateurs ne voient pas.

<tr data-id="12345" data-category="electronique" data-stock="47">
  <td>Ordinateur portable</td>
  <td>999 €</td>
</tr>
Enter fullscreen mode Exit fullscreen mode

Le tableau visible montre « Ordinateur portable » et « 999 € ». Mais la ligne porte trois points de données supplémentaires.

Attributs data courants :

  • data-id — identifiant interne
  • data-sort-value — valeur numérique pour le tri (quand l'affichage montre « Jan 2024 » mais le tri nécessite 202401)
  • data-raw — valeur non formatée (quand l'affichage montre « 1,2 M€ » mais la donnée est 1200000)
  • data-href — URL du lien

3. Attributs Title et Infobulle

L'attribut title fournit du texte au survol qui contient souvent des informations supplémentaires.

<td title="Mis à jour : 2024-01-15 14:32:00 UTC">15 jan.</td>
Enter fullscreen mode Exit fullscreen mode

La cellule affiche « 15 jan. ». L'horodatage complet est dans l'infobulle.

4. Lignes Repliées/Dépliables

Les tableaux avec fonctionnalité de détail cachent des lignes jusqu'au clic.

<tr class="parent-row">
  <td>Catégorie A</td>
  <td>50 000 €</td>
</tr>
<tr class="child-row" style="display: none;">
  <td>— Sous-catégorie A1</td>
  <td>30 000 €</td>
</tr>
<tr class="child-row" style="display: none;">
  <td>— Sous-catégorie A2</td>
  <td>20 000 €</td>
</tr>
Enter fullscreen mode Exit fullscreen mode

Les données existent. Elles ne sont simplement pas dépliées.

5. Contenu Chargé Paresseusement

Certains tableaux montrent un sous-ensemble et chargent le reste via JavaScript au scroll ou au clic sur « Charger plus ».

<table id="results">
  <!-- Premières 20 lignes rendues -->
</table>
<button onclick="loadMore()">Afficher plus de résultats</button>
Enter fullscreen mode Exit fullscreen mode

Les données restantes ne sont pas dans le DOM tant que vous ne déclenchez pas le chargement.

Extraire les Données Cachées

Extraire les Colonnes Cachées par CSS

Avec JavaScript (dans la console du navigateur) :

// Supprimer display:none de toutes les cellules
document.querySelectorAll('td, th').forEach(el => {
  el.style.display = '';
});
Enter fullscreen mode Exit fullscreen mode

Maintenant exportez normalement — les colonnes sont visibles.

Avec Python + BeautifulSoup :

BeautifulSoup ignore le CSS. Il extrait tous les éléments indépendamment de leur visibilité.

from bs4 import BeautifulSoup

soup = BeautifulSoup(html, 'html.parser')
table = soup.find('table')

for row in table.find_all('tr'):
    cells = [td.get_text(strip=True) for td in row.find_all(['td', 'th'])]
    print(cells)  # Inclut les colonnes cachées
Enter fullscreen mode Exit fullscreen mode

Extraire les Attributs Data

Approche JavaScript :

const rows = document.querySelectorAll('table tr');
const data = [];

rows.forEach(row => {
  const rowData = {
    // Texte visible
    cells: Array.from(row.querySelectorAll('td')).map(td => td.textContent),
    // Attributs data
    id: row.dataset.id,
    category: row.dataset.category,
    stock: row.dataset.stock
  };
  data.push(rowData);
});

console.log(JSON.stringify(data, null, 2));
Enter fullscreen mode Exit fullscreen mode

Approche Python :

for row in table.find_all('tr'):
    # Récupérer les attributs data
    attrs = {k: v for k, v in row.attrs.items() if k.startswith('data-')}

    # Récupérer le texte des cellules
    cells = [td.get_text(strip=True) for td in row.find_all('td')]

    print(f"Data: {attrs}, Cellules: {cells}")
Enter fullscreen mode Exit fullscreen mode

Extraire les Attributs Title 

const cells = document.querySelectorAll('table td');
cells.forEach(cell => {
  if (cell.title) {
    console.log(`Affiché: ${cell.textContent}, Complet: ${cell.title}`);
  }
});
Enter fullscreen mode Exit fullscreen mode

Déplier les Lignes Repliées

Option 1 : Cliquer sur tous les boutons de dépliage

// Trouver et cliquer sur tous les boutons d'expansion
document.querySelectorAll('.expand-btn, .toggle-row').forEach(btn => {
  btn.click();
});

// Attendre la mise à jour du DOM, puis exporter
setTimeout(() => {
  // Logique d'export ici
}, 1000);
Enter fullscreen mode Exit fullscreen mode

Option 2 : Supprimer la classe hidden

document.querySelectorAll('.child-row, .detail-row').forEach(row => {
  row.style.display = '';
  row.classList.remove('hidden', 'collapsed');
});
Enter fullscreen mode Exit fullscreen mode

Déclencher le Chargement Paresseux

C'est plus délicat — vous devez simuler l'action qui déclenche le chargement.

// Défiler jusqu'en bas pour déclencher le scroll infini
window.scrollTo(0, document.body.scrollHeight);

// Ou cliquer sur « Charger plus » de façon répétée
const loadMore = document.querySelector('.load-more-btn');
while (loadMore && !loadMore.disabled) {
  loadMore.click();
  await new Promise(r => setTimeout(r, 500)); // Attendre le chargement
}
Enter fullscreen mode Exit fullscreen mode

Exemple Concret : Valeurs de Tri

Les tableaux de statistiques sportives affichent souvent des nombres formatés mais trient par valeurs brutes.

<td data-sort="1234567">1,23M</td>
<td data-sort="20240115">15 jan. 2024</td>
<td data-sort="0.347">34,7%</td>
Enter fullscreen mode Exit fullscreen mode

Si vous n'extrayez que le texte visible, vous obtenez des chaînes formatées qui ne se trient ni ne se calculent correctement.

Extraction avec les deux valeurs :

const cells = document.querySelectorAll('table td');
const data = Array.from(cells).map(cell => ({
  display: cell.textContent.trim(),
  sortValue: cell.dataset.sort || cell.textContent.trim()
}));
Enter fullscreen mode Exit fullscreen mode

Quand les Extensions Navigateur Aident

Les bons outils d'export de tableaux gèrent certains de ces cas automatiquement :

  • Les colonnes cachées par CSS peuvent être incluses via une option
  • Les attributs data peuvent être extraits comme colonnes supplémentaires
  • La normalisation des nombres peut parser « 1,23 M€ » en 1230000

HTML Table Exporter extrait le contenu visible avec une gestion correcte des cellules fusionnées et du formatage. Pour découvrir les différentes méthodes d'extraction sans code, consultez notre guide sur les scrapers de tableaux HTML pour Chrome.

Pour les attributs data et le contenu profondément caché, vous aurez peut-être besoin des approches JavaScript ci-dessus.

Le Workflow d'Inspection

Avant d'extraire n'importe quel tableau :

  1. Ouvrir les DevTools (F12)
  2. Inspecter l'élément tableau
  3. Vérifier :
    • display: none sur des colonnes
    • Attributs data-* sur les lignes/cellules
    • Attributs title avec des infos supplémentaires
    • Lignes enfants cachées
    • Boutons « Charger plus »
  4. Décider : Les données visibles suffisent-elles, ou avez-vous besoin des données cachées ?

La plupart du temps, les données visibles suffisent. Mais quand ce n'est pas le cas, savoir comment trouver et extraire les données cachées fait toute la différence.

Résumé

Les tableaux HTML peuvent contenir plusieurs couches de données :

Couche Comment y accéder
Texte visible Export standard
Colonnes cachées par CSS Supprimer display:none ou utiliser BeautifulSoup
Attributs data JavaScript dataset ou Python attrs
Title/infobulles Extraire l'attribut title
Lignes repliées Déplier ou supprimer la classe hidden
Chargement paresseux Déclencher le chargement d'abord

Les données sont généralement là. Il faut juste savoir où chercher.

Besoin d'exporter les données que vous voyez ? En savoir plus sur gauchogrid.com/fr/html-table-exporter ou essayez HTML Table Exporter gratuitement sur le Chrome Web Store.

Top comments (0)