DEV Community

Cover image for HTML-tabellen met Verborgen Data: Scrapen Wat Je Niet Kunt Zien
circobit
circobit

Posted on

HTML-tabellen met Verborgen Data: Scrapen Wat Je Niet Kunt Zien

#webdev #scraping #javascript #tutorial

De tabel toont 10 kolommen. Je exporteert hem. De CSV heeft 10 kolommen.

Maar de pagina bevat 15 kolommen aan data. Waar zijn de andere 5 gebleven?

HTML-tabellen bevatten vaak meer data dan wat zichtbaar is. Verborgen kolommen, data-attributen, ingeklapte rijen — allemaal onzichtbaar voor basale extractiemethoden.

Zo vind en extraheer je de data die je niet kunt zien.

Typen Verborgen Data

1. CSS-verborgen Kolommen

Het eenvoudigste geval: kolommen bestaan in de DOM maar zijn verborgen met CSS.

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

Of via klassen:

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

Waarom sites dit doen: Mobiele responsiviteit (kolommen verbergen op kleine schermen), interne data voor JavaScript, progressieve onthulling.

Hoe te detecteren: Open DevTools, inspecteer de tabel, zoek naar cellen met display: none of visibility: hidden.

2. Data-attributen

HTML5 staat aangepaste data-* attributen toe op elk element. Tabellen gebruiken deze om metadata op te slaan die JavaScript benadert maar gebruikers niet zien.

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

De zichtbare tabel toont "Laptop" en "€999". Maar de rij draagt drie extra datapunten.

Veelvoorkomende data-attributen:

  • data-id — interne identifier
  • data-sort-value — numerieke waarde voor sortering (wanneer het display "jan 2024" toont maar de sortering 202401 nodig heeft)
  • data-raw — ongeformatteerde waarde (wanneer het display "€1,2M" toont maar de data 1200000 is)
  • data-href — link-URL

3. Title- en Tooltip-attributen

Het title-attribuut biedt hovertekst die vaak aanvullende informatie bevat.

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

De cel toont "15 jan". De volledige timestamp staat in de tooltip.

4. Ingeklapte/Uitklapbare Rijen

Tabellen met drill-down functionaliteit verbergen detailrijen tot er wordt geklikt.

<tr class="parent-row">
  <td>Categorie A</td>
  <td>€50.000</td>
</tr>
<tr class="child-row" style="display: none;">
  <td>— Subcategorie A1</td>
  <td>€30.000</td>
</tr>
<tr class="child-row" style="display: none;">
  <td>— Subcategorie A2</td>
  <td>€20.000</td>
</tr>
Enter fullscreen mode Exit fullscreen mode

De data is er. Hij is alleen niet uitgeklapt.

5. Lazy-loaded Content

Sommige tabellen tonen een subset en laden meer via JavaScript als je scrollt of op "Meer laden" klikt.

<table id="results">
  <!-- Eerste 20 rijen gerenderd -->
</table>
<button onclick="loadMore()">Meer resultaten tonen</button>
Enter fullscreen mode Exit fullscreen mode

De overige data staat niet in de DOM totdat je het laden activeert.

Verborgen Data Extraheren

CSS-verborgen Kolommen Extraheren

Met JavaScript (in browserconsole):

// Verwijder display:none van alle cellen
document.querySelectorAll('td, th').forEach(el => {
  el.style.display = '';
});
Enter fullscreen mode Exit fullscreen mode

Nu kun je normaal exporteren — de kolommen zijn zichtbaar.

Met Python + BeautifulSoup:

BeautifulSoup negeert CSS. Het extraheert alle elementen ongeacht zichtbaarheid.

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)  # Inclusief verborgen kolommen
Enter fullscreen mode Exit fullscreen mode

Data-attributen Extraheren

JavaScript-aanpak:

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

rows.forEach(row => {
  const rowData = {
    // Zichtbare tekst
    cells: Array.from(row.querySelectorAll('td')).map(td => td.textContent),
    // Data-attributen
    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

Python-aanpak:

for row in table.find_all('tr'):
    # Haal data-attributen op
    attrs = {k: v for k, v in row.attrs.items() if k.startswith('data-')}

    # Haal celtekst op
    cells = [td.get_text(strip=True) for td in row.find_all('td')]

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

Title-attributen Extraheren 

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

Ingeklapte Rijen Uitklappen

Optie 1: Klik alle uitklap-knoppen

// Zoek en klik alle uitklapknoppen
document.querySelectorAll('.expand-btn, .toggle-row').forEach(btn => {
  btn.click();
});

// Wacht tot DOM is bijgewerkt, exporteer dan
setTimeout(() => {
  // Exportlogica hier
}, 1000);
Enter fullscreen mode Exit fullscreen mode

Optie 2: Verborgen klasse verwijderen

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

Lazy Load Activeren

Dit is lastiger — je moet de actie simuleren die het laden activeert.

// Scroll naar beneden om infinite scroll te activeren
window.scrollTo(0, document.body.scrollHeight);

// Of klik herhaaldelijk op "Meer laden"
const loadMore = document.querySelector('.load-more-btn');
while (loadMore && !loadMore.disabled) {
  loadMore.click();
  await new Promise(r => setTimeout(r, 500)); // Wacht op laden
}
Enter fullscreen mode Exit fullscreen mode

Praktijkvoorbeeld: Sorteerwaarden

Sportstatistiektabellen tonen vaak geformatteerde getallen maar sorteren op ruwe waarden.

<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

Als je alleen de zichtbare tekst extraheert, krijg je geformatteerde strings die niet correct sorteren of berekenen.

Extractie met beide waarden:

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

Wanneer Browserextensies Helpen

Goede tabelexporttools verwerken een deel hiervan automatisch:

  • CSS-verborgen kolommen kunnen via een optie worden meegenomen
  • Data-attributen kunnen als extra kolommen worden geëxtraheerd
  • Getalnormalisatie kan "$1,23M" parsen naar 1230000

HTML Table Exporter extraheert zichtbare content met correcte verwerking van samengevoegde cellen en opmaak. Bekijk voor meer complexe extractiebehoeften zonder code onze gids over HTML-tabelscraping met Chrome.

Voor data-attributen en diep verborgen content heb je mogelijk de JavaScript-aanpakken hierboven nodig.

De Inspectie-workflow

Voordat je een tabel extraheert:

  1. Open DevTools (F12)
  2. Inspecteer het tabelelement
  3. Controleer op:
    • display: none op kolommen
    • data-* attributen op rijen/cellen
    • title attributen met extra informatie
    • Verborgen childrijen
    • "Meer laden"-knoppen
  4. Beslis: Is de zichtbare data genoeg, of heb je de verborgen data nodig?

Meestal is de zichtbare data voldoende. Maar wanneer dat niet zo is, maakt het verschil om te weten hoe je verborgen data vindt en extraheert.

Samenvatting

HTML-tabellen kunnen meerdere lagen data bevatten:

Laag Hoe te benaderen
Zichtbare tekst Standaard export
CSS-verborgen kolommen Verwijder display:none of gebruik BeautifulSoup
Data-attributen JavaScript dataset of Python attrs
Title/tooltips Extraheer title-attribuut
Ingeklapte rijen Uitklappen of verborgen klasse verwijderen
Lazy-loaded Activeer eerst het laden

De data is er meestal. Je moet alleen weten waar je moet zoeken.

Wil je de zichtbare data exporteren? Meer info op gauchogrid.com/nl/html-table-exporter of probeer HTML Table Exporter gratis in de Chrome Web Store.

Top comments (0)