DEV Community: circobit

Finanztabellen extrahieren: Aktien, ETFs und Marktdaten

circobit — Tue, 21 Jul 2026 07:30:00 +0000

Finanz-Websites sind wahre Goldgruben an tabellarischen Daten. Aktienkurse, ETF-Positionen, Marktindizes, Geschäftsberichte — alles in HTML-Tabellen, bereit zur Analyse.

Aber diese Daten in ein nutzbares Format zu bringen, ist nicht immer einfach.

Dieser Leitfaden behandelt die häufigsten Herausforderungen bei Finanztabellen und praktische Lösungen für eine saubere Extraktion.

Warum Finanztabellen schwierig sind

Finanzdaten haben Eigenheiten, die naive Extraktionsmethoden zum Scheitern bringen.

Gemischte Zahlenformate

US-Seiten zeigen 1,234.56. Europäische Seiten zeigen 1.234,56. Manche Finanzportale mischen beide Formate je nach Datenquelle.

Kopieren und Einfügen in Excel verfälscht diese Werte oft. Aus einem Tausender wird eine Dezimalzahl. Aus einem Datum wird eine Zahl. Chaos.

Echtzeit-Aktualisierungen

Viele Finanztabellen aktualisieren sich dynamisch. Das DOM ändert sich nach dem Seitenaufbau. Wird zu früh gescrapt, erhält man veraltete Daten oder leere Zellen.

Verschachtelte Strukturen

Positionstabellen haben oft ausklappbare Zeilen. Die Top-Positionen eines Fonds zeigen vielleicht 10 Zeilen, mit einem „Alle 50 anzeigen"-Button, der den Rest versteckt. Die ausgeblendeten Daten existieren in der Seite, sind aber nicht sichtbar.

Prozent- und Währungssymbole

+2,34% und 1.234 € sehen für Menschen gut aus. Für eine Tabellenkalkulation sind es Textstrings, die weder sortier- noch berechenbar sind.

Häufige Finanzdatenquellen

Yahoo Finance

Aktienkurse, historische Daten, Portfolio-Positionen. Tabellen sind relativ sauber, aktualisieren sich aber dynamisch.

Tipp: Warten, bis die Seite vollständig geladen ist. Das initiale Rendering zeigt oft Lade-Platzhalter.

Google Finance

Wenige Tabellen, hauptsächlich Karten und Diagramme. Für Massenextraktion weniger nützlich.

Einen ausführlichen Leitfaden finden Sie in unserem Artikel über die beste Chrome-Erweiterung zum Kopieren von Tabellen nach Excel.

Morningstar

Fondspositionen, Performance-Daten, Sektoraufteilungen. Tabellen sind gut strukturiert, aber oft paginiert.

Tipp: Achten Sie auf „Alle anzeigen"- oder Paginierungssteuerungen. Die erste Seite zeigt möglicherweise nur die Top-10-Positionen.

SEC EDGAR

Geschäftsberichte enthalten Tabellen, die jedoch in komplexe Dokumente eingebettet sind. 10-K- und 10-Q-Berichte haben Finanzausweise als HTML-Tabellen.

Tipp: Die Tabellen sind vorhanden, aber von Rechtstexten umgeben. Identifizieren Sie die gewünschte Tabelle vor der Extraktion.

MarketWatch, Investing.com, Reuters

Nachrichtenorientiert, aber mit Datentabellen für Kurse, Geschäftsergebnisse und Wirtschaftskalender.

Extraktionsstrategien

Strategie 1: Direkter Export

Der einfachste Ansatz — wenn die Daten nur einmal benötigt werden.

Tools wie HTML Table Exporter erkennen Tabellen auf der Seite und exportieren direkt nach CSV oder Excel. Kein Code erforderlich.

Speziell für Finanzdaten:

Bereinigungspresets verwenden, die Zahlenformate normalisieren
Nach CSV exportieren bei weiterer Verarbeitung; nach Excel, wenn es das Endziel ist
Prüfen, dass dynamische Inhalte geladen sind, bevor exportiert wird

Strategie 2: Python + Pandas

Für wiederholte Extraktion oder Integration in Pipelines.

import pandas as pd

# Grundlegende Extraktion
tables = pd.read_html('https://example.com/stock-data')
df = tables[0]  # Erste Tabelle der Seite

# Mit Header-Angabe
df = pd.read_html(url, header=0)[0]

# Encoding behandeln
df = pd.read_html(url, encoding='utf-8')[0]

Einschränkungen: read_html führt kein JavaScript aus. Dynamische Tabellen werden nicht geladen.

Strategie 3: Selenium für dynamische Inhalte

Wenn Tabellen per JavaScript geladen werden:

from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
import pandas as pd

driver = webdriver.Chrome()
driver.get('https://example.com/stock-data')

# Warten bis Tabelle geladen ist
WebDriverWait(driver, 10).until(
    EC.presence_of_element_located((By.TAG_NAME, "table"))
)

# Extrahieren
html = driver.page_source
tables = pd.read_html(html)

Kompromiss: Mehr Setup, aber dynamisch gerenderte Inhalte werden verarbeitet.

Finanzdaten bereinigen

Rohexporte müssen meist bereinigt werden.

Währungssymbole entfernen

df['Preis'] = df['Preis'].replace('[€,]', '', regex=True).astype(float)

Prozentangaben verarbeiten

df['Veraenderung'] = df['Veraenderung'].str.rstrip('%').astype(float) / 100

Zahlenformate normalisieren

Für europäisches Format (1.234,56 → 1234.56):

df['Wert'] = df['Wert'].str.replace('.', '', regex=False)
df['Wert'] = df['Wert'].str.replace(',', '.', regex=False).astype(float)

Datumsangaben parsen

Finanzseiten verwenden inkonsistente Datumsformate.

df['Datum'] = pd.to_datetime(df['Datum'], format='mixed')

Praxisbeispiel: ETF-Positionen

Angenommen, Sie möchten die Positionen eines Fonds für die Analyse.

Der manuelle Weg:

Fondsseite besuchen
Positionstabelle finden
In Excel kopieren und einfügen
20 Minuten Formatierung korrigieren

Der effiziente Weg:

Zur Positionstabelle navigieren
Direkt nach Excel exportieren mit Zahlennormalisierung
Fertig

Der Unterschied summiert sich. Wer monatlich mehrere Fonds verfolgt, spart durch Automatisierung Stunden.

Edge Cases beachten

Tabellen über Tabs verteilt

Manche Seiten zeigen verschiedene Daten (Positionen, Performance, Risiko) in Tabs, die unterschiedliche Tabellen laden. Jeder Tab ist eine separate Extraktion.

Fußnoten und Annotationen

Finanztabellen lieben Sternchen und Kreuze. 1.234* könnte „geschätzt" bedeuten, bricht aber das numerische Parsing.

Lösung: Nicht-numerische Suffixe vor der Konvertierung entfernen.

Wiederholte Header-Zeilen

Lange Tabellen wiederholen manchmal Header innerhalb der Tabelle zur besseren Lesbarkeit. Die Extraktion könnte doppelte Header-Zeilen als Daten enthalten.

Lösung: Zeilen filtern, bei denen alle Werte dem Header entsprechen.

Wann automatisieren vs. wann manuell exportieren

Manueller Export eignet sich bei:

Einmaliger Analyse
Unregelmäßigem Zeitplan
Unterschiedlichen Tabellen jedes Mal

Automatisierung eignet sich bei:

Täglichen/wöchentlichen wiederkehrenden Abfragen
Gleichen Tabellen, gleiche Struktur
Integration in größere Pipelines

Für die meisten Analysten bei gelegentlicher Recherche ist manueller Export mit einem guten Tool schneller als das Erstellen und Warten von Skripten.

Zusammenfassung

Finanztabellen sind wertvoll, aber unordentlich. Die zentralen Herausforderungen sind Zahlenformate, dynamisches Laden und inkonsistente Strukturen.

Für schnelle Extraktionen decken browserbasierte Tools die meisten Fälle ab. Für Pipelines erledigt Python mit entsprechenden Wartezeiten und Bereinigungen den Rest.

Das Ziel ist nicht perfekte Automatisierung — sondern saubere Daten mit minimalem Aufwand.

Finanztabellen schnell exportieren? Erfahren Sie mehr auf gauchogrid.com/de/html-table-exporter oder probieren Sie HTML Table Exporter kostenlos im Chrome Web Store aus.

브라우저에서 데이터베이스까지: 웹 테이블의 가장 빠른 경로

circobit — Tue, 21 Jul 2026 00:30:00 +0000

웹사이트에서 데이터를 찾았습니다. 데이터베이스에 넣어야 합니다.

A 지점에서 B 지점까지 가장 빠른 경로는 무엇일까요?

이 가이드에서는 HTML 테이블을 SQLite, PostgreSQL, MySQL 및 기타 데이터베이스에 최소한의 마찰로 가져오는 실용적인 워크플로를 다룹니다.

일반적인 워크플로

모든 브라우저-데이터베이스 파이프라인은 같은 단계를 거칩니다:

추출 — 웹페이지에서 테이블 가져오기
정제 — 서식, 타입, 구조 수정
적재 — 데이터베이스에 삽입

문제는 각 단계를 어디서 어떤 도구로 수행할 것인가입니다.

경로 1: CSV를 중간 매개체로 사용

가장 일반적인 접근 방식입니다. 모든 데이터베이스에서 작동합니다.

1단계: CSV로 내보내기

HTML Table Exporter 같은 브라우저 확장 프로그램을 사용하거나 스프레드시트에 복사-붙여넣기 후 CSV로 저장합니다.

핵심 고려사항: 구분자 선택. 쉼표는 데이터에 쉼표가 포함되지 않는 한 잘 작동합니다. 세미콜론이나 탭은 복잡한 데이터에 더 안전합니다.

2단계: 데이터베이스에 로드

SQLite:

sqlite3 mydb.db
.mode csv
.import data.csv tablename

헤더 포함:

sqlite3 mydb.db <<EOF
.mode csv
.headers on
.import data.csv tablename
EOF

PostgreSQL:

COPY tablename FROM '/path/to/data.csv' 
WITH (FORMAT csv, HEADER true);

psql 사용 시:

\copy tablename FROM 'data.csv' WITH (FORMAT csv, HEADER true);

MySQL:

LOAD DATA INFILE '/path/to/data.csv'
INTO TABLE tablename
FIELDS TERMINATED BY ','
ENCLOSED BY '"'
LINES TERMINATED BY '\n'
IGNORE 1 ROWS;

장단점

✅ 범용 호환성

✅ 중간 파일 쉽게 검사 가능

✅ 로딩 전 수동 수정 가능

❌ 추가 단계 필요

❌ 타입 추론이 기본적

경로 2: SQL 문 직접 생성

테이블을 INSERT 문으로 직접 내보냅니다.

SQL로 내보내기

일부 내보내기 도구는 SQL을 직접 생성합니다. 출력은 다음과 같습니다:

INSERT INTO table_name (col1, col2, col3) VALUES
('value1', 'value2', 123),
('value4', 'value5', 456);

로드

SQL 파일을 실행하면 됩니다:

# SQLite
sqlite3 mydb.db < data.sql

# PostgreSQL
psql -d mydb -f data.sql

# MySQL
mysql mydb < data.sql

장단점

✅ 내보내기에서 데이터베이스까지 한 단계

✅ SQL은 데이터베이스 간 이식 가능 (대부분)

❌ 대규모 데이터셋 = 거대한 SQL 파일

❌ 테이블 스키마를 먼저 정의해야 함

경로 3: Python + Pandas 파이프라인

최대한의 유연성. 반복 임포트나 복잡한 정제에 최적입니다.

전체 워크플로

import pandas as pd
from sqlalchemy import create_engine

# 1단계: CSV 로드 (브라우저에서 내보낸 것)
df = pd.read_csv('data.csv')

# 2단계: 정제
df.columns = df.columns.str.lower().str.replace(' ', '_')  # 열 이름 정규화
df['date'] = pd.to_datetime(df['date'])  # 날짜 파싱
df['amount'] = df['amount'].str.replace('[$,]', '', regex=True).astype(float)  # 통화 정제

# 3단계: 데이터베이스에 로드
engine = create_engine('sqlite:///mydb.db')
# 또는: create_engine('postgresql://user:pass@localhost/mydb')
# 또는: create_engine('mysql+pymysql://user:pass@localhost/mydb')

df.to_sql('tablename', engine, if_exists='replace', index=False)

타입 매핑

Pandas는 타입을 추론하지만 명시적으로 지정할 수도 있습니다:

df.to_sql('tablename', engine, 
          if_exists='replace', 
          index=False,
          dtype={
              'id': Integer(),
              'name': String(100),
              'created_at': DateTime(),
              'amount': Float()
          })

장단점

✅ 정제와 타입에 대한 완전한 제어

✅ 복잡한 변환 처리 가능

✅ 반복 가능하고 스크립트화 가능

❌ Python 환경 필요

❌ 일회성 임포트에는 과도함

경로 4: DuckDB (현대적 지름길)

DuckDB는 CSV를 직접 읽고 대부분의 정제를 자동으로 처리합니다.

직접 쿼리

-- 임포트 없이 CSV 쿼리
SELECT * FROM 'data.csv';

-- 타입 추론 포함
SELECT * FROM read_csv_auto('data.csv');

-- CSV에서 테이블 생성
CREATE TABLE mytable AS SELECT * FROM 'data.csv';

브라우저에서 쿼리까지 몇 초만에

# 브라우저에서 CSV로 테이블 내보내기
# 그리고 바로 쿼리:
duckdb -c "SELECT column1, SUM(column2) FROM 'data.csv' GROUP BY column1;"

스키마 정의 없음. 임포트 단계 없음. 바로 쿼리.

장단점

✅ 임시 분석에 가장 빠름

✅ 우수한 타입 추론

✅ SQL 인터페이스

❌ 전통적인 데이터베이스가 아님 (영속성을 위해서는 결과를 내보내야 함)

일반적인 문제 처리

공백이 있는 열 이름

웹 테이블에는 "총 매출"이나 "연초 대비" 같은 헤더가 자주 있습니다.

내보내기 시 수정: 일부 도구는 헤더를 자동으로 정규화합니다.

임포트 시 수정:

df.columns = df.columns.str.replace(' ', '_').str.lower()

또는 임포트 후 SQL에서:

ALTER TABLE mytable RENAME COLUMN "Total Sales" TO total_sales;

혼합된 숫자 형식

유럽식 (1.234,56)과 미국식 (1,234.56) 형식은 임포트를 망칩니다.

임포트 전 수정: 정제 프리셋이 있는 도구를 사용하거나:

# 유럽식을 표준으로
df['value'] = df['value'].str.replace('.', '').str.replace(',', '.').astype(float)

Null 표현

웹 테이블은 빈칸, "N/A", "—", "-"로 결측 데이터를 표시합니다.

df = df.replace(['N/A', '—', '-', ''], pd.NA)

DuckDB에서:

SELECT NULLIF(column, 'N/A') AS column FROM 'data.csv';

다양한 형식의 날짜

df['date'] = pd.to_datetime(df['date'], format='mixed', dayfirst=True)

format='mixed'는 같은 열에서 일관되지 않은 날짜 형식을 처리합니다.

올바른 경로 선택

시나리오	추천 경로
일회성 임포트, 작은 테이블	CSV + 데이터베이스 직접 임포트
일회성 임포트, 정제 필요	Python + Pandas
빠른 분석, 영속성 불필요	DuckDB
같은 소스에서 정기적 임포트	Python 스크립트 (자동화)
공유/버전 관리를 위한 SQL 형식 필요	SQL 직접 내보내기

예시: 전체 워크플로

웹사이트에 제품 데이터 테이블이 있다고 합시다.

1단계: HTML Table Exporter로 내보내기 → 정제된 숫자가 포함된 CSV

2단계: DuckDB에서 빠른 검증:

SELECT COUNT(*), COUNT(DISTINCT product_id) FROM 'products.csv';
-- 중복 확인

3단계: PostgreSQL에 로드:

import pandas as pd
from sqlalchemy import create_engine

df = pd.read_csv('products.csv')
engine = create_engine('postgresql://user:pass@localhost/inventory')
df.to_sql('products', engine, if_exists='replace', index=False)

총 소요 시간: 2분.

핵심 교훈

가장 짧은 경로가 항상 가장 직접적인 것은 아닙니다.

내보내기 단계에서 30초를 정제에 투자하면 임포트 오류 디버깅에 10분을 절약할 수 있습니다. 올바른 중간 형식(CSV vs SQL vs JSON)을 사용하는 것은 대상 데이터베이스와 데이터 복잡성에 따라 다릅니다.

대부분의 웹 테이블 → 데이터베이스 워크플로에서:

숫자/날짜 정제와 함께 CSV로 내보내기
데이터베이스의 기본 CSV 임포트로 로드
복잡한 변환이 필요할 때만 Python 사용

단순한 파이프라인이 유지 가능한 파이프라인입니다.

Python 워크플로에 대해 자세히 알아보려면 Python & Pandas용 웹 테이블을 JSON으로 내보내기 가이드를 참조하세요.

데이터베이스에 바로 사용할 수 있는 깔끔한 내보내기가 필요하신가요? gauchogrid.com/ko/html-table-exporter에서 자세히 알아보거나 Chrome 웹 스토어에서 HTML Table Exporter를 무료로 사용해 보세요.

Van Browser naar Database: Het Kortste Pad voor Webtabellen

circobit — Mon, 20 Jul 2026 12:30:00 +0000

Je hebt data gevonden op een website. Je hebt het nodig in je database.

Wat is het snelste pad van punt A naar punt B?

Deze gids behandelt de praktische workflows om HTML-tabellen in SQLite, PostgreSQL, MySQL en andere databases te krijgen — met minimale wrijving.

De Algemene Workflow

Elke browser-naar-database pipeline heeft dezelfde stappen:

Extraheren — Haal de tabel uit de webpagina
Opschonen — Fix opmaak, typen en structuur
Laden — Voeg in in de database

De vraag is waar elke stap te doen en met welke tools.

Pad 1: CSV als Tussenstap

De meest voorkomende aanpak. Werkt met elke database.

Stap 1: Exporteren naar CSV

Gebruik een browserextensie zoals HTML Table Exporter of kopieer-plak in een spreadsheet en sla op als CSV.

Belangrijke overweging: Scheidingstekenkeuze. Komma's werken, tenzij je data komma's bevat. Puntkomma's of tabs zijn veiliger voor rommelige data.

Stap 2: Laden in Database

SQLite:

sqlite3 mydb.db
.mode csv
.import data.csv tabelnaam

Of met headers:

sqlite3 mydb.db <<EOF
.mode csv
.headers on
.import data.csv tabelnaam
EOF

PostgreSQL:

COPY tabelnaam FROM '/pad/naar/data.csv' 
WITH (FORMAT csv, HEADER true);

Of met psql:

\copy tabelnaam FROM 'data.csv' WITH (FORMAT csv, HEADER true);

MySQL:

LOAD DATA INFILE '/pad/naar/data.csv'
INTO TABLE tabelnaam
FIELDS TERMINATED BY ','
ENCLOSED BY '"'
LINES TERMINATED BY '\n'
IGNORE 1 ROWS;

Voor- en Nadelen

✅ Universele compatibiliteit

✅ Eenvoudig tussenbestand te inspecteren

✅ Handmatig problemen fixen vóór laden

❌ Extra stap

❌ Type-inferentie is basaal

Pad 2: Direct naar SQL-statements

Exporteer de tabel direct als INSERT-statements.

Exporteren als SQL

Sommige exporttools genereren direct SQL. De output ziet er zo uit:

INSERT INTO tabelnaam (kol1, kol2, kol3) VALUES
('waarde1', 'waarde2', 123),
('waarde4', 'waarde5', 456);

Laden

Voer simpelweg het SQL-bestand uit:

# SQLite
sqlite3 mydb.db < data.sql

# PostgreSQL
psql -d mydb -f data.sql

# MySQL
mysql mydb < data.sql

Voor- en Nadelen

✅ Eén stap van export naar database

✅ SQL is overdraagbaar tussen databases (grotendeels)

❌ Grote datasets = enorme SQL-bestanden

❌ Tabelschema moet eerst gedefinieerd worden

Pad 3: Python + Pandas Pipeline

Maximale flexibiliteit. Het beste voor herhaalde imports of complexe opschoning.

Volledige Workflow

import pandas as pd
from sqlalchemy import create_engine

# Stap 1: Laad CSV (geëxporteerd vanuit browser)
df = pd.read_csv('data.csv')

# Stap 2: Opschonen
df.columns = df.columns.str.lower().str.replace(' ', '_')  # Normaliseer kolomnamen
df['date'] = pd.to_datetime(df['date'])  # Parseer datums
df['amount'] = df['amount'].str.replace('[$,]', '', regex=True).astype(float)  # Schoon valuta op

# Stap 3: Laden naar database
engine = create_engine('sqlite:///mydb.db')
# Of: create_engine('postgresql://user:pass@localhost/mydb')
# Of: create_engine('mysql+pymysql://user:pass@localhost/mydb')

df.to_sql('tabelnaam', engine, if_exists='replace', index=False)

Type-mapping

Pandas leidt typen af, maar je kunt expliciet zijn:

df.to_sql('tabelnaam', engine, 
          if_exists='replace', 
          index=False,
          dtype={
              'id': Integer(),
              'name': String(100),
              'created_at': DateTime(),
              'amount': Float()
          })

Voor- en Nadelen

✅ Volledige controle over opschoning en typen

✅ Verwerkt complexe transformaties

✅ Herhaalbaar en scriptbaar

❌ Vereist Python-omgeving

❌ Overkill voor eenmalige imports

Pad 4: DuckDB (De Moderne Snelkoppeling)

DuckDB leest CSV direct en verwerkt de meeste opschoning automatisch.

Directe Query

-- Query CSV zonder importeren
SELECT * FROM 'data.csv';

-- Met type-inferentie
SELECT * FROM read_csv_auto('data.csv');

-- Maak tabel van CSV
CREATE TABLE mytable AS SELECT * FROM 'data.csv';

Van Browser naar Query in Seconden

# Exporteer tabel als CSV vanuit browser
# Query dan direct:
duckdb -c "SELECT kolom1, SUM(kolom2) FROM 'data.csv' GROUP BY kolom1;"

Geen schemadefinitie. Geen importstap. Gewoon queryen.

Voor- en Nadelen

✅ Snelste voor ad-hoc analyse

✅ Uitstekende type-inferentie

✅ SQL-interface

❌ Geen traditionele database (voor persistentie, exporteer resultaten)

Veelvoorkomende Problemen Afhandelen

Kolomnamen met Spaties

Webtabellen hebben vaak headers als "Totale Omzet" of "Year to Date".

Fixen bij export: Sommige tools normaliseren headers automatisch.

Fixen bij import:

df.columns = df.columns.str.replace(' ', '_').str.lower()

Of in SQL na import:

ALTER TABLE mytable RENAME COLUMN "Totale Omzet" TO totale_omzet;

Gemengde Getalnotaties

Europees (1.234,56) vs Amerikaans (1,234.56) formaat breekt imports.

Fixen vóór import: Gebruik een tool met schoonmaakpresets, of:

# Europees naar standaard
df['value'] = df['value'].str.replace('.', '').str.replace(',', '.').astype(float)

Null-representaties

Webtabellen tonen blanko's, "N/A", "—", "-" voor ontbrekende data.

df = df.replace(['N/A', '—', '-', ''], pd.NA)

Of in DuckDB:

SELECT NULLIF(kolom, 'N/A') AS kolom FROM 'data.csv';

Datums in Diverse Formaten

df['date'] = pd.to_datetime(df['date'], format='mixed', dayfirst=True)

De format='mixed' verwerkt inconsistente datumformaten in dezelfde kolom.

Het Juiste Pad Kiezen

Scenario	Aanbevolen Pad
Eenmalige import, kleine tabel	CSV + directe database-import
Eenmalige import, opschoning nodig	Python + Pandas
Snelle analyse, geen persistentie nodig	DuckDB
Regelmatige imports van dezelfde bron	Python-script (automatiseer)
SQL-formaat nodig voor delen/versiebeheer	Directe SQL-export

Voorbeeld: Volledige Workflow

Stel dat je een tabel met productdata op een website hebt.

Stap 1: Exporteer met HTML Table Exporter → CSV met opgeschoonde getallen

Stap 2: Snelle validatie in DuckDB:

SELECT COUNT(*), COUNT(DISTINCT product_id) FROM 'products.csv';
-- Controleer op duplicaten

Stap 3: Laden in PostgreSQL:

import pandas as pd
from sqlalchemy import create_engine

df = pd.read_csv('products.csv')
engine = create_engine('postgresql://user:pass@localhost/inventory')
df.to_sql('products', engine, if_exists='replace', index=False)

Totale tijd: 2 minuten.

De Meta-les

Het kortste pad is niet altijd het meest directe.

30 seconden besteden aan opschoning bij export bespaart 10 minuten debuggen van importfouten. Het juiste tussenformaat gebruiken (CSV vs SQL vs JSON) hangt af van je doeldatabase en datacomplexiteit.

Voor de meeste webtabel → database workflows:

Exporteer naar CSV met getal-/datumopschoning
Laad met de native CSV-import van je database
Breng Python pas in als je complexe transformaties nodig hebt

Eenvoudige pipelines zijn onderhoudbare pipelines.

Bekijk voor Python-workflows specifiek onze gedetailleerde gids over het exporteren van alle rijen uit een gepagineerde webtabel.

Wil je schone exports die database-ready zijn? Meer info op gauchogrid.com/nl/html-table-exporter of probeer HTML Table Exporter gratis in de Chrome Web Store.

Du Navigateur à la Base de Données : Le Chemin le Plus Court pour les Tableaux Web

circobit — Mon, 20 Jul 2026 08:00:00 +0000

Vous avez trouvé des données sur un site web. Vous en avez besoin dans votre base de données.

Quel est le chemin le plus rapide du point A au point B ?

Ce guide couvre les workflows pratiques pour importer des tableaux HTML dans SQLite, PostgreSQL, MySQL et d'autres bases de données — avec un minimum de friction.

Le Workflow Général

Chaque pipeline navigateur-vers-base-de-données suit les mêmes étapes :

Extraire — Sortir le tableau de la page web
Nettoyer — Corriger le formatage, les types et la structure
Charger — Insérer dans la base de données

La question est où effectuer chaque étape et avec quels outils.

Chemin 1 : Le CSV Comme Intermédiaire

L'approche la plus courante. Fonctionne avec n'importe quelle base de données.

Étape 1 : Exporter en CSV

Utilisez une extension de navigateur comme HTML Table Exporter ou copiez-collez dans un tableur et enregistrez en CSV.

Point clé : Le choix du délimiteur. Les virgules fonctionnent sauf si vos données contiennent des virgules. Les points-virgules ou les tabulations sont plus sûrs pour les données complexes.

Étape 2 : Charger dans la Base de Données

SQLite :

sqlite3 mydb.db
.mode csv
.import data.csv tablename

Ou avec les en-têtes :

sqlite3 mydb.db <<EOF
.mode csv
.headers on
.import data.csv tablename
EOF

PostgreSQL :

COPY tablename FROM '/path/to/data.csv' 
WITH (FORMAT csv, HEADER true);

Ou avec psql :

\copy tablename FROM 'data.csv' WITH (FORMAT csv, HEADER true);

MySQL :

LOAD DATA INFILE '/path/to/data.csv'
INTO TABLE tablename
FIELDS TERMINATED BY ','
ENCLOSED BY '"'
LINES TERMINATED BY '\n'
IGNORE 1 ROWS;

Avantages et Inconvénients

✅ Compatibilité universelle

✅ Fichier intermédiaire facile à inspecter

✅ Possibilité de corriger manuellement avant le chargement

❌ Étape supplémentaire

❌ Inférence de types basique

Chemin 2 : Directement en Requêtes SQL

Exporter le tableau directement sous forme de requêtes INSERT.

Exporter en SQL

Certains outils d'export génèrent du SQL directement. Le résultat ressemble à :

INSERT INTO table_name (col1, col2, col3) VALUES
('valeur1', 'valeur2', 123),
('valeur4', 'valeur5', 456);

Charger

Il suffit d'exécuter le fichier SQL :

# SQLite
sqlite3 mydb.db < data.sql

# PostgreSQL
psql -d mydb -f data.sql

# MySQL
mysql mydb < data.sql

Avantages et Inconvénients

✅ Une seule étape de l'export à la base de données

✅ Le SQL est portable entre les bases (en grande partie)

❌ Grands jeux de données = fichiers SQL volumineux

❌ Nécessite de définir le schéma de table au préalable

Chemin 3 : Pipeline Python + Pandas

Flexibilité maximale. Idéal pour les imports répétés ou le nettoyage complexe.

Workflow Complet

import pandas as pd
from sqlalchemy import create_engine

# Étape 1 : Charger le CSV (exporté depuis le navigateur)
df = pd.read_csv('data.csv')

# Étape 2 : Nettoyer
df.columns = df.columns.str.lower().str.replace(' ', '_')  # Normaliser les noms de colonnes
df['date'] = pd.to_datetime(df['date'])  # Parser les dates
df['amount'] = df['amount'].str.replace('[$,]', '', regex=True).astype(float)  # Nettoyer les devises

# Étape 3 : Charger dans la base de données
engine = create_engine('sqlite:///mydb.db')
# Ou : create_engine('postgresql://user:pass@localhost/mydb')
# Ou : create_engine('mysql+pymysql://user:pass@localhost/mydb')

df.to_sql('tablename', engine, if_exists='replace', index=False)

Correspondance des Types

Pandas infère les types, mais vous pouvez être explicite :

df.to_sql('tablename', engine, 
          if_exists='replace', 
          index=False,
          dtype={
              'id': Integer(),
              'name': String(100),
              'created_at': DateTime(),
              'amount': Float()
          })

Avantages et Inconvénients

✅ Contrôle total sur le nettoyage et les types

✅ Gère les transformations complexes

✅ Reproductible et scriptable

❌ Nécessite un environnement Python

❌ Excessif pour les imports ponctuels

Chemin 4 : DuckDB (Le Raccourci Moderne)

DuckDB lit les CSV directement et gère la plupart du nettoyage automatiquement.

Requête Directe

-- Requêter un CSV sans l'importer
SELECT * FROM 'data.csv';

-- Avec inférence de types
SELECT * FROM read_csv_auto('data.csv');

-- Créer une table à partir d'un CSV
CREATE TABLE mytable AS SELECT * FROM 'data.csv';

Du Navigateur à la Requête en Quelques Secondes

# Exporter le tableau en CSV depuis le navigateur
# Puis requêter immédiatement :
duckdb -c "SELECT column1, SUM(column2) FROM 'data.csv' GROUP BY column1;"

Pas de définition de schéma. Pas d'étape d'import. Juste une requête.

Avantages et Inconvénients

✅ Le plus rapide pour l'analyse ad-hoc

✅ Excellente inférence de types

✅ Interface SQL

❌ Pas une base de données traditionnelle (pour la persistance, exporter les résultats)

Gérer les Problèmes Courants

Noms de Colonnes avec Espaces

Les tableaux web ont souvent des en-têtes comme « Total Ventes » ou « Cumul Annuel ».

Corriger à l'export : Certains outils normalisent les en-têtes automatiquement.

Corriger à l'import :

df.columns = df.columns.str.replace(' ', '_').str.lower()

Ou en SQL après l'import :

ALTER TABLE mytable RENAME COLUMN "Total Sales" TO total_sales;

Formats de Nombres Mixtes

Les formats européen (1.234,56) vs américain (1,234.56) cassent les imports.

Corriger avant l'import : Utilisez un outil avec des préréglages de nettoyage, ou :

# Européen vers standard
df['value'] = df['value'].str.replace('.', '').str.replace(',', '.').astype(float)

Représentations de Valeurs Nulles

Les tableaux web affichent des blancs, « N/A », « — », « - » pour les données manquantes.

df = df.replace(['N/A', '—', '-', ''], pd.NA)

Ou dans DuckDB :

SELECT NULLIF(column, 'N/A') AS column FROM 'data.csv';

Dates dans Divers Formats

df['date'] = pd.to_datetime(df['date'], format='mixed', dayfirst=True)

Le paramètre format='mixed' gère les formats de dates incohérents dans la même colonne.

Choisir le Bon Chemin

Scénario	Chemin Recommandé
Import ponctuel, petit tableau	CSV + import direct dans la base
Import ponctuel, nécessite du nettoyage	Python + Pandas
Analyse rapide, pas de persistance nécessaire	DuckDB
Imports réguliers depuis la même source	Script Python (automatiser)
Besoin du format SQL pour partage/versioning	Export SQL direct

Exemple : Workflow Complet

Imaginons que vous avez un tableau de données produits sur un site web.

Étape 1 : Exporter avec HTML Table Exporter → CSV avec nombres nettoyés

Étape 2 : Validation rapide dans DuckDB :

SELECT COUNT(*), COUNT(DISTINCT product_id) FROM 'products.csv';
-- Vérifier les doublons

Étape 3 : Charger dans PostgreSQL :

import pandas as pd
from sqlalchemy import create_engine

df = pd.read_csv('products.csv')
engine = create_engine('postgresql://user:pass@localhost/inventory')
df.to_sql('products', engine, if_exists='replace', index=False)

Temps total : 2 minutes.

La Leçon à Retenir

Le chemin le plus court n'est pas toujours le plus direct.

Passer 30 secondes à nettoyer lors de l'export économise 10 minutes de débogage d'erreurs d'import. Utiliser le bon format intermédiaire (CSV vs SQL vs JSON) dépend de votre base de données cible et de la complexité des données.

Pour la plupart des workflows tableau web → base de données :

Exporter en CSV avec nettoyage des nombres/dates
Charger avec l'import CSV natif de votre base de données
N'utiliser Python que si vous avez besoin de transformations complexes

Les pipelines simples sont des pipelines maintenables.

Pour les workflows Python spécifiquement, consultez notre guide sur les meilleures extensions Chrome pour exporter des tableaux.

Besoin d'exports propres et prêts pour la base de données ? En savoir plus sur gauchogrid.com/fr/html-table-exporter ou essayez HTML Table Exporter gratuitement sur le Chrome Web Store.

Tabelas HTML com Dados Ocultos: Extraindo o Que Você Não Vê

circobit — Thu, 16 Jul 2026 12:00:00 +0000

A tabela mostra 10 colunas. Você exporta. O CSV tem 10 colunas.

Mas a página tem 15 colunas de dados. Para onde foram as outras 5?

Tabelas HTML frequentemente contêm mais dados do que o que está visível. Colunas ocultas, atributos data, linhas colapsadas — tudo invisível para métodos básicos de extração.

Veja como encontrar e extrair os dados que você não vê.

Tipos de Dados Ocultos

1. Colunas Ocultas por CSS

O caso mais simples: as colunas existem no DOM, mas estão ocultas com CSS.

<th style="display: none;">ID Interno</th>
<td style="display: none;">12345</td>

Ou via classes:

.hidden-column { display: none; }

Por que os sites fazem isso: Responsividade mobile (ocultar colunas em telas pequenas), dados internos para JavaScript, exibição progressiva.

Como detectar: Abra o DevTools, inspecione a tabela, procure por células com display: none ou visibility: hidden.

2. Atributos Data

O HTML5 permite atributos personalizados data-* em qualquer elemento. Tabelas usam esses atributos para armazenar metadados que o JavaScript acessa, mas o usuário não vê.

<tr data-id="12345" data-category="eletronicos" data-stock="47">
  <td>Laptop</td>
  <td>R$ 4.999</td>
</tr>

A tabela visível mostra "Laptop" e "R$ 4.999". Mas a linha carrega três dados extras.

Atributos data comuns:

data-id — identificador interno
data-sort-value — valor numérico para ordenação (quando a exibição mostra "Jan 2024" mas a ordenação precisa de 202401)
data-raw — valor sem formatação (quando a exibição mostra "R$ 1,2M" mas o dado é 1200000)
data-href — URL do link

3. Atributos Title e Tooltip

O atributo title fornece texto ao passar o mouse que frequentemente contém informações adicionais.

<td title="Atualizado: 2024-01-15 14:32:00 UTC">15 Jan</td>

A célula exibe "15 Jan". O timestamp completo está no tooltip.

4. Linhas Colapsadas/Expansíveis

Tabelas com funcionalidade drill-down ocultam linhas de detalhe até serem clicadas.

<tr class="parent-row">
  <td>Categoria A</td>
  <td>R$ 250.000</td>
</tr>
<tr class="child-row" style="display: none;">
  <td>— Subcategoria A1</td>
  <td>R$ 150.000</td>
</tr>
<tr class="child-row" style="display: none;">
  <td>— Subcategoria A2</td>
  <td>R$ 100.000</td>
</tr>

Os dados existem. Apenas não estão expandidos.

5. Conteúdo com Lazy Load

Algumas tabelas mostram um subconjunto e carregam mais via JavaScript quando você rola ou clica em "Carregar Mais".

<table id="results">
  <!-- Primeiras 20 linhas renderizadas -->
</table>
<button onclick="loadMore()">Mostrar Mais Resultados</button>

Os dados restantes não estão no DOM até você acionar o carregamento.

Extraindo Dados Ocultos

Extraindo Colunas Ocultas por CSS

Com JavaScript (no console do navegador):

// Remove display:none de todas as células
document.querySelectorAll('td, th').forEach(el => {
  el.style.display = '';
});

Agora exporte normalmente — as colunas estão visíveis.

Com Python + BeautifulSoup:

O BeautifulSoup ignora CSS. Ele extrai todos os elementos independentemente da visibilidade.

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)  # Inclui colunas ocultas

Extraindo Atributos Data

Abordagem com JavaScript:

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

rows.forEach(row => {
  const rowData = {
    // Texto visível
    cells: Array.from(row.querySelectorAll('td')).map(td => td.textContent),
    // Atributos data
    id: row.dataset.id,
    category: row.dataset.category,
    stock: row.dataset.stock
  };
  data.push(rowData);
});

console.log(JSON.stringify(data, null, 2));

Abordagem com Python:

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

    # Obter texto das células
    cells = [td.get_text(strip=True) for td in row.find_all('td')]

    print(f"Data: {attrs}, Células: {cells}")

Extraindo Atributos Title

const cells = document.querySelectorAll('table td');
cells.forEach(cell => {
  if (cell.title) {
    console.log(`Exibido: ${cell.textContent}, Completo: ${cell.title}`);
  }
});

Expandindo Linhas Colapsadas

Opção 1: Clicar em todos os botões de expansão

// Encontrar e clicar em todos os botões de expansão
document.querySelectorAll('.expand-btn, .toggle-row').forEach(btn => {
  btn.click();
});

// Aguardar atualização do DOM, depois exportar
setTimeout(() => {
  // Lógica de exportação aqui
}, 1000);

Opção 2: Remover classe hidden

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

Acionando Lazy Load

Isso é mais complicado — você precisa simular a ação que aciona o carregamento.

// Rolar até o final para acionar scroll infinito
window.scrollTo(0, document.body.scrollHeight);

// Ou clicar em "Carregar Mais" repetidamente
const loadMore = document.querySelector('.load-more-btn');
while (loadMore && !loadMore.disabled) {
  loadMore.click();
  await new Promise(r => setTimeout(r, 500)); // Aguardar carregamento
}

Exemplo Real: Valores de Ordenação

Tabelas de estatísticas esportivas frequentemente exibem números formatados, mas ordenam por valores brutos.

<td data-sort="1234567">1,23M</td>
<td data-sort="20240115">15 Jan, 2024</td>
<td data-sort="0.347">34,7%</td>

Se você extrair apenas o texto visível, obtém strings formatadas que não ordenam nem calculam corretamente.

Extração com ambos os valores:

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

Quando Extensões de Navegador Ajudam

Boas ferramentas de exportação de tabelas lidam com parte disso automaticamente:

Colunas ocultas por CSS podem ser incluídas via opção
Atributos data podem ser extraídos como colunas adicionais
Normalização de números pode converter "R$ 1,23M" em 1230000

O HTML Table Exporter extrai conteúdo visível com tratamento adequado de células mescladas e formatação. Para necessidades de extração mais complexas sem código, veja nosso guia sobre as melhores extensões Chrome para scraping de tabelas HTML.

Para atributos data e conteúdo profundamente oculto, você pode precisar das abordagens com JavaScript acima.

O Fluxo de Inspeção

Antes de extrair qualquer tabela:

Abra o DevTools (F12)
Inspecione o elemento da tabela
Verifique se há:
- display: none em colunas
- Atributos data-* em linhas/células
- Atributos title com informações extras
- Linhas filhas ocultas
- Botões "Carregar mais"
Decida: Os dados visíveis são suficientes, ou você precisa dos dados ocultos?

Na maioria das vezes, os dados visíveis são suficientes. Mas quando não são, saber como encontrar e extrair dados ocultos faz toda a diferença.

Resumo

Tabelas HTML podem conter múltiplas camadas de dados:

Camada	Como Acessar
Texto visível	Exportação padrão
Colunas ocultas por CSS	Remover display:none ou usar BeautifulSoup
Atributos data	JavaScript dataset ou Python attrs
Title/tooltips	Extrair atributo title
Linhas colapsadas	Expandir ou remover classe hidden
Lazy-loaded	Acionar carregamento primeiro

Os dados geralmente estão lá. Você só precisa saber onde procurar.

Precisa exportar os dados que você já vê? Saiba mais em gauchogrid.com/pt-br/html-table-exporter ou experimente o HTML Table Exporter gratuitamente na Chrome Web Store.

Por Qué Tu Tabla Exportada Tiene Caracteres Raros (Y Cómo Solucionarlo)

circobit — Wed, 15 Jul 2026 13:30:00 +0000

Exportas una tabla. Abres el CSV. En lugar de "José" ves "José". En lugar de "€" ves "â‚¬". En lugar de un guión largo ves "â€"".

Bienvenido al infierno del encoding.

Esta guía explica por qué pasa y cómo solucionarlo—ya sea que estés exportando manualmente o construyendo herramientas de extracción.

Qué Está Pasando Realmente

La codificación de caracteres es cómo las computadoras representan texto como bytes. Diferentes codificaciones usan diferentes patrones de bytes para el mismo carácter.

El culpable más común: UTF-8 interpretado como Latin-1 (o viceversa).

UTF-8 usa múltiples bytes para caracteres no ASCII. Cuando un software lee esos bytes como Latin-1 (codificación de un solo byte), cada byte se convierte en un carácter incorrecto separado.

Carácter	Bytes UTF-8	Mal leído como Latin-1
é	C3 A9	Ã©
€	E2 82 AC	â‚¬
—	E2 80 94	â€"
ñ	C3 B1	Ã±

El patrón es consistente: secuencias multi-byte se convierten en múltiples caracteres incorrectos.

Dónde Se Rompe el Encoding

1. La Página Fuente

El sitio web puede declarar una codificación pero servir otra. O no declarar nada, dejando que los navegadores adivinen.

<!-- Declara UTF-8 -->
<meta charset="UTF-8">

<!-- Pero el servidor envía -->
Content-Type: text/html; charset=ISO-8859-1

Cuando las declaraciones entran en conflicto, los navegadores generalmente lo resuelven. Las herramientas de exportación tal vez no.

2. El Proceso de Exportación

Si tu herramienta de extracción no preserva el encoding, los bytes se reinterpretan.

El textContent de JavaScript devuelve cadenas Unicode, lo cual es seguro. Pero convertir a un archivo requiere elegir una codificación. Si esa elección es incorrecta, ocurre la corrupción.

3. La Aplicación que Abre el Archivo

Exportas un CSV UTF-8 válido. Excel lo abre como Latin-1 porque adivina mal. Misma corrupción, causa diferente.

Por eso el mismo archivo se ve bien en una aplicación y roto en otra.

Cómo Diagnosticar el Problema

Reconocimiento de Patrones

Ciertas corrupciones son diagnósticas:

Ves esto	Lo original era
Ã¡, Ã©, Ã, Ã³, Ãº	á, é, í, ó, ú (acentos del español)
Ã¤, Ã¶, Ã¼	ä, ö, ü (diéresis del alemán)
Ã§	ç (cedilla)
â‚¬	€ (signo del Euro)
â€"	— (guión largo)
â€™	' (apóstrofe curvo)

Si ves Ã seguido de otro carácter, UTF-8 fue leído como Latin-1.

Verificar los Bytes Crudos

En Python:

with open('archivo.csv', 'rb') as f:
    print(f.read(100))

Si ves \xc3\xa9 donde esperas "é", el archivo es UTF-8. Si ves \xe9, es Latin-1.

Verificar lo que Declara la Página

En las herramientas de desarrollo del navegador:

document.characterSet  // Devuelve la codificación real usada

Arreglando Archivos Corruptos

El Truco de Re-codificar

Si UTF-8 fue mal leído como Latin-1, puedes revertirlo:

# Leer como Latin-1 (como fue interpretado incorrectamente)
with open('corrupto.csv', 'r', encoding='latin-1') as f:
    text = f.read()

# Codificar de vuelta a bytes Latin-1, luego decodificar como UTF-8
fixed = text.encode('latin-1').decode('utf-8')

with open('arreglado.csv', 'w', encoding='utf-8') as f:
    f.write(fixed)

Esto solo funciona si la corrupción fue una simple mala interpretación. Doble corrupción o codificaciones mixtas son más difíciles.

Forzar a Excel a Leer UTF-8

Excel frecuentemente ignora UTF-8. Dos soluciones:

Opción 1: Agregar BOM

Un Byte Order Mark al inicio del archivo señala UTF-8:

with open('archivo.csv', 'w', encoding='utf-8-sig') as f:
    f.write(data)

Opción 2: Asistente de Importación

En lugar de hacer doble clic en el CSV, usa Datos → Obtener datos → De texto/CSV y especifica la codificación UTF-8 manualmente.

Google Sheets como Intermediario

Google Sheets maneja el encoding mejor que Excel. Importá el CSV ahí, luego exportá a XLSX. El archivo de Excel preservará los caracteres correctamente.

Previniendo Problemas de Encoding

Si Estás Exportando Manualmente

Usa herramientas que manejen el encoding correctamente. HTML Table Exporter preserva Unicode a lo largo de todo el proceso de exportación, evitando los errores de conversión que causan mojibake.

Para exportaciones CSV, si tu herramienta ofrece opciones de encoding, elige UTF-8 con BOM para compatibilidad con Excel.

Si Estás Construyendo Herramientas de Extracción

Siempre ser explícito con el encoding:

# Escribiendo CSV
with open('salida.csv', 'w', encoding='utf-8', newline='') as f:
    writer = csv.writer(f)
    writer.writerows(data)

# Leyendo HTML
response = requests.get(url)
response.encoding = response.apparent_encoding  # Auto-detectar
html = response.text

Para JavaScript/extensiones de navegador:

// Blob con encoding explícito
const blob = new Blob(['\ufeff' + csvContent], { 
  type: 'text/csv;charset=utf-8;' 
});

El \ufeff es el BOM que ayuda a Excel.

Si Estás Usando Pandas

# Lectura
df = pd.read_csv('archivo.csv', encoding='utf-8')

# Escritura con BOM para Excel
df.to_csv('salida.csv', encoding='utf-8-sig', index=False)

Caracteres Especiales que Causan Problemas

Comillas Tipográficas y Apóstrofes

Los procesadores de texto convierten comillas rectas en curvas:

' → ' (U+2019)
" → " " (U+201C, U+201D)

Estos son multi-byte en UTF-8 y se rompen en Latin-1.

Guiones Largos y Cortos

— (guión largo, U+2014)
– (guión corto, U+2013)

Comunes en datos financieros y publicaciones.

Espacios de No Separación

El espacio regular es 0x20. El espacio de no separación es 0xA0 (Latin-1) o 0xC2 0xA0 (UTF-8).

Son invisibles pero rompen comparaciones de cadenas y parsing.

# Normalizar espacios
text = text.replace('\xa0', ' ')

Símbolos de Moneda

€, £, ¥ están todos fuera de ASCII y se codifican diferente en UTF-8 vs Latin-1.

Referencia Rápida

Problema	Causa Probable	Solución
Ã seguido de carácter	UTF-8 leído como Latin-1	Re-codificar o especificar UTF-8 al importar
? o □ reemplazando caracteres	La codificación no soporta el carácter	Usar UTF-8 en todo el flujo
Excel muestra basura	Excel adivinó mal la codificación	Usar UTF-8 BOM o asistente de importación
Caracteres invisibles rompiendo datos	Espacios de no separación o caracteres de ancho cero	Normalizar espacios en blanco

La Regla Fundamental

Hacer coincidir el encoding en cada paso. Exportar como UTF-8. Abrir como UTF-8. Guardar como UTF-8.

En el momento en que un paso usa una codificación diferente, los caracteres se corrompen.

Ante la duda, UTF-8 con BOM es la opción más segura para archivos que van a tocar Excel.

¿Quieres exportaciones que manejen el encoding correctamente? Más información en gauchogrid.com/es/html-table-exporter o prueba HTML Table Exporter gratis en la Chrome Web Store.

Para más información sobre cómo exportar tablas web limpiamente, mira nuestra guía sobre cómo exportar todas las filas de una tabla web paginada.

HTMLテーブルの隠しデータ：見えないデータをスクレイピングする方法

circobit — Wed, 15 Jul 2026 00:00:00 +0000

テーブルには10列が表示されている。エクスポートすると、CSVも10列。

でもそのページには実は15列分のデータがある。残りの5列はどこへ？

HTMLテーブルには、表示されている以上のデータが含まれていることがよくあります。非表示の列、data属性、折りたたまれた行——基本的な抽出方法では見えないデータです。

ここでは、見えないデータを見つけて抽出する方法を解説します。

隠しデータの種類

1. CSSで非表示にされた列

最もシンプルなケース：列はDOMに存在しているが、CSSで非表示にされている。

<th style="display: none;">内部ID</th>
<td style="display: none;">12345</td>

またはクラスで指定される場合：

.hidden-column { display: none; }

サイト側がこうする理由： モバイルレスポンシブ対応（小さい画面では列を非表示にする）、JavaScript用の内部データ、段階的な情報開示。

検出方法： DevToolsを開き、テーブルを検査して、display: none または visibility: hidden が設定されたセルを探す。

2. Data属性

HTML5ではどの要素にもカスタム data-* 属性を追加できます。テーブルではこれを使って、JavaScriptがアクセスするがユーザーには見えないメタデータを格納します。

<tr data-id="12345" data-category="electronics" data-stock="47">
  <td>ノートPC</td>
  <td>¥99,900</td>
</tr>

表示されるテーブルには「ノートPC」と「¥99,900」だけ。しかし行には3つの追加データポイントがあります。

よく使われるdata属性：

data-id — 内部識別子
data-sort-value — ソート用の数値（表示が「2024年1月」でもソートには202401が必要な場合）
data-raw — フォーマットされていない値（表示が「120万円」でもデータは1200000の場合）
data-href — リンクURL

3. TitleとTooltip属性

title 属性はホバーテキストを提供し、追加情報が含まれていることがよくあります。

<td title="更新日時: 2024-01-15 14:32:00 UTC">1月15日</td>

セルには「1月15日」と表示される。完全なタイムスタンプはツールチップの中にあります。

4. 折りたたみ可能な行

ドリルダウン機能を持つテーブルは、クリックされるまで詳細行を非表示にします。

<tr class="parent-row">
  <td>カテゴリA</td>
  <td>¥5,000,000</td>
</tr>
<tr class="child-row" style="display: none;">
  <td>— サブカテゴリA1</td>
  <td>¥3,000,000</td>
</tr>
<tr class="child-row" style="display: none;">
  <td>— サブカテゴリA2</td>
  <td>¥2,000,000</td>
</tr>

データは存在している。ただ展開されていないだけです。

5. 遅延読み込みコンテンツ

一部のテーブルはサブセットだけを表示し、スクロールや「もっと読み込む」をクリックするとJavaScriptで追加データを読み込みます。

<table id="results">
  <!-- 最初の20行がレンダリング -->
</table>
<button onclick="loadMore()">さらに結果を表示</button>

残りのデータは、読み込みがトリガーされるまでDOMに存在しません。

隠しデータの抽出方法

CSSで非表示にされた列の抽出

JavaScript（ブラウザコンソール）で：

// すべてのセルからdisplay:noneを削除
document.querySelectorAll('td, th').forEach(el => {
  el.style.display = '';
});

これで通常通りエクスポートすれば、列が表示されます。

Python + BeautifulSoupで：

BeautifulSoupはCSSを無視します。表示状態に関係なくすべての要素を抽出します。

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)  # 非表示列も含まれる

Data属性の抽出

JavaScriptアプローチ：

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

rows.forEach(row => {
  const rowData = {
    // 表示テキスト
    cells: Array.from(row.querySelectorAll('td')).map(td => td.textContent),
    // Data属性
    id: row.dataset.id,
    category: row.dataset.category,
    stock: row.dataset.stock
  };
  data.push(rowData);
});

console.log(JSON.stringify(data, null, 2));

Pythonアプローチ：

for row in table.find_all('tr'):
    # data属性を取得
    attrs = {k: v for k, v in row.attrs.items() if k.startswith('data-')}

    # セルテキストを取得
    cells = [td.get_text(strip=True) for td in row.find_all('td')]

    print(f"Data: {attrs}, Cells: {cells}")

Title属性の抽出

const cells = document.querySelectorAll('table td');
cells.forEach(cell => {
  if (cell.title) {
    console.log(`表示: ${cell.textContent}, 全体: ${cell.title}`);
  }
});

折りたたまれた行の展開

方法1：すべての展開ボタンをクリック

// すべての展開ボタンを見つけてクリック
document.querySelectorAll('.expand-btn, .toggle-row').forEach(btn => {
  btn.click();
});

// DOMの更新を待ってからエクスポート
setTimeout(() => {
  // エクスポート処理
}, 1000);

方法2：非表示クラスを削除

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

遅延読み込みのトリガー

これはやや複雑で、読み込みをトリガーするアクションをシミュレートする必要があります。

// 無限スクロールをトリガーするためにページ下部にスクロール
window.scrollTo(0, document.body.scrollHeight);

// または「もっと読み込む」を繰り返しクリック
const loadMore = document.querySelector('.load-more-btn');
while (loadMore && !loadMore.disabled) {
  loadMore.click();
  await new Promise(r => setTimeout(r, 500)); // 読み込みを待つ
}

実例：ソート値

スポーツ統計テーブルは、フォーマットされた数値を表示しつつ、生の値でソートすることがよくあります。

<td data-sort="1234567">123.4万</td>
<td data-sort="20240115">2024年1月15日</td>
<td data-sort="0.347">34.7%</td>

表示テキストだけを抽出すると、正しくソートも計算もできないフォーマット済みの文字列になってしまいます。

両方の値を抽出：

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

ブラウザ拡張機能が役立つ場面

優れたテーブルエクスポートツールは、これらの一部を自動的に処理します：

CSSで非表示にされた列をオプションで含めることが可能
Data属性を追加列として抽出可能
数値の正規化で「120万円」を1200000に変換可能

HTML Table Exporterは、結合セルやフォーマットを適切に処理しつつ、表示コンテンツを抽出します。コードなしでのより複雑な抽出については、コードなしでWebサイトのテーブルをスクレイピングする方法のガイドをご覧ください。

Data属性や深く隠されたコンテンツについては、上記のJavaScriptアプローチが必要になる場合があります。

検査ワークフロー

テーブルを抽出する前に：

DevToolsを開く（F12）
テーブル要素を検査
以下を確認：
- 列の display: none
- 行/セルの data-* 属性
- 追加情報を含む title 属性
- 非表示の子行
- 「もっと読み込む」ボタン
判断： 表示データで十分か、それとも隠しデータが必要か？

ほとんどの場合、表示データで十分です。しかし足りない場合に、隠しデータの見つけ方と抽出方法を知っていることが決定的な差になります。

まとめ

HTMLテーブルには複数のデータレイヤーが含まれることがあります：

レイヤー	アクセス方法
表示テキスト	通常のエクスポート
CSS非表示列	display:noneを削除またはBeautifulSoupを使用
Data属性	JavaScript datasetまたはPython attrs
Title/ツールチップ	title属性を抽出
折りたたまれた行	展開または非表示クラスを削除
遅延読み込み	先に読み込みをトリガー

データは通常そこにあります。どこを見ればいいかを知るだけです。

表示されているデータをエクスポートしたい方は、gauchogrid.com/ja/html-table-exporterで詳細を確認するか、Chrome ウェブストアでHTML Table Exporterを無料でお試しください。

Von der HTML-Tabelle zu SQL-INSERT-Statements mit einem Klick

circobit — Tue, 14 Jul 2026 07:30:00 +0000

Sie haben Daten auf einer Website gefunden. Sie brauchen sie in Ihrer Datenbank. Der übliche Workflow: Export nach CSV, Import ins SQL-Tool, Typfehler beheben, Encoding-Probleme lösen.

Was wäre, wenn man direkt von der HTML-Tabelle zu validem SQL kommen könnte?

Diese Anleitung zeigt, wie man CREATE TABLE- und INSERT INTO-Statements aus jeder Webtabelle generiert — mit Typinferenz, Identifier-Bereinigung und korrektem Escaping. Diesen Ansatz verwende ich im HTML Table Exporter.

Das Endergebnis

Aus einer Tabelle wie dieser:

| Produktname     | Preis  | Auf Lager |
|-----------------|--------|-----------|
| Widget Pro      | 29,99  | Ja        |
| Gadget Basic    | 14,50  | Nein      |

Wird generiert:

-- Exportiert mit HTML Table Exporter PRO

CREATE TABLE produkte (
  produktname TEXT,
  preis REAL,
  auf_lager TEXT
);

INSERT INTO produkte (produktname, preis, auf_lager) VALUES
  ('Widget Pro', 29.99, 'Ja'),
  ('Gadget Basic', 14.50, 'Nein');

Bauen wir das Schritt für Schritt auf.

Schritt 1: Die Tabellenmatrix extrahieren

Zunächst die Rohdaten aus der HTML-Tabelle extrahieren:

function extractTableMatrix(table) {
  const rows = Array.from(table.rows);
  const grid = [];

  rows.forEach((rowEl, rowIndex) => {
    if (!grid[rowIndex]) grid[rowIndex] = [];
    let colIndex = 0;

    Array.from(rowEl.cells).forEach(cell => {
      while (grid[rowIndex][colIndex] !== undefined) colIndex++;

      const text = cell.textContent.trim();
      const rowSpan = parseInt(cell.rowSpan) || 1;
      const colSpan = parseInt(cell.colSpan) || 1;

      for (let r = 0; r < rowSpan; r++) {
        if (!grid[rowIndex + r]) grid[rowIndex + r] = [];
        for (let c = 0; c < colSpan; c++) {
          grid[rowIndex + r][colIndex + c] = text;
        }
      }
      colIndex += colSpan;
    });
  });

  return grid;
}

Ausgabe: Ein 2D-Array, wobei rows[0] die Header und rows[1+] die Daten sind.

Schritt 2: Spaltennamen bereinigen

SQL-Bezeichner haben strenge Regeln. Header wie „Produktname" oder „Preis (€)" müssen bereinigt werden:

function sanitizeSqlIdentifier(header, fallbackIndex) {
  let id = (header || "").toString().trim();

  if (!id) {
    return `col_${fallbackIndex + 1}`;
  }

  // Unicode normalisieren (Akzente entfernen)
  id = id.normalize("NFD").replace(/[\u0300-\u036f]/g, "");

  // In Kleinbuchstaben mit Unterstrich konvertieren
  id = id
    .toLowerCase()
    .replace(/[^a-z0-9]+/g, "_")
    .replace(/^_+|_+$/g, "");

  // Sicherstellen, dass es nicht mit einer Zahl beginnt
  if (/^\d/.test(id)) {
    id = `col_${id}`;
  }

  // Fallback wenn nach Bereinigung leer
  if (!id) {
    return `col_${fallbackIndex + 1}`;
  }

  return id;
}

// Beispiele:
// "Produktname"   → "produktname"
// "Preis (€)"     → "preis"
// "2024 Umsatz"   → "col_2024_umsatz"
// ""              → "col_1"

Schritt 3: Doppelte Spaltennamen behandeln

Tabellen haben manchmal doppelte Header. SQL erfordert eindeutige Spaltennamen:

function makeUniqueColumnNames(headers) {
  const used = new Set();

  return headers.map((header, idx) => {
    let name = sanitizeSqlIdentifier(header, idx);
    let candidate = name;
    let counter = 1;

    while (used.has(candidate)) {
      candidate = `${name}_${counter}`;
      counter++;
    }

    used.add(candidate);
    return candidate;
  });
}

// ["Name", "Name", "Wert"] → ["name", "name_1", "wert"]

Schritt 4: SQL-Typen inferieren

Daten analysieren, um passende SQL-Typen zu bestimmen:

function inferSqlColumnTypes(rows, headerRowIndex = 0) {
  const headerRow = rows[headerRowIndex] || [];
  const dataRows = rows.slice(headerRowIndex + 1);
  const types = new Array(headerRow.length).fill("TEXT");

  for (let col = 0; col < headerRow.length; col++) {
    // Bis zu 50 Werte pro Spalte samplen
    const values = [];
    for (let r = 0; r < Math.min(dataRows.length, 50); r++) {
      const cell = dataRows[r][col];
      const v = cell != null ? String(cell).trim() : "";
      if (v !== "") values.push(v);
    }

    if (values.length === 0) {
      types[col] = "TEXT";
      continue;
    }

    // Prüfen ob alle Werte einem Typ entsprechen
    let allInt = true;
    let allNumeric = true;

    for (const v of values) {
      if (!/^[-+]?\d+$/.test(v)) {
        allInt = false;
      }
      if (!/^[-+]?\d+([.,]\d+)?$/.test(v)) {
        allNumeric = false;
      }
    }

    if (allInt) {
      types[col] = "INTEGER";
    } else if (allNumeric) {
      types[col] = "REAL";
    } else {
      types[col] = "TEXT";
    }
  }

  return types;
}

Typpriorität: INTEGER > REAL > TEXT

Wenn 100% der nicht-leeren Werte Integer sind, wird INTEGER verwendet. Wenn alle numerisch sind (einschließlich Dezimalzahlen), wird REAL verwendet. Ansonsten TEXT.

Schritt 5: Werte korrekt escapen

SQL-Injection ist nicht nur ein Sicherheitsproblem — es beschädigt die Daten. Korrektes Escaping:

function sqlEscapeValue(raw, type) {
  // NULL-Behandlung
  if (raw == null) return "NULL";

  const v = String(raw).trim();
  if (v === "") return "NULL";

  // Numerische Typen
  if (type === "INTEGER" || type === "REAL") {
    // Dezimaltrennzeichen normalisieren
    const normalized = v.replace(",", ".");
    const num = Number(normalized);

    if (!Number.isNaN(num) && Number.isFinite(num)) {
      return normalized;
    }
    // Bei ungültiger Zahl zu TEXT zurückfallen
  }

  // TEXT: Einfache Anführungszeichen durch Verdopplung escapen
  const escaped = v.replace(/'/g, "''");
  return `'${escaped}'`;
}

// Beispiele:
// sqlEscapeValue("Hallo", "TEXT")           → "'Hallo'"
// sqlEscapeValue("Das ist's", "TEXT")       → "'Das ist''s'"
// sqlEscapeValue("29.99", "REAL")           → "29.99"
// sqlEscapeValue("", "TEXT")                → "NULL"
// sqlEscapeValue(null, "TEXT")              → "NULL"

Schritt 6: Das SQL generieren

Alles zusammenfügen:

function tableToSql(tableInfo) {
  const rows = tableInfo.rows || [];
  if (rows.length < 2) return "";

  const headerRowIndex = tableInfo.headerRowIndex || 0;
  const headerRow = rows[headerRowIndex];
  const dataRows = rows.slice(headerRowIndex + 1);

  if (!headerRow || headerRow.length === 0) return "";

  // Spaltennamen generieren
  const columnNames = makeUniqueColumnNames(headerRow);

  // Typen inferieren
  const types = inferSqlColumnTypes(rows, headerRowIndex);

  // Tabellennamen generieren
  const rawTableName = tableInfo.name || tableInfo.slug || "table";
  const tableName = sanitizeSqlIdentifier(rawTableName, 0) || "table_export";

  // CREATE TABLE Statement
  const createLines = columnNames.map((col, i) => 
    `  ${col} ${types[i] || "TEXT"}`
  );
  const createStmt = `CREATE TABLE ${tableName} (\n${createLines.join(",\n")}\n);`;

  // INSERT Statements
  const insertHeader = `INSERT INTO ${tableName} (${columnNames.join(", ")}) VALUES`;

  const valueLines = dataRows.map(row => {
    const values = columnNames.map((_, i) => {
      const cell = row[i];
      const type = types[i] || "TEXT";
      return sqlEscapeValue(cell, type);
    });
    return `  (${values.join(", ")})`;
  });

  // Kombinieren
  let sql = `-- Exportiert mit HTML Table Exporter\n\n${createStmt}\n\n`;

  if (valueLines.length > 0) {
    sql += `${insertHeader}\n${valueLines.join(",\n")};\n`;
  }

  return sql;
}

Vollständiges Beispiel

Eingabetabelle:

const tableInfo = {
  name: "Q1 Verkaufsdaten",
  rows: [
    ["Produkt", "Verkaufte Einheiten", "Umsatz (€)", "Profitabel"],
    ["Widget A", "1.234", "45.678,90", "Ja"],
    ["Widget B", "567", "12.345,67", "Nein"],
    ["Gadget X", "890", "23.456,78", "Ja"]
  ]
};

Ausgabe:

-- Exportiert mit HTML Table Exporter

CREATE TABLE q1_verkaufsdaten (
  produkt TEXT,
  verkaufte_einheiten INTEGER,
  umsatz REAL,
  profitabel TEXT
);

INSERT INTO q1_verkaufsdaten (produkt, verkaufte_einheiten, umsatz, profitabel) VALUES
  ('Widget A', 1234, 45678.90, 'Ja'),
  ('Widget B', 567, 12345.67, 'Nein'),
  ('Gadget X', 890, 23456.78, 'Ja');

Zu beachten:

Spaltennamen bereinigt (Umsatz (€) → umsatz)
Zahlen erkannt und ohne Anführungszeichen
Tausendertrennzeichen in Zahlen behandelt
Tabellenname aus Metadaten

Edge Cases behandeln

NULL-Werte

Viele Webtabellen stellen fehlende Daten unterschiedlich dar:

const NULL_PATTERNS = ["N/A", "n/a", "-", "--", "null", "none", "."];

function sqlEscapeValue(raw, type, nullPatterns = NULL_PATTERNS) {
  if (raw == null) return "NULL";

  const v = String(raw).trim();
  if (v === "" || nullPatterns.includes(v.toLowerCase())) {
    return "NULL";
  }

  // ... Rest der Funktion
}

Große Datensätze

Für Tabellen mit Tausenden von Zeilen die INSERTs batchweise verarbeiten:

function tableToSqlBatched(tableInfo, batchSize = 1000) {
  // ... gleiches Setup ...

  const batches = [];
  for (let i = 0; i < valueLines.length; i += batchSize) {
    const batch = valueLines.slice(i, i + batchSize);
    batches.push(`${insertHeader}\n${batch.join(",\n")};`);
  }

  return `${createStmt}\n\n${batches.join("\n\n")}`;
}

Datenbankspezifische Syntax

SQLite, PostgreSQL und MySQL haben leichte Syntaxunterschiede:

function tableToSql(tableInfo, dialect = "sqlite") {
  // ... gleiche Spalten-/Typlogik ...

  // Dialektspezifisches Typ-Mapping
  const typeMap = {
    sqlite: { INTEGER: "INTEGER", REAL: "REAL", TEXT: "TEXT" },
    postgresql: { INTEGER: "INTEGER", REAL: "NUMERIC", TEXT: "TEXT" },
    mysql: { INTEGER: "INT", REAL: "DECIMAL(10,2)", TEXT: "VARCHAR(255)" }
  };

  const dialectTypes = typeMap[dialect] || typeMap.sqlite;

  const createLines = columnNames.map((col, i) => 
    `  ${col} ${dialectTypes[types[i]] || dialectTypes.TEXT}`
  );

  // ... Rest der Funktion ...
}

Browser-Bookmarklet

Schnelle Lösung für gelegentlichen Gebrauch:

javascript:(function(){
  const table = document.querySelector("table");
  if (!table) { alert("Keine Tabelle gefunden"); return; }

  const rows = Array.from(table.rows).map(r => 
    Array.from(r.cells).map(c => c.textContent.trim())
  );

  const headers = rows[0].map((h, i) => 
    (h || `col_${i+1}`).toLowerCase().replace(/[^a-z0-9]+/g, "_")
  );

  const values = rows.slice(1).map(row => 
    "(" + row.map(v => `'${v.replace(/'/g, "''")}'`).join(", ") + ")"
  ).join(",\n");

  const sql = `INSERT INTO table_data (${headers.join(", ")}) VALUES\n${values};`;

  navigator.clipboard.writeText(sql);
  alert("SQL in die Zwischenablage kopiert!");
})();

Wann man das verwenden sollte

Gut geeignet für:

Schnelle Datenimporte in SQLite/PostgreSQL
Test-Datenbanken befüllen
Einmalige Datenmigrationen
SQL anhand von Beispielen lernen

Weniger geeignet für:

Großes ETL (dafür gibt es passende Tools)
Komplexe Schemas (Foreign Keys, Constraints)
Binärdaten

Für produktive Datenpipelines sind dedizierte ETL-Tools mit Validierung besser. Für „Ich brauche diese Tabelle jetzt in meiner Datenbank" ist direkte SQL-Generierung schnell.

Ohne Code ausprobieren

Wenn Sie das nicht selbst bauen möchten, generiert HTML Table Exporter PRO SQL mit einem Klick. Die kostenlose Version exportiert nach CSV/JSON/Excel; PRO fügt SQL, NDJSON und Datenbereinigung hinzu.

Einen Vergleich verschiedener Export-Ansätze finden Sie in unserem Leitfaden zu den besten Chrome-Erweiterungen zum Exportieren von Tabellen.

Erfahren Sie mehr auf gauchogrid.com/de/html-table-exporter oder probieren Sie es im Chrome Web Store aus.

In welche Datenbank importieren Sie Webdaten? Mich interessieren die Anwendungsfälle.

숨겨진 데이터가 있는 HTML 테이블: 보이지 않는 것을 스크래핑하는 방법

circobit — Tue, 14 Jul 2026 00:30:00 +0000

테이블에 10개의 열이 표시됩니다. 내보내기를 합니다. CSV에도 10개의 열이 있습니다.

그런데 페이지에는 15개의 열 데이터가 있습니다. 나머지 5개는 어디로 갔을까요?

HTML 테이블에는 보이는 것보다 더 많은 데이터가 포함되어 있는 경우가 많습니다. 숨겨진 열, data 속성, 축소된 행—모두 기본적인 추출 방법으로는 보이지 않습니다.

보이지 않는 데이터를 찾고 추출하는 방법을 알아보겠습니다.

숨겨진 데이터의 유형

1. CSS로 숨겨진 열

가장 단순한 경우입니다. 열이 DOM에 존재하지만 CSS로 숨겨져 있습니다.

<th style="display: none;">내부 ID</th>
<td style="display: none;">12345</td>

또는 클래스를 통해:

.hidden-column { display: none; }

사이트가 이렇게 하는 이유: 모바일 반응형(작은 화면에서 열 숨기기), JavaScript용 내부 데이터, 점진적 공개.

감지 방법: DevTools를 열고 테이블을 검사하여 display: none 또는 visibility: hidden이 있는 셀을 찾습니다.

2. Data 속성

HTML5는 모든 요소에 사용자 정의 data-* 속성을 허용합니다. 테이블은 이 속성을 사용하여 JavaScript가 접근하지만 사용자에게는 보이지 않는 메타데이터를 저장합니다.

<tr data-id="12345" data-category="electronics" data-stock="47">
  <td>노트북</td>
  <td>₩999,000</td>
</tr>

보이는 테이블에는 "노트북"과 "₩999,000"만 표시됩니다. 하지만 행에는 세 가지 추가 데이터 포인트가 있습니다.

일반적인 data 속성:

data-id — 내부 식별자
data-sort-value — 정렬용 숫자 값 (표시는 "2024년 1월"이지만 정렬에는 202401이 필요할 때)
data-raw — 서식 없는 값 (표시는 "₩12억"이지만 데이터는 1200000000)
data-href — 링크 URL

3. Title 및 툴팁 속성

title 속성은 마우스를 올렸을 때 추가 정보를 포함하는 호버 텍스트를 제공합니다.

<td title="업데이트: 2024-01-15 14:32:00 UTC">1월 15일</td>

셀에는 "1월 15일"이 표시됩니다. 전체 타임스탬프는 툴팁에 있습니다.

4. 축소/확장 가능한 행

드릴다운 기능이 있는 테이블은 클릭할 때까지 세부 행을 숨깁니다.

<tr class="parent-row">
  <td>카테고리 A</td>
  <td>₩50,000,000</td>
</tr>
<tr class="child-row" style="display: none;">
  <td>— 하위 카테고리 A1</td>
  <td>₩30,000,000</td>
</tr>
<tr class="child-row" style="display: none;">
  <td>— 하위 카테고리 A2</td>
  <td>₩20,000,000</td>
</tr>

데이터는 존재합니다. 단지 펼쳐지지 않았을 뿐입니다.

5. 지연 로드 콘텐츠

일부 테이블은 일부만 표시하고 스크롤하거나 "더 보기"를 클릭하면 JavaScript를 통해 더 많은 데이터를 로드합니다.

<table id="results">
  <!-- 처음 20행만 렌더링 -->
</table>
<button onclick="loadMore()">더 많은 결과 보기</button>

나머지 데이터는 로딩을 트리거할 때까지 DOM에 없습니다.

숨겨진 데이터 추출

CSS로 숨겨진 열 추출

JavaScript (브라우저 콘솔에서):

// 모든 셀에서 display:none 제거
document.querySelectorAll('td, th').forEach(el => {
  el.style.display = '';
});

이제 정상적으로 내보내면 열이 보입니다.

Python + BeautifulSoup:

BeautifulSoup은 CSS를 무시합니다. 가시성에 관계없이 모든 요소를 추출합니다.

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)  # 숨겨진 열 포함

Data 속성 추출

JavaScript 방식:

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

rows.forEach(row => {
  const rowData = {
    // 보이는 텍스트
    cells: Array.from(row.querySelectorAll('td')).map(td => td.textContent),
    // Data 속성
    id: row.dataset.id,
    category: row.dataset.category,
    stock: row.dataset.stock
  };
  data.push(rowData);
});

console.log(JSON.stringify(data, null, 2));

Python 방식:

for row in table.find_all('tr'):
    # data 속성 가져오기
    attrs = {k: v for k, v in row.attrs.items() if k.startswith('data-')}

    # 셀 텍스트 가져오기
    cells = [td.get_text(strip=True) for td in row.find_all('td')]

    print(f"Data: {attrs}, Cells: {cells}")

Title 속성 추출

const cells = document.querySelectorAll('table td');
cells.forEach(cell => {
  if (cell.title) {
    console.log(`표시: ${cell.textContent}, 전체: ${cell.title}`);
  }
});

축소된 행 확장

방법 1: 모든 확장 버튼 클릭

// 모든 확장 버튼 찾아서 클릭
document.querySelectorAll('.expand-btn, .toggle-row').forEach(btn => {
  btn.click();
});

// DOM 업데이트 대기 후 내보내기
setTimeout(() => {
  // 내보내기 로직
}, 1000);

방법 2: 숨김 클래스 제거

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

지연 로드 트리거

이것은 좀 더 까다롭습니다. 로딩을 트리거하는 동작을 시뮬레이션해야 합니다.

// 무한 스크롤 트리거를 위해 하단으로 스크롤
window.scrollTo(0, document.body.scrollHeight);

// 또는 "더 보기" 반복 클릭
const loadMore = document.querySelector('.load-more-btn');
while (loadMore && !loadMore.disabled) {
  loadMore.click();
  await new Promise(r => setTimeout(r, 500)); // 로드 대기
}

실제 사례: 정렬 값

스포츠 통계 테이블은 종종 서식이 지정된 숫자를 표시하지만 원시 값으로 정렬합니다.

<td data-sort="1234567">123.4만</td>
<td data-sort="20240115">2024년 1월 15일</td>
<td data-sort="0.347">34.7%</td>

보이는 텍스트만 추출하면 정렬이나 계산이 올바르게 되지 않는 서식 문자열을 얻게 됩니다.

두 값을 모두 추출:

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

브라우저 확장 프로그램이 도움이 되는 경우

좋은 테이블 내보내기 도구는 이 중 일부를 자동으로 처리합니다:

CSS로 숨겨진 열을 옵션으로 포함 가능
Data 속성을 추가 열로 추출 가능
숫자 정규화로 "₩12.3억"을 1230000000으로 파싱 가능

HTML Table Exporter는 병합된 셀과 서식을 적절히 처리하면서 보이는 콘텐츠를 추출합니다. 코드 없이 더 복잡한 추출이 필요한 경우, 코드 없이 웹사이트에서 테이블 스크래핑하기 가이드를 참조하세요.

Data 속성과 깊이 숨겨진 콘텐츠의 경우 위의 JavaScript 접근 방식이 필요할 수 있습니다.

검사 워크플로

테이블을 추출하기 전에:

DevTools 열기 (F12)
테이블 요소 검사
확인 사항:
- 열에 display: none이 있는지
- 행/셀에 data-* 속성이 있는지
- 추가 정보가 있는 title 속성이 있는지
- 숨겨진 자식 행이 있는지
- "더 보기" 버튼이 있는지
결정: 보이는 데이터로 충분한지, 숨겨진 데이터가 필요한지?

대부분의 경우 보이는 데이터로 충분합니다. 그러나 그렇지 않을 때, 숨겨진 데이터를 찾고 추출하는 방법을 아는 것이 차이를 만듭니다.

요약

HTML 테이블에는 여러 계층의 데이터가 포함될 수 있습니다:

계층	접근 방법
보이는 텍스트	표준 내보내기
CSS 숨김 열	display:none 제거 또는 BeautifulSoup 사용
Data 속성	JavaScript dataset 또는 Python attrs
Title/툴팁	title 속성 추출
축소된 행	확장 또는 숨김 클래스 제거
지연 로드	먼저 로딩 트리거

데이터는 보통 거기에 있습니다. 어디를 봐야 하는지만 알면 됩니다.

보이는 데이터를 내보내야 하나요? gauchogrid.com/ko/html-table-exporter에서 자세히 알아보거나 Chrome 웹 스토어에서 HTML Table Exporter를 무료로 사용해 보세요.

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

circobit — Mon, 13 Jul 2026 12:30:00 +0000

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>

Of via klassen:

.hidden-column { display: none; }

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>

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>

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>

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>

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 = '';
});

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

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));

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}")

Title-attributen Extraheren

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

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);

Optie 2: Verborgen klasse verwijderen

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

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
}

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>

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()
}));

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:

Open DevTools (F12)
Inspecteer het tabelelement
Controleer op:
- display: none op kolommen
- data-* attributen op rijen/cellen
- title attributen met extra informatie
- Verborgen childrijen
- "Meer laden"-knoppen
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.

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

circobit — Mon, 13 Jul 2026 08:00:00 +0000

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>

Ou via des classes :

.hidden-column { display: none; }

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>

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>

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>

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>

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 = '';
});

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

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));

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}")

Extraire les Attributs Title

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

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);

Option 2 : Supprimer la classe hidden

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

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
}

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>

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()
}));

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 :

Ouvrir les DevTools (F12)
Inspecter l'élément tableau
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 »
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.

Por Que Sua Tabela Exportada Tem Caracteres Estranhos (E Como Corrigir)

circobit — Thu, 09 Jul 2026 12:00:00 +0000

Você exporta uma tabela. Abre o CSV. Em vez de "José" vê "José". Em vez de "€" vê "â‚¬". Em vez de um travessão vê "â€"".

Bem-vindo ao inferno do encoding.

Este guia explica por que isso acontece e como corrigir — seja exportando manualmente ou construindo ferramentas de extração.

O Que Está Realmente Acontecendo

Codificação de caracteres é como computadores representam texto como bytes. Diferentes codificações usam padrões de bytes diferentes para o mesmo caractere.

O culpado mais comum: UTF-8 interpretado como Latin-1 (ou vice-versa).

UTF-8 usa múltiplos bytes para caracteres não-ASCII. Quando um software lê esses bytes como Latin-1 (codificação de byte único), cada byte se torna um caractere ilegível separado.

Caractere	Bytes UTF-8	Lido como Latin-1
é	C3 A9	Ã©
€	E2 82 AC	â‚¬
—	E2 80 94	â€"
ñ	C3 B1	Ã±
ã	C3 A3	Ã£
ç	C3 A7	Ã§

O padrão é consistente: sequências de múltiplos bytes se tornam múltiplos caracteres errados.

Onde o Encoding Quebra

1. A Página de Origem

O site pode declarar uma codificação mas servir outra. Ou não declarar nada, deixando os navegadores adivinharem.

<!-- Declara UTF-8 -->
<meta charset="UTF-8">

<!-- Mas o servidor envia -->
Content-Type: text/html; charset=ISO-8859-1

Quando declarações conflitam, navegadores geralmente acertam. Ferramentas de exportação podem não acertar.

2. O Processo de Exportação

Se sua ferramenta de extração não preserva a codificação, bytes são reinterpretados.

O textContent do JavaScript retorna strings Unicode, o que é seguro. Mas converter para um arquivo requer escolher uma codificação. Se essa escolha estiver errada, a corrupção acontece.

3. A Aplicação que Abre o Arquivo

Você exporta um CSV UTF-8 válido. O Excel abre como Latin-1 porque adivinhou errado. Mesma corrupção, causa diferente.

Por isso o mesmo arquivo fica normal em uma aplicação e quebrado em outra.

Como Diagnosticar o Problema

Reconhecimento de Padrões

Certas corrupções são diagnósticas:

Você vê	Original era
Ã¡, Ã©, Ã, Ã³, Ãº	á, é, í, ó, ú (acentos)
Ã£, Ãµ	ã, õ (til)
Ã§	ç (cedilha)
Ã¤, Ã¶, Ã¼	ä, ö, ü (trema alemão)
â‚¬	€ (Euro)
â€"	— (travessão)
â€™	' (apóstrofo tipográfico)

Se você vê Ã seguido de outro caractere, UTF-8 foi lido como Latin-1.

Verificar os Bytes Brutos

Em Python:

with open('arquivo.csv', 'rb') as f:
    print(f.read(100))

Se você vê \xc3\xa9 onde espera "é", o arquivo é UTF-8. Se vê \xe9, é Latin-1.

Verificar o Que a Página Declara

No DevTools do navegador:

document.characterSet  // Retorna a codificação real usada

Corrigindo Arquivos Corrompidos

O Truque da Recodificação

Se UTF-8 foi lido como Latin-1 por engano, você pode reverter:

# Ler como Latin-1 (como foi interpretado erroneamente)
with open('corrompido.csv', 'r', encoding='latin-1') as f:
    text = f.read()

# Codificar de volta para bytes Latin-1, depois decodificar como UTF-8
fixed = text.encode('latin-1').decode('utf-8')

with open('corrigido.csv', 'w', encoding='utf-8') as f:
    f.write(fixed)

Isso só funciona se a corrupção foi uma simples interpretação errada. Corrupção dupla ou encodings misturados são mais difíceis.

Forçar o Excel a Ler UTF-8

O Excel frequentemente ignora UTF-8. Duas alternativas:

Opção 1: Adicionar BOM

Um Byte Order Mark no início do arquivo sinaliza UTF-8:

with open('arquivo.csv', 'w', encoding='utf-8-sig') as f:
    f.write(data)

Opção 2: Assistente de Importação

Em vez de dar duplo clique no CSV, use Dados → De Texto/CSV e especifique a codificação UTF-8 manualmente.

Google Planilhas como Intermediário

O Google Planilhas lida com encoding melhor que o Excel. Importe o CSV lá, depois exporte para XLSX. O arquivo Excel preservará os caracteres corretamente.

Prevenindo Problemas de Encoding

Se Você Está Exportando Manualmente

Use ferramentas que lidam com encoding corretamente. O HTML Table Exporter preserva Unicode ao longo de todo o processo de exportação, evitando os erros de conversão que causam mojibake.

Para exportações CSV, se sua ferramenta oferece opções de encoding, escolha UTF-8 com BOM para compatibilidade com Excel.

Se Você Está Construindo Ferramentas de Extração

Sempre seja explícito sobre a codificação:

# Escrevendo CSV
with open('saida.csv', 'w', encoding='utf-8', newline='') as f:
    writer = csv.writer(f)
    writer.writerows(data)

# Lendo HTML
response = requests.get(url)
response.encoding = response.apparent_encoding  # Auto-detecção
html = response.text

Para JavaScript/extensões de navegador:

// Blob com encoding explícito
const blob = new Blob(['\ufeff' + csvContent], { 
  type: 'text/csv;charset=utf-8;' 
});

O \ufeff é o BOM que ajuda o Excel.

Se Você Está Usando Pandas

# Leitura
df = pd.read_csv('arquivo.csv', encoding='utf-8')

# Escrita com BOM para Excel
df.to_csv('saida.csv', encoding='utf-8-sig', index=False)

Caracteres Especiais Que Causam Problemas

Aspas Tipográficas e Apóstrofos

Processadores de texto convertem aspas retas em curvas:

' → ' (U+2019)
" → " " (U+201C, U+201D)

Esses são multi-byte em UTF-8 e quebram em Latin-1.

Travessão e Meia-Risca

— (travessão, U+2014)
– (meia-risca, U+2013)

Comuns em dados financeiros e editoriais.

Espaços Não Quebráveis

Espaço normal é 0x20. Espaço não quebrável é 0xA0 (Latin-1) ou 0xC2 0xA0 (UTF-8).

São invisíveis mas quebram comparações de strings e parsing.

# Normalizar espaços
text = text.replace('\xa0', ' ')

Símbolos de Moeda

€, £, ¥, R$ são todos fora do ASCII e codificam de forma diferente em UTF-8 vs Latin-1.

Referência Rápida

Problema	Causa Provável	Correção
Ã seguido de caractere	UTF-8 lido como Latin-1	Recodificar ou especificar UTF-8 na importação
? ou □ substituindo caracteres	Encoding não suporta o caractere	Usar UTF-8 em todo o processo
Excel mostra lixo	Excel adivinhou encoding errado	Usar UTF-8 BOM ou assistente de importação
Caracteres invisíveis quebrando dados	Espaços não quebráveis ou chars de largura zero	Normalizar espaços em branco

A Regra Fundamental

Combine a codificação em cada etapa. Exporte como UTF-8. Abra como UTF-8. Salve como UTF-8.

No momento em que uma etapa usa uma codificação diferente, os caracteres corrompem.

Na dúvida, UTF-8 com BOM é a escolha mais segura para arquivos que vão passar pelo Excel. Para saber quais extensões Chrome lidam melhor com encoding na exportação de tabelas, confira nossa comparação das melhores extensões Chrome para exportar tabelas.

Quer exportações que lidam com encoding corretamente? Saiba mais em gauchogrid.com/pt-br/html-table-exporter ou experimente o HTML Table Exporter grátis na Chrome Web Store.