DEV Community: circobit

Detectando Linhas de Cabeçalho Automaticamente: As Heurísticas por Trás do Parsing de Tabelas

circobit — Thu, 13 Aug 2026 12:00:00 +0000

A primeira linha de uma tabela HTML é a linha de cabeçalho.

Exceto quando não é.

Tabelas da Wikipedia frequentemente têm uma linha de título que abrange todas as colunas antes dos cabeçalhos reais. Sites de estatísticas esportivas têm cabeçalhos agrupados onde "Tempo de Jogo" abrange múltiplas sub-colunas como "PJ", "Titular", "Min". Tabelas financeiras têm linhas de unidade ("em milhões USD") que parecem cabeçalhos mas não são.

Se você assume que a linha 0 é sempre o cabeçalho, suas exportações estarão quebradas para uma parte significativa das tabelas do mundo real.

Veja como detectar a linha de cabeçalho real programaticamente.

O Problema: Três Tipos de "Primeiras Linhas"

Considere estes padrões comuns:

Padrão 1: Linha de Título

<table>
  <tr>
    <th colspan="4">População Mundial por País</th>  <!-- Título, não cabeçalho -->
  </tr>
  <tr>
    <th>Posição</th>
    <th>País</th>
    <th>População</th>
    <th>% do Mundo</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Índia</td>
    <td>1.428.627.663</td>
    <td>17,85%</td>
  </tr>
</table>

A linha 0 é um título. A linha 1 é o cabeçalho. A linha 2+ são dados.

Padrão 2: Cabeçalhos Agrupados (Dois Níveis)

<table>
  <tr>
    <th></th>
    <th></th>
    <th colspan="3">Tempo de Jogo</th>
    <th colspan="2">Desempenho</th>
  </tr>
  <tr>
    <th>Jogador</th>
    <th>Nação</th>
    <th>PJ</th>
    <th>Titular</th>
    <th>Min</th>
    <th>Gols</th>
    <th>Ast</th>
  </tr>
  <tr>
    <td>João Silva</td>
    <td>BRA</td>
    <td>34</td>
    <td>30</td>
    <td>2700</td>
    <td>12</td>
    <td>8</td>
  </tr>
</table>

A linha 0 são cabeçalhos de grupo. A linha 1 são os cabeçalhos de coluna reais. A linha 2+ são dados.

Padrão 3: Prefixo de Navegação da Wikipedia

<tr>
  <th colspan="3">v t e Patrimônios Mundiais da UNESCO</th>
</tr>

Os links "v t e" (ver/discutir/editar) são a navegação de template da Wikipedia. Eles precisam ser removidos, e a linha ainda pode ser um título em vez de cabeçalho.

Heurística 1: Detectando Linhas de Título

Uma linha de título tipicamente tem:

Uma única célula (ou muito poucas)
Colspan grande abrangendo a maioria/todas as colunas
Conteúdo de texto que parece um título, não nomes de colunas

function isTitleRow(row, totalColumns) {
  if (!row || row.length === 0) return false;

  // Contar células não vazias
  const nonEmptyCells = row.filter(cell => cell && cell.trim()).length;

  // Linhas de título geralmente têm 1-2 células não vazias
  if (nonEmptyCells > 2) return false;

  // Verificar se primeira célula abrange a maioria das colunas (indica colspan)
  // Em uma matriz normalizada, isso aparece como valores repetidos
  const firstValue = row[0];
  const repeatedCount = row.filter(cell => cell === firstValue).length;

  // Se o primeiro valor se repete em >50% das colunas, provavelmente é um título colspan
  if (repeatedCount > totalColumns * 0.5) {
    return true;
  }

  return false;
}

Heurística 2: O Que Faz Uma Linha "Parecer Cabeçalhos"

Linhas de cabeçalho têm características que as distinguem de linhas de dados:

function rowLooksLikeHeaders(row) {
  if (!row || row.length === 0) return false;

  // Se dominada por números puros, não é cabeçalho
  let numericCells = 0;
  let textCells = 0;
  let emptyCells = 0;

  for (const cell of row) {
    const value = (cell || "").trim();

    if (!value) {
      emptyCells++;
    } else if (/^-?\d+([.,]\d+)?%?$/.test(value)) {
      // Número puro ou porcentagem
      numericCells++;
    } else {
      textCells++;
    }
  }

  const totalNonEmpty = numericCells + textCells;
  if (totalNonEmpty === 0) return false;

  // Cabeçalhos são principalmente texto, não números
  // Se >70% das células não vazias são numéricas, provavelmente são dados
  if (numericCells / totalNonEmpty > 0.7) {
    return false;
  }

  // Cabeçalhos não devem ser principalmente vazios
  if (emptyCells / row.length > 0.7) {
    return false;
  }

  return true;
}

Heurística 3: O Que Faz Uma Linha "Parecer Dados"

A verificação inversa ajuda a confirmar que encontramos a fronteira correta:

function rowLooksLikeData(row) {
  if (!row || row.length === 0) return false;

  let numericCells = 0;
  let dateCells = 0;
  let totalNonEmpty = 0;

  for (const cell of row) {
    const value = (cell || "").trim();
    if (!value) continue;

    totalNonEmpty++;

    // Verificar padrões numéricos
    if (/^-?\d+([.,]\d+)?%?$/.test(value)) {
      numericCells++;
    }

    // Verificar padrões de data
    if (/^\d{1,4}[-/\.]\d{1,2}[-/\.]\d{1,4}$/.test(value)) {
      dateCells++;
    }
  }

  if (totalNonEmpty === 0) return false;

  // Linhas de dados tipicamente têm conteúdo numérico ou de data
  const dataLikeCells = numericCells + dateCells;
  return dataLikeCells / totalNonEmpty > 0.3;
}

Heurística 4: Detectando Cabeçalhos de Coluna Agrupados

Tabelas estilo FBREF têm uma linha de cabeçalho de grupo seguida por uma linha de sub-cabeçalho. A linha de grupo tem:

Células vazias no início (colunas sem grupos)
Valores repetidos da expansão de colspan
Múltiplos valores únicos não vazios (não apenas um como um título)

function detectGroupHeaderRow(row, nextRow) {
  if (!row || !nextRow || row.length < 4) return false;

  // Linhas de cabeçalho de grupo DEVEM ter células vazias no início
  // Isso distingue de tabelas duplicadas horizontalmente
  const firstCellEmpty = !(row[0] || "").trim();
  if (!firstCellEmpty) return false;

  // Contar valores únicos não vazios
  const uniqueValues = new Set(
    row.filter(v => v && v.trim()).map(v => v.trim().toLowerCase())
  );

  // Uma linha de título tem exatamente UM valor único
  // Uma linha de cabeçalho de grupo deve ter MÚLTIPLOS valores únicos
  if (uniqueValues.size <= 1) return false;

  // Contar repetições consecutivas (indica expansão de colspan)
  let consecutiveRepeats = 0;
  for (let i = 1; i < row.length; i++) {
    const curr = (row[i] || "").trim();
    const prev = (row[i - 1] || "").trim();
    if (curr === prev) consecutiveRepeats++;
  }

  const repeatRatio = consecutiveRepeats / (row.length - 1);

  // Alta taxa de repetição (>30%) sugere expansão de colspan
  // A próxima linha deve ter mais valores únicos (os sub-cabeçalhos reais)
  const nextUniqueValues = new Set(
    nextRow.filter(v => v && v.trim()).map(v => v.trim().toLowerCase())
  );

  return repeatRatio > 0.3 && nextUniqueValues.size > uniqueValues.size;
}

Heurística 5: Limpando Prefixos de Navegação da Wikipedia

Templates da Wikipedia frequentemente prefixam conteúdo com "v t e" (links para ver/discutir/editar o template):

function cleanWikipediaNavPrefix(text) {
  if (!text) return text;

  // Padrão 1: "v t e " no início (separado por espaço)
  // Padrão 2: "v | t | e " (separado por pipe)
  // Padrão 3: "[v] [t] [e] " (separado por colchetes)

  return text
    .replace(/^\s*v\s+t\s+e\s+/i, "")
    .replace(/^\s*v\s*\|\s*t\s*\|\s*e\s+/i, "")
    .replace(/^\s*\[v\]\s*\[t\]\s*\[e\]\s+/i, "")
    .trim();
}

Juntando Tudo: O Algoritmo de Detecção

function detectHeaderRowIndex(matrix) {
  if (!matrix || matrix.length < 2) return 0;

  const totalColumns = matrix[0]?.length || 0;

  for (let i = 0; i < Math.min(matrix.length - 1, 5); i++) {
    const currentRow = matrix[i];
    const nextRow = matrix[i + 1];

    // Pular linhas de título
    if (isTitleRow(currentRow, totalColumns)) {
      continue;
    }

    // Verificar cabeçalhos agrupados (dois níveis)
    if (detectGroupHeaderRow(currentRow, nextRow)) {
      // A linha de sub-cabeçalho (i+1) é o cabeçalho real
      return i + 1;
    }

    // Verificar se esta linha parece cabeçalho e a próxima parece dados
    if (rowLooksLikeHeaders(currentRow) && rowLooksLikeData(nextRow)) {
      return i;
    }
  }

  // Fallback: assumir linha 0 como cabeçalho
  return 0;
}

Testes no Mundo Real

Essas heurísticas foram desenvolvidas testando com:

Tabelas de países/população da Wikipedia (linhas de título + prefixos "v t e")
Estatísticas de jogadores do FBREF (cabeçalhos agrupados)
Tabelas financeiras com linhas de unidade
Tabelas de dados governamentais com múltiplos níveis de cabeçalho

Nenhuma heurística é perfeita. O objetivo é lidar corretamente com os padrões comuns e falhar graciosamente em tabelas incomuns.

Quando a Detecção Falha

Para tabelas que não se encaixam nos padrões comuns, forneça uma opção de override manual:

function extractTable(matrix, options = {}) {
  const headerRowIndex = options.headerRowIndex ?? detectHeaderRowIndex(matrix);

  const headerRow = matrix[headerRowIndex];
  const dataRows = matrix.slice(headerRowIndex + 1);

  return { headerRow, dataRows };
}

Usuários que conhecem seus dados podem especificar a linha de cabeçalho explicitamente.

Resumo

Padrão	Método de Detecção
Linha de título	Célula única com colspan grande
Cabeçalho padrão	Linha com mais texto, seguida por linha com números
Cabeçalhos agrupados	Primeiras células vazias + valores repetidos + mais valores únicos na próxima linha
Navegação Wikipedia	Padrão de prefixo "v t e"

O insight-chave: cabeçalhos e dados têm características diferentes. Cabeçalhos são pesados em texto com rótulos descritivos. Dados são pesados em números com valores reais. A fronteira entre eles geralmente é detectável.

Para saber mais sobre os desafios específicos das tabelas da Wikipedia, veja nosso guia sobre scraper de tabelas HTML para Chrome.

Precisa de detecção automática de cabeçalho sem escrever código? Saiba mais em gauchogrid.com/pt-br/html-table-exporter ou experimente gratuitamente na Chrome Web Store.

Normalización de Números para Datos Internacionales: Guía Práctica

circobit — Wed, 12 Aug 2026 13:30:00 +0000

Exportas una tabla de un sitio web alemán. La columna de ingresos muestra "1.234,56 €".

Lo pegas en Excel. Se convierte en "1.23456E" o, peor, una fecha.

Bienvenido al problema del formato numérico internacional.

El Problema Central: ¿Qué Significa "1.234"?

En EE.UU. y el Reino Unido: 1.234 = uno punto dos tres cuatro (decimal)

En Alemania, España y la mayor parte de Latinoamérica: 1.234 = mil doscientos treinta y cuatro

Mismos caracteres. Valores completamente diferentes.

Cuando extraes datos de sitios web internacionales, no puedes asumir con qué formato estás trabajando. Y equivocarte significa que tu análisis estará desfasado por órdenes de magnitud.

La Ambigüedad de Tres Dígitos

El caso más difícil es exactamente tres dígitos después de un separador.

Entrada	Interpretación EE.UU.	Interpretación UE
1.234	1.234 (decimal)	1.234 (miles)
1,234	1,234 (miles)	1.234 (decimal)
1.234.567	Inválido	1.234.567
1,234,567	1,234,567	Inválido

Con dos dígitos después, es claramente decimal: "1.23" o "1,23".
Con cuatro o más dígitos después, es claramente decimal: "3.14159".
¿Con tres dígitos? Podría ser cualquiera.

El Algoritmo de Detección

Aquí hay un enfoque heurístico que maneja la mayoría de los casos reales:

function normalizeNumberString(value) {
  if (typeof value !== "string") return value;
  const v = value.trim();
  if (!v || !/[0-9]/.test(v)) return value;

  // Paso 1: Limpiar símbolos de moneda, porcentajes, espacios
  let cleaned = v
    .replace(/&nbsp;/g, " ")
    .replace(/^(USD|EUR|GBP|R\$|MXN)\s*/i, "")
    .replace(/[$€£¥₹₽₩]/g, "")
    .replace(/%/g, "")
    .replace(/\s+/g, "");

  // Paso 2: Manejar signos negativos
  const isNegative = cleaned.match(/^-/);
  if (isNegative) {
    cleaned = cleaned.substring(1).trim();
  }

  // Paso 3: ¿Solo dígitos? Listo
  if (/^\d+$/.test(cleaned)) {
    return isNegative ? `-${cleaned}` : cleaned;
  }

  // Paso 4: Detectar separadores
  const hasComma = cleaned.includes(",");
  const hasDot = cleaned.includes(".");

  // Paso 5: Aplicar heurística
  let decimalSeparator = ".";
  let thousandsSeparator = ",";

  if (hasComma && hasDot) {
    // Ambos presentes: el último es decimal
    const lastComma = cleaned.lastIndexOf(",");
    const lastDot = cleaned.lastIndexOf(".");

    if (lastComma > lastDot) {
      decimalSeparator = ",";
      thousandsSeparator = ".";
    }
  } else if (hasComma && !hasDot) {
    const parts = cleaned.split(",");

    if (parts.length === 2 && parts[1].length <= 2) {
      // "1,23" → decimal
      decimalSeparator = ",";
    } else {
      // "1,234" o "1,234,567" → miles
      decimalSeparator = null;
      thousandsSeparator = ",";
    }
  } else if (hasDot && !hasComma) {
    const parts = cleaned.split(".");

    if (parts.length === 2) {
      const afterDot = parts[1];

      if (afterDot.length <= 2 || afterDot.length >= 4) {
        // "1.23" o "3.14159" → decimal
        decimalSeparator = ".";
      } else {
        // "1.234" → MILES (decisión pragmática para tablas)
        decimalSeparator = null;
        thousandsSeparator = ".";
      }
    } else {
      // Múltiples puntos → miles
      decimalSeparator = null;
      thousandsSeparator = ".";
    }
  }

  // Paso 6: Limpiar separadores de miles
  if (thousandsSeparator) {
    cleaned = cleaned.replace(new RegExp(`\\${thousandsSeparator}`, "g"), "");
  }

  // Paso 7: Normalizar decimal a punto
  if (decimalSeparator && decimalSeparator !== ".") {
    cleaned = cleaned.replace(decimalSeparator, ".");
  }

  // Paso 8: Validar
  const num = Number(cleaned);
  if (!Number.isFinite(num)) return value;

  return isNegative ? `-${cleaned}` : cleaned;
}

Por Qué Tres Dígitos = Miles

La decisión clave: cuando vemos exactamente tres dígitos después de un único separador (como "1.234"), lo interpretamos como miles, no como decimal.

¿Por qué? En tablas HTML:

Los datos financieros con miles son extremadamente comunes: $1.234, €1.234
Los decimales con exactamente tres dígitos son raros en la práctica
Los datos científicos con tres decimales (como "3.141") generalmente se escriben como "3.14159" o simplemente "3.14"

Esta heurística es una decisión pragmática que funciona para la mayoría de las tablas del mundo real.

La Matriz Completa de Formatos

Entrada	Interpretación	Salida Normalizada
1.234,56	Decimal UE	1234.56
1,234.56	Decimal EE.UU.	1234.56
1.234.567,89	Miles UE + decimal	1234567.89
1,234,567.89	Miles EE.UU. + decimal	1234567.89
1.234	Miles	1234
1,234	Miles	1234
3.14	Decimal	3.14
3,14	Decimal	3.14
3.14159	Decimal (4+ dígitos)	3.14159
$ 1.200,50	Moneda + UE	1200.50
-5.000	Miles negativos	-5000
12.5%	Porcentaje	12.5

Manejando Códigos de Moneda

Los datos internacionales vienen con prefijos y sufijos de moneda. Límpialos primero:

// Remover códigos de moneda ANTES de símbolos
.replace(/^(USD|EUR|GBP|JPY|CHF|CAD|AUD|CNY|INR|BRL|R\$|MXN|KRW)\s*/i, "")
// Luego remover símbolos
.replace(/[$€£¥₹₽₩₪฿₫₴₦]/g, "")

El orden importa: "R$" (Real Brasileño) contiene "$", así que remover códigos de moneda primero evita coincidencias parciales.

Cuándo la Heurística Falla

Ninguna heurística es perfecta. Obtendrás resultados incorrectos cuando:

Datos científicos con exactamente 3 decimales: "3.141" se convierte en "3141"
Precios menores a $10 con 3 decimales: "$1.234" se convierte en "$1234"
Formatos mixtos en una columna: Algunas filas UE, otras EE.UU.

Para el caso 3, necesitas detección de formato a nivel de columna:

function detectColumnFormat(values) {
  let euIndicators = 0;
  let usIndicators = 0;

  for (const v of values) {
    if (/\d\.\d{3},\d{2}$/.test(v)) euIndicators++;
    if (/\d,\d{3}\.\d{2}$/.test(v)) usIndicators++;
  }

  if (euIndicators > usIndicators) return "eu";
  if (usIndicators > euIndicators) return "us";
  return "auto"; // Usar heurística por celda
}

Perfiles de Exportación para Diferentes Regiones

Cuando conoces el país de origen, puedes evitar la ambigüedad por completo usando perfiles específicos por región:

Formato europeo: Asume coma como separador decimal, usa punto y coma como delimitador CSV
Formato EE.UU./UK: Asume punto como separador decimal, usa coma como delimitador CSV

HTML Table Exporter incluye perfiles preconfigurados para ambos formatos, más perfiles especializados para herramientas como Pandas y DuckDB.

Errores Comunes

No Perder Precisión

// Mal: pierde precisión en números grandes
const num = parseFloat("12345678901234567890");
// 12345678901234567000 (límite de JavaScript)

// Mejor: mantener como string hasta el cálculo final
const cleaned = normalizeNumberString(value);
// Solo parseFloat cuando necesités calcular

Cuidado con las Entidades HTML

Las tablas web a veces contienen   (espacio sin separación) dentro de números:

// "1&nbsp;234&nbsp;567" debería convertirse en "1234567"
.replace(/&nbsp;/g, " ")
.replace(/\s+/g, "")

Preservar el Original Ante la Duda

Si el valor no parece un número, devuélvelo sin cambios:

if (!/[0-9]/.test(v)) return value;
// ...
if (!Number.isFinite(num)) return value;

Es mejor dejar "N/A" como "N/A" que intentar parsearlo.

Resumen

Escenario	Detección	Notas
Ambos . y ,	El último = decimal	Universal
Solo coma, ≤2 dígitos después	Decimal	"1,23"
Solo coma, 3+ dígitos después	Miles	"1,234"
Solo punto, ≤2 o 4+ dígitos	Decimal	"1.23", "3.14159"
Solo punto, exactamente 3 dígitos	Miles	"1.234"

El caso de tres dígitos es la decisión pragmática. Funciona para la mayoría de los datos reales. Ante la duda, usa un perfil de exportación que coincida con tu región de origen.

Para más sobre copiar datos de sitios web a Excel sin problemas de formato, consulta nuestra guía sobre copiar tablas de sitios web a Excel.

¿Necesitas exportaciones de números limpias sin adivinanzas? Conoce más en gauchogrid.com/es/html-table-exporter o pruébalo gratis en la Chrome Web Store.

ヘッダー行の自動検出：テーブル解析のヒューリスティクス

circobit — Wed, 12 Aug 2026 00:00:00 +0000

HTMLテーブルの最初の行はヘッダー行。

ただし、そうでない場合もあります。

Wikipediaテーブルでは実際のヘッダーの前に全列にまたがるタイトル行があることが多い。スポーツ統計サイトでは「出場時間」が「試合数」「先発」「出場分」といった複数のサブ列にまたがるグループヘッダーがある。財務テーブルにはヘッダーのように見えるが実際にはそうではない単位行（「百万ドル」）がある。

行0が常にヘッダーだと仮定すると、実世界のテーブルのかなりの割合でエクスポートが壊れます。

プログラムで実際のヘッダー行を検出する方法を解説します。

問題：3種類の「最初の行」

よくあるパターンを見てみましょう：

パターン1：タイトル行

<table>
  <tr>
    <th colspan="4">世界の国別人口</th>  <!-- タイトルであり、ヘッダーではない -->
  </tr>
  <tr>
    <th>順位</th>
    <th>国名</th>
    <th>人口</th>
    <th>世界比率</th>
  </tr>
  <tr>
    <td>1</td>
    <td>インド</td>
    <td>1,428,627,663</td>
    <td>17.85%</td>
  </tr>
</table>

行0はタイトル。行1がヘッダー。行2以降がデータ。

パターン2：グループヘッダー（2階層）

<table>
  <tr>
    <th></th>
    <th></th>
    <th colspan="3">出場時間</th>
    <th colspan="2">パフォーマンス</th>
  </tr>
  <tr>
    <th>選手</th>
    <th>国籍</th>
    <th>試合</th>
    <th>先発</th>
    <th>出場分</th>
    <th>得点</th>
    <th>アシスト</th>
  </tr>
  <tr>
    <td>田中太郎</td>
    <td>JPN</td>
    <td>34</td>
    <td>30</td>
    <td>2700</td>
    <td>12</td>
    <td>8</td>
  </tr>
</table>

行0はグループヘッダー。行1が実際の列ヘッダー。行2以降がデータ。

パターン3：Wikipediaのナビゲーション接頭辞

<tr>
  <th colspan="3">v t e 世界遺産</th>
</tr>

「v t e」（表示/トーク/編集）リンクはWikipediaのテンプレートナビゲーション。除去する必要があり、その行自体もヘッダーではなくタイトルかもしれません。

ヒューリスティック1：タイトル行の検出

タイトル行の典型的な特徴：

セルが1つ（または非常に少ない）
ほとんど/すべての列にまたがる大きなcolspan
列名ではなくタイトルに見えるテキストコンテンツ

function isTitleRow(row, totalColumns) {
  if (!row || row.length === 0) return false;

  // 空でないセルを数える
  const nonEmptyCells = row.filter(cell => cell && cell.trim()).length;

  // タイトル行は通常1-2個の非空セル
  if (nonEmptyCells > 2) return false;

  // 最初のセルがほとんどの列にまたがっているか確認（colspanを示す）
  // 正規化されたマトリクスでは、これは繰り返される値として表示される
  const firstValue = row[0];
  const repeatedCount = row.filter(cell => cell === firstValue).length;

  // 最初の値が列の50%以上で繰り返されている場合、colspanタイトルの可能性が高い
  if (repeatedCount > totalColumns * 0.5) {
    return true;
  }

  return false;
}

ヒューリスティック2：「ヘッダーらしい」行の特徴

ヘッダー行にはデータ行と区別する特徴があります：

function rowLooksLikeHeaders(row) {
  if (!row || row.length === 0) return false;

  let numericCells = 0;
  let textCells = 0;
  let emptyCells = 0;

  for (const cell of row) {
    const value = (cell || "").trim();

    if (!value) {
      emptyCells++;
    } else if (/^-?\d+([.,]\d+)?%?$/.test(value)) {
      // 純粋な数値またはパーセント
      numericCells++;
    } else {
      textCells++;
    }
  }

  const totalNonEmpty = numericCells + textCells;
  if (totalNonEmpty === 0) return false;

  // ヘッダーは主にテキストで、数値ではない
  // 非空セルの70%以上が数値ならデータの可能性が高い
  if (numericCells / totalNonEmpty > 0.7) {
    return false;
  }

  // ヘッダーはほとんど空であるべきではない
  if (emptyCells / row.length > 0.7) {
    return false;
  }

  return true;
}

ヒューリスティック3：「データらしい」行の特徴

逆のチェックで、正しい境界を見つけたことを確認します：

function rowLooksLikeData(row) {
  if (!row || row.length === 0) return false;

  let numericCells = 0;
  let dateCells = 0;
  let totalNonEmpty = 0;

  for (const cell of row) {
    const value = (cell || "").trim();
    if (!value) continue;

    totalNonEmpty++;

    // 数値パターンのチェック
    if (/^-?\d+([.,]\d+)?%?$/.test(value)) {
      numericCells++;
    }

    // 日付パターンのチェック
    if (/^\d{1,4}[-/\.]\d{1,2}[-/\.]\d{1,4}$/.test(value)) {
      dateCells++;
    }
  }

  if (totalNonEmpty === 0) return false;

  // データ行は通常、数値または日付コンテンツを含む
  const dataLikeCells = numericCells + dateCells;
  return dataLikeCells / totalNonEmpty > 0.3;
}

ヒューリスティック4：グループ列ヘッダーの検出

FBREF形式のテーブルには、グループヘッダー行の後にサブヘッダー行が続きます。グループ行の特徴：

先頭に空セル（グループのない列）
colspanの展開による繰り返し値
複数のユニークな非空値（タイトルのように1つだけではない）

function detectGroupHeaderRow(row, nextRow) {
  if (!row || !nextRow || row.length < 4) return false;

  // グループヘッダー行は先頭に空セルがなければならない
  const firstCellEmpty = !(row[0] || "").trim();
  if (!firstCellEmpty) return false;

  // ユニークな非空値を数える
  const uniqueValues = new Set(
    row.filter(v => v && v.trim()).map(v => v.trim().toLowerCase())
  );

  // タイトル行はユニーク値が1つだけ
  // グループヘッダー行は複数のユニーク値が必要
  if (uniqueValues.size <= 1) return false;

  // 連続する繰り返し値を数える（colspan展開を示す）
  let consecutiveRepeats = 0;
  for (let i = 1; i < row.length; i++) {
    const curr = (row[i] || "").trim();
    const prev = (row[i - 1] || "").trim();
    if (curr === prev) consecutiveRepeats++;
  }

  const repeatRatio = consecutiveRepeats / (row.length - 1);

  // 高い繰り返し率（>30%）はcolspan展開を示唆
  // 次の行はより多くのユニーク値を持つべき（実際のサブヘッダー）
  const nextUniqueValues = new Set(
    nextRow.filter(v => v && v.trim()).map(v => v.trim().toLowerCase())
  );

  return repeatRatio > 0.3 && nextUniqueValues.size > uniqueValues.size;
}

ヒューリスティック5：Wikipediaナビゲーション接頭辞のクリーニング

Wikipediaのテンプレートはコンテンツの前に「v t e」（テンプレートの表示/トーク/編集へのリンク）を付加することがあります：

function cleanWikipediaNavPrefix(text) {
  if (!text) return text;

  // パターン1："v t e " が先頭に（スペース区切り）
  // パターン2："v | t | e "（パイプ区切り）
  // パターン3："[v] [t] [e] "（ブラケット区切り）

  return text
    .replace(/^\s*v\s+t\s+e\s+/i, "")
    .replace(/^\s*v\s*\|\s*t\s*\|\s*e\s+/i, "")
    .replace(/^\s*\[v\]\s*\[t\]\s*\[e\]\s+/i, "")
    .trim();
}

統合：検出アルゴリズム

function detectHeaderRowIndex(matrix) {
  if (!matrix || matrix.length < 2) return 0;

  const totalColumns = matrix[0]?.length || 0;

  for (let i = 0; i < Math.min(matrix.length - 1, 5); i++) {
    const currentRow = matrix[i];
    const nextRow = matrix[i + 1];

    // タイトル行をスキップ
    if (isTitleRow(currentRow, totalColumns)) {
      continue;
    }

    // グループヘッダー（2階層）をチェック
    if (detectGroupHeaderRow(currentRow, nextRow)) {
      // サブヘッダー行（i+1）が実際のヘッダー
      return i + 1;
    }

    // この行がヘッダーに見え、次の行がデータに見えるかチェック
    if (rowLooksLikeHeaders(currentRow) && rowLooksLikeData(nextRow)) {
      return i;
    }
  }

  // フォールバック：行0をヘッダーと仮定
  return 0;
}

実世界でのテスト

これらのヒューリスティクスは以下のテストを経て開発されました：

Wikipediaの国別/人口テーブル（タイトル行 + 「v t e」接頭辞）
FBREFの選手統計（グループヘッダー）
単位行を持つ財務テーブル
複数ヘッダーレベルの政府データテーブル

完璧なヒューリスティクスはありません。目標はよくあるパターンを正しく処理し、珍しいテーブルでもグレースフルに失敗することです。

検出が失敗する場合

一般的なパターンに当てはまらないテーブルには、手動オーバーライドを提供します：

function extractTable(matrix, options = {}) {
  const headerRowIndex = options.headerRowIndex ?? detectHeaderRowIndex(matrix);

  const headerRow = matrix[headerRowIndex];
  const dataRows = matrix.slice(headerRowIndex + 1);

  return { headerRow, dataRows };
}

データを知っているユーザーはヘッダー行を明示的に指定できます。

まとめ

パターン	検出方法
タイトル行	大きなcolspanを持つ単一セル
標準ヘッダー	主にテキストの行の後に数値の行
グループヘッダー	先頭の空セル + 繰り返し値 + 次の行により多くのユニーク値
Wikipediaナビ	"v t e" 接頭辞パターン

重要なインサイト：ヘッダーとデータには異なる特性があります。ヘッダーは説明的なラベルを持つテキスト中心。データは実際の値を持つ数値中心。その境界は通常検出可能です。

Wikipediaの特有のテーブル課題については、WikipediaテーブルをExcelにエクスポートする方法のガイドをご覧ください。

コードを書かずにヘッダー自動検出が必要ですか？gauchogrid.com/ja/html-table-exporterで詳細を確認するか、Chrome ウェブストアで無料でお試しください。

Vom Browser zur Datenbank: Der kürzeste Weg für Webtabellen

circobit — Tue, 11 Aug 2026 07:30:00 +0000

Man hat Daten auf einer Website gefunden. Man braucht sie in der Datenbank.

Was ist der schnellste Weg von Punkt A nach Punkt B?

Dieser Leitfaden behandelt die praktischen Workflows, um HTML-Tabellen in SQLite, PostgreSQL, MySQL und andere Datenbanken zu bekommen — mit minimalem Aufwand.

Der allgemeine Workflow

Jede Browser-zu-Datenbank-Pipeline hat dieselben Schritte:

Extrahieren — Die Tabelle aus der Webseite holen
Bereinigen — Formatierung, Typen und Struktur korrigieren
Laden — In die Datenbank einfügen

Die Frage ist, wo man jeden Schritt durchführt und mit welchen Tools.

Weg 1: CSV als Zwischenformat

Der gängigste Ansatz. Funktioniert mit jeder Datenbank.

Schritt 1: Als CSV exportieren

Eine Browser-Erweiterung wie HTML Table Exporter verwenden oder kopieren, in eine Tabellenkalkulation einfügen und als CSV speichern.

Wichtige Überlegung: Die Wahl des Trennzeichens. Kommas funktionieren, es sei denn, die Daten enthalten Kommas. Semikolons oder Tabs sind sicherer bei uneinheitlichen Daten.

Schritt 2: In Datenbank laden

SQLite:

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

Oder mit Headern:

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

PostgreSQL:

COPY tabellenname FROM '/pfad/zu/data.csv' 
WITH (FORMAT csv, HEADER true);

Oder mit psql:

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

MySQL:

LOAD DATA INFILE '/pfad/zu/data.csv'
INTO TABLE tabellenname
FIELDS TERMINATED BY ','
ENCLOSED BY '"'
LINES TERMINATED BY '\n'
IGNORE 1 ROWS;

Vor- und Nachteile

✅ Universelle Kompatibilität

✅ Zwischendatei leicht überprüfbar

✅ Probleme können vor dem Laden manuell behoben werden

❌ Zusätzlicher Schritt

❌ Typinferenz ist einfach

Weg 2: Direkt als SQL-Statements

Die Tabelle direkt als INSERT-Anweisungen exportieren.

Als SQL exportieren

Manche Export-Tools generieren SQL direkt. Die Ausgabe sieht so aus:

INSERT INTO tabellenname (spalte1, spalte2, spalte3) VALUES
('wert1', 'wert2', 123),
('wert4', 'wert5', 456);

Laden

Einfach die SQL-Datei ausführen:

# SQLite
sqlite3 mydb.db < data.sql

# PostgreSQL
psql -d mydb -f data.sql

# MySQL
mysql mydb < data.sql

Vor- und Nachteile

✅ Ein Schritt vom Export zur Datenbank

✅ SQL ist portabel über Datenbanken hinweg (größtenteils)

❌ Große Datensätze = riesige SQL-Dateien

❌ Tabellenschema muss vorher definiert werden

Weg 3: Python + Pandas Pipeline

Maximale Flexibilität. Am besten für wiederholte Importe oder komplexe Bereinigungen.

Kompletter Workflow

import pandas as pd
from sqlalchemy import create_engine

# Schritt 1: CSV laden (aus Browser exportiert)
df = pd.read_csv('data.csv')

# Schritt 2: Bereinigen
df.columns = df.columns.str.lower().str.replace(' ', '_')  # Spaltennamen normalisieren
df['datum'] = pd.to_datetime(df['datum'])  # Datumsangaben parsen
df['betrag'] = df['betrag'].str.replace('[€,]', '', regex=True).astype(float)  # Währung bereinigen

# Schritt 3: In Datenbank laden
engine = create_engine('sqlite:///mydb.db')
# Oder: create_engine('postgresql://user:pass@localhost/mydb')
# Oder: create_engine('mysql+pymysql://user:pass@localhost/mydb')

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

Typ-Mapping

Pandas erkennt Typen automatisch, aber man kann explizit sein:

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

Vor- und Nachteile

✅ Volle Kontrolle über Bereinigung und Typen

✅ Verarbeitet komplexe Transformationen

✅ Wiederholbar und skriptfähig

❌ Erfordert Python-Umgebung

❌ Überdimensioniert für einmalige Importe

Weg 4: DuckDB (Die moderne Abkürzung)

DuckDB liest CSV direkt und erledigt die meiste Bereinigung automatisch.

Direkte Abfrage

-- CSV abfragen ohne Import
SELECT * FROM 'data.csv';

-- Mit Typinferenz
SELECT * FROM read_csv_auto('data.csv');

-- Tabelle aus CSV erstellen
CREATE TABLE meine_tabelle AS SELECT * FROM 'data.csv';

Vom Browser zur Abfrage in Sekunden

# Tabelle als CSV aus dem Browser exportieren
# Dann sofort abfragen:
duckdb -c "SELECT spalte1, SUM(spalte2) FROM 'data.csv' GROUP BY spalte1;"

Keine Schema-Definition. Kein Import-Schritt. Einfach abfragen.

Vor- und Nachteile

✅ Schnellster Weg für Ad-hoc-Analysen

✅ Exzellente Typinferenz

✅ SQL-Interface

❌ Keine traditionelle Datenbank (für Persistenz Ergebnisse exportieren)

Häufige Probleme lösen

Spaltennamen mit Leerzeichen

Webtabellen haben oft Header wie „Gesamtumsatz" oder „Laufendes Jahr".

Beim Export beheben: Manche Tools normalisieren Header automatisch.

Beim Import beheben:

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

Oder in SQL nach dem Import:

ALTER TABLE meine_tabelle RENAME COLUMN "Gesamtumsatz" TO gesamtumsatz;

Gemischte Zahlenformate

Europäisch (1.234,56) vs. US (1,234.56) — unterschiedliche Formate machen Importe kaputt.

Vor dem Import beheben: Ein Tool mit Bereinigungsprofilen verwenden, oder:

# Europäisch zu Standard
df['wert'] = df['wert'].str.replace('.', '').str.replace(',', '.').astype(float)

Null-Darstellungen

Webtabellen zeigen Leerzeichen, „N/A", „—", „-" für fehlende Daten.

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

Oder in DuckDB:

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

Datumsangaben in verschiedenen Formaten

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

format='mixed' verarbeitet uneinheitliche Datumsformate in derselben Spalte.

Den richtigen Weg wählen

Szenario	Empfohlener Weg
Einmaliger Import, kleine Tabelle	CSV + direkter Datenbankimport
Einmaliger Import, Bereinigung nötig	Python + Pandas
Schnelle Analyse, keine Persistenz nötig	DuckDB
Regelmäßige Importe aus derselben Quelle	Python-Skript (automatisieren)
SQL-Format zum Teilen/Versionieren benötigt	Direkter SQL-Export

Beispiel: Kompletter Workflow

Angenommen, man hat eine Tabelle mit Produktdaten auf einer Website.

Schritt 1: Mit HTML Table Exporter exportieren → CSV mit bereinigten Zahlen

Schritt 2: Schnelle Validierung in DuckDB:

SELECT COUNT(*), COUNT(DISTINCT produkt_id) FROM 'produkte.csv';
-- Auf Duplikate prüfen

Schritt 3: In PostgreSQL laden:

import pandas as pd
from sqlalchemy import create_engine

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

Gesamtzeit: 2 Minuten.

Die Meta-Lektion

Der kürzeste Weg ist nicht immer der direkteste.

30 Sekunden für Bereinigung beim Export sparen 10 Minuten beim Debuggen von Importfehlern. Das richtige Zwischenformat (CSV vs. SQL vs. JSON) hängt von der Zieldatenbank und der Datenkomplexität ab.

Für die meisten Webtabelle → Datenbank Workflows:

Als CSV mit Zahlen-/Datumsbereinigung exportieren
Mit dem nativen CSV-Import der Datenbank laden
Python nur einsetzen, wenn komplexe Transformationen nötig sind

Einfache Pipelines sind wartbare Pipelines.

Für Python-Workflows im Detail siehe unseren Leitfaden zu den besten Chrome-Erweiterungen zum Exportieren von Tabellen.

Saubere, datenbankfähige Exporte? Erfahren Sie mehr auf gauchogrid.com/de/html-table-exporter oder probieren Sie HTML Table Exporter kostenlos im Chrome Web Store.

헤더 행 자동 감지: 테이블 파싱의 휴리스틱

circobit — Tue, 11 Aug 2026 00:30:00 +0000

HTML 테이블의 첫 번째 행이 헤더 행입니다.

그런데 그렇지 않을 때가 있습니다.

Wikipedia 테이블에는 실제 헤더 앞에 모든 열에 걸친 제목 행이 있는 경우가 많습니다. 스포츠 통계 사이트에는 "출전 시간"이 "경기", "선발", "분" 같은 여러 하위 열에 걸치는 그룹 헤더가 있습니다. 재무 테이블에는 헤더처럼 보이지만 헤더가 아닌 단위 행("백만 USD 단위")이 있습니다.

0행이 항상 헤더라고 가정하면, 상당수의 실제 테이블에서 내보내기가 깨집니다.

프로그래밍 방식으로 실제 헤더 행을 감지하는 방법을 알아보겠습니다.

문제: 세 가지 유형의 "첫 번째 행"

다음과 같은 일반적인 패턴을 생각해 보세요:

패턴 1: 제목 행

<table>
  <tr>
    <th colspan="4">국가별 세계 인구</th>  <!-- 제목, 헤더가 아님 -->
  </tr>
  <tr>
    <th>순위</th>
    <th>국가</th>
    <th>인구</th>
    <th>세계 비율</th>
  </tr>
  <tr>
    <td>1</td>
    <td>인도</td>
    <td>1,428,627,663</td>
    <td>17.85%</td>
  </tr>
</table>

0행은 제목입니다. 1행이 헤더입니다. 2행 이후가 데이터입니다.

패턴 2: 그룹 헤더 (2단계)

<table>
  <tr>
    <th></th>
    <th></th>
    <th colspan="3">출전 시간</th>
    <th colspan="2">성적</th>
  </tr>
  <tr>
    <th>선수</th>
    <th>국적</th>
    <th>경기</th>
    <th>선발</th>
    <th>분</th>
    <th>골</th>
    <th>어시스트</th>
  </tr>
  <tr>
    <td>홍길동</td>
    <td>KOR</td>
    <td>34</td>
    <td>30</td>
    <td>2700</td>
    <td>12</td>
    <td>8</td>
  </tr>
</table>

0행은 그룹 헤더입니다. 1행이 실제 열 헤더입니다. 2행 이후가 데이터입니다.

패턴 3: Wikipedia 내비게이션 접두사

<tr>
  <th colspan="3">v t e 세계 유산</th>
</tr>

"v t e" (보기/토론/편집) 링크는 Wikipedia의 틀 내비게이션입니다. 이것을 제거해야 하며, 행 자체는 헤더가 아닌 제목일 수 있습니다.

휴리스틱 1: 제목 행 감지

제목 행의 일반적인 특징:

단일 셀 (또는 매우 적은 수의 셀)
대부분/전체 열에 걸치는 큰 colspan
열 이름이 아닌 제목처럼 보이는 텍스트 콘텐츠

function isTitleRow(row, totalColumns) {
  if (!row || row.length === 0) return false;

  // 비어 있지 않은 셀 수 세기
  const nonEmptyCells = row.filter(cell => cell && cell.trim()).length;

  // 제목 행은 보통 1-2개의 비어 있지 않은 셀
  if (nonEmptyCells > 2) return false;

  // 첫 번째 셀이 대부분의 열에 걸치는지 확인 (colspan 표시)
  // 정규화된 매트릭스에서는 반복되는 값으로 나타남
  const firstValue = row[0];
  const repeatedCount = row.filter(cell => cell === firstValue).length;

  // 첫 번째 값이 열의 50% 이상에서 반복되면 colspan 제목일 가능성이 높음
  if (repeatedCount > totalColumns * 0.5) {
    return true;
  }

  return false;
}

휴리스틱 2: 행이 "헤더처럼 보이는" 기준

헤더 행에는 데이터 행과 구별되는 특성이 있습니다:

function rowLooksLikeHeaders(row) {
  if (!row || row.length === 0) return false;

  let numericCells = 0;
  let textCells = 0;
  let emptyCells = 0;

  for (const cell of row) {
    const value = (cell || "").trim();

    if (!value) {
      emptyCells++;
    } else if (/^-?\d+([.,]\d+)?%?$/.test(value)) {
      // 순수 숫자 또는 퍼센트
      numericCells++;
    } else {
      textCells++;
    }
  }

  const totalNonEmpty = numericCells + textCells;
  if (totalNonEmpty === 0) return false;

  // 헤더는 주로 텍스트이지 숫자가 아님
  // 비어 있지 않은 셀의 70% 이상이 숫자면 데이터일 가능성이 높음
  if (numericCells / totalNonEmpty > 0.7) {
    return false;
  }

  // 헤더는 대부분 비어 있으면 안 됨
  if (emptyCells / row.length > 0.7) {
    return false;
  }

  return true;
}

휴리스틱 3: 행이 "데이터처럼 보이는" 기준

역방향 검사를 통해 올바른 경계를 찾았는지 확인합니다:

function rowLooksLikeData(row) {
  if (!row || row.length === 0) return false;

  let numericCells = 0;
  let dateCells = 0;
  let totalNonEmpty = 0;

  for (const cell of row) {
    const value = (cell || "").trim();
    if (!value) continue;

    totalNonEmpty++;

    // 숫자 패턴 확인
    if (/^-?\d+([.,]\d+)?%?$/.test(value)) {
      numericCells++;
    }

    // 날짜 패턴 확인
    if (/^\d{1,4}[-/\.]\d{1,2}[-/\.]\d{1,4}$/.test(value)) {
      dateCells++;
    }
  }

  if (totalNonEmpty === 0) return false;

  // 데이터 행은 일반적으로 숫자 또는 날짜 콘텐츠를 포함
  const dataLikeCells = numericCells + dateCells;
  return dataLikeCells / totalNonEmpty > 0.3;
}

휴리스틱 4: 그룹 열 헤더 감지

FBREF 스타일의 테이블에는 그룹 헤더 행 다음에 하위 헤더 행이 있습니다. 그룹 행의 특징:

시작 부분에 빈 셀 (그룹이 없는 열)
colspan 확장으로 인한 반복 값
제목처럼 하나가 아닌 여러 개의 고유한 비어 있지 않은 값

function detectGroupHeaderRow(row, nextRow) {
  if (!row || !nextRow || row.length < 4) return false;

  // 그룹 헤더 행은 시작 부분에 빈 셀이 있어야 함
  // 이것이 수평으로 복제된 테이블과 구별됨
  const firstCellEmpty = !(row[0] || "").trim();
  if (!firstCellEmpty) return false;

  // 고유한 비어 있지 않은 값 수 세기
  const uniqueValues = new Set(
    row.filter(v => v && v.trim()).map(v => v.trim().toLowerCase())
  );

  // 제목 행은 정확히 하나의 고유 값을 가짐
  // 그룹 헤더 행은 여러 개의 고유 값이 있어야 함
  if (uniqueValues.size <= 1) return false;

  // 연속 반복 값 세기 (colspan 확장 표시)
  let consecutiveRepeats = 0;
  for (let i = 1; i < row.length; i++) {
    const curr = (row[i] || "").trim();
    const prev = (row[i - 1] || "").trim();
    if (curr === prev) consecutiveRepeats++;
  }

  const repeatRatio = consecutiveRepeats / (row.length - 1);

  // 높은 반복 비율 (30% 이상)은 colspan 확장을 시사
  // 다음 행은 더 많은 고유 값을 가져야 함 (실제 하위 헤더)
  const nextUniqueValues = new Set(
    nextRow.filter(v => v && v.trim()).map(v => v.trim().toLowerCase())
  );

  return repeatRatio > 0.3 && nextUniqueValues.size > uniqueValues.size;
}

휴리스틱 5: Wikipedia 내비게이션 접두사 정리

Wikipedia 틀은 종종 콘텐츠 앞에 "v t e" (보기/토론/편집 링크)를 붙입니다:

function cleanWikipediaNavPrefix(text) {
  if (!text) return text;

  // 패턴 1: "v t e " (공백으로 구분)
  // 패턴 2: "v | t | e " (파이프로 구분)
  // 패턴 3: "[v] [t] [e] " (괄호로 구분)

  return text
    .replace(/^\s*v\s+t\s+e\s+/i, "")
    .replace(/^\s*v\s*\|\s*t\s*\|\s*e\s+/i, "")
    .replace(/^\s*\[v\]\s*\[t\]\s*\[e\]\s+/i, "")
    .trim();
}

종합: 감지 알고리즘

function detectHeaderRowIndex(matrix) {
  if (!matrix || matrix.length < 2) return 0;

  const totalColumns = matrix[0]?.length || 0;

  for (let i = 0; i < Math.min(matrix.length - 1, 5); i++) {
    const currentRow = matrix[i];
    const nextRow = matrix[i + 1];

    // 제목 행 건너뛰기
    if (isTitleRow(currentRow, totalColumns)) {
      continue;
    }

    // 그룹 헤더 (2단계) 확인
    if (detectGroupHeaderRow(currentRow, nextRow)) {
      // 하위 헤더 행 (i+1)이 실제 헤더
      return i + 1;
    }

    // 이 행이 헤더처럼 보이고 다음이 데이터처럼 보이는지 확인
    if (rowLooksLikeHeaders(currentRow) && rowLooksLikeData(nextRow)) {
      return i;
    }
  }

  // 폴백: 0행이 헤더라고 가정
  return 0;
}

실제 테스트

이 휴리스틱은 다음에 대해 테스트하여 개발되었습니다:

Wikipedia 국가/인구 테이블 (제목 행 + "v t e" 접두사)
FBREF 선수 통계 (그룹 헤더)
단위 행이 있는 재무 테이블
여러 헤더 레벨이 있는 정부 데이터 테이블

어떤 휴리스틱도 완벽하지 않습니다. 목표는 일반적인 패턴을 올바르게 처리하고 비정상적인 테이블에서는 우아하게 실패하는 것입니다.

감지가 실패할 때

일반적인 패턴에 맞지 않는 테이블의 경우 수동 재정의를 제공하세요:

function extractTable(matrix, options = {}) {
  const headerRowIndex = options.headerRowIndex ?? detectHeaderRowIndex(matrix);

  const headerRow = matrix[headerRowIndex];
  const dataRows = matrix.slice(headerRowIndex + 1);

  return { headerRow, dataRows };
}

데이터를 알고 있는 사용자는 헤더 행을 명시적으로 지정할 수 있습니다.

요약

패턴	감지 방법
제목 행	큰 colspan을 가진 단일 셀
표준 헤더	주로 텍스트인 행, 다음에 숫자가 있는 행
그룹 헤더	빈 첫 번째 셀 + 반복 값 + 다음 행에 더 많은 고유 값
Wikipedia 내비	"v t e" 접두사 패턴

핵심 통찰: 헤더와 데이터는 다른 특성을 가집니다. 헤더는 설명적 레이블이 있는 텍스트 중심입니다. 데이터는 실제 값이 있는 숫자 중심입니다. 그 사이의 경계는 대체로 감지 가능합니다.

Wikipedia의 특정 테이블 문제에 대해 자세히 알아보려면 Wikipedia 테이블을 Excel로 내보내기 가이드를 참조하세요.

코드 없이 자동 헤더 감지가 필요하신가요? gauchogrid.com/ko/html-table-exporter에서 자세히 알아보거나 Chrome 웹 스토어에서 무료로 사용해 보세요.

Automatisch Headerrijen Detecteren: De Heuristieken Achter Tabelparsing

circobit — Mon, 10 Aug 2026 12:30:00 +0000

De eerste rij van een HTML-tabel is de headerrij.

Behalve wanneer dat niet zo is.

Wikipedia-tabellen hebben vaak een titelrij die alle kolommen overspant vóór de eigenlijke headers. Sportstatistiekensites hebben gegroepeerde headers waar "Speeltijd" meerdere subkolommen overspant zoals "WS", "Basis", "Min". Financiële tabellen hebben eenheidrijen ("in miljoenen EUR") die op headers lijken maar dat niet zijn.

Als je aanneemt dat rij 0 altijd de header is, zullen je exports kapot zijn voor een aanzienlijk deel van de real-world tabellen.

Zo detecteer je de eigenlijke headerrij programmatisch.

Het Probleem: Drie Soorten "Eerste Rijen"

Bekijk deze veelvoorkomende patronen:

Patroon 1: Titelrij

<table>
  <tr>
    <th colspan="4">Wereldbevolking per Land</th>  <!-- Titel, geen header -->
  </tr>
  <tr>
    <th>Rang</th>
    <th>Land</th>
    <th>Bevolking</th>
    <th>% van Wereld</th>
  </tr>
  <tr>
    <td>1</td>
    <td>India</td>
    <td>1.428.627.663</td>
    <td>17,85%</td>
  </tr>
</table>

Rij 0 is een titel. Rij 1 is de header. Rij 2+ is data.

Patroon 2: Gegroepeerde Headers (Twee Niveaus)

<table>
  <tr>
    <th></th>
    <th></th>
    <th colspan="3">Speeltijd</th>
    <th colspan="2">Prestatie</th>
  </tr>
  <tr>
    <th>Speler</th>
    <th>Land</th>
    <th>WS</th>
    <th>Basis</th>
    <th>Min</th>
    <th>Dls</th>
    <th>Ass</th>
  </tr>
  <tr>
    <td>Jan de Vries</td>
    <td>NED</td>
    <td>34</td>
    <td>30</td>
    <td>2700</td>
    <td>12</td>
    <td>8</td>
  </tr>
</table>

Rij 0 is groepheaders. Rij 1 is de eigenlijke kolomheaders. Rij 2+ is data.

Patroon 3: Wikipedia-Navigatieprefix

<tr>
  <th colspan="3">v t e Werelderfgoedlijst</th>
</tr>

De "v t e" (bekijk/overleg/bewerk) links zijn Wikipedia's sjabloonnavigatie. Ze moeten verwijderd worden, en de rij kan nog steeds een titel zijn in plaats van een header.

Heuristiek 1: Titelrijen Detecteren

Een titelrij heeft doorgaans:

Een enkele cel (of heel weinig cellen)
Grote colspan die de meeste/alle kolommen overspant
Tekstinhoud die op een titel lijkt, niet op kolomnamen

function isTitleRow(row, totalColumns) {
  if (!row || row.length === 0) return false;

  // Tel niet-lege cellen
  const nonEmptyCells = row.filter(cell => cell && cell.trim()).length;

  // Titelrijen hebben meestal 1-2 niet-lege cellen
  if (nonEmptyCells > 2) return false;

  // Controleer of de eerste cel de meeste kolommen overspant (duidt op colspan)
  // In een genormaliseerde matrix toont dit zich als herhaalde waarden
  const firstValue = row[0];
  const repeatedCount = row.filter(cell => cell === firstValue).length;

  // Als de eerste waarde >50% van de kolommen herhaalt, is het waarschijnlijk een colspan-titel
  if (repeatedCount > totalColumns * 0.5) {
    return true;
  }

  return false;
}

Heuristiek 2: Wat Maakt dat een Rij "Op Headers Lijkt"

Headerrijen hebben kenmerken die ze onderscheiden van datarijen:

function rowLooksLikeHeaders(row) {
  if (!row || row.length === 0) return false;

  // Als gedomineerd door pure getallen, zijn het geen headers
  let numericCells = 0;
  let textCells = 0;
  let emptyCells = 0;

  for (const cell of row) {
    const value = (cell || "").trim();

    if (!value) {
      emptyCells++;
    } else if (/^-?\d+([.,]\d+)?%?$/.test(value)) {
      // Puur getal of percentage
      numericCells++;
    } else {
      textCells++;
    }
  }

  const totalNonEmpty = numericCells + textCells;
  if (totalNonEmpty === 0) return false;

  // Headers zijn voornamelijk tekst, geen getallen
  // Als >70% van niet-lege cellen numeriek is, is het waarschijnlijk data
  if (numericCells / totalNonEmpty > 0.7) {
    return false;
  }

  // Headers mogen niet grotendeels leeg zijn
  if (emptyCells / row.length > 0.7) {
    return false;
  }

  return true;
}

Heuristiek 3: Wat Maakt dat een Rij "Op Data Lijkt"

De omgekeerde controle helpt bevestigen dat we de juiste grens hebben gevonden:

function rowLooksLikeData(row) {
  if (!row || row.length === 0) return false;

  let numericCells = 0;
  let dateCells = 0;
  let totalNonEmpty = 0;

  for (const cell of row) {
    const value = (cell || "").trim();
    if (!value) continue;

    totalNonEmpty++;

    // Controleer op numerieke patronen
    if (/^-?\d+([.,]\d+)?%?$/.test(value)) {
      numericCells++;
    }

    // Controleer op datumpatronen
    if (/^\d{1,4}[-/\.]\d{1,2}[-/\.]\d{1,4}$/.test(value)) {
      dateCells++;
    }
  }

  if (totalNonEmpty === 0) return false;

  // Datarijen bevatten doorgaans numerieke of datuminhoud
  const dataLikeCells = numericCells + dateCells;
  return dataLikeCells / totalNonEmpty > 0.3;
}

Heuristiek 4: Gegroepeerde Kolomheaders Detecteren

FBREF-stijl tabellen hebben een groepheaderrij gevolgd door een subheaderrij. De groeprij heeft:

Lege cellen aan het begin (kolommen zonder groepen)
Herhaalde waarden door colspan-expansie
Meerdere unieke niet-lege waarden (niet slechts één zoals een titel)

function detectGroupHeaderRow(row, nextRow) {
  if (!row || !nextRow || row.length < 4) return false;

  // Groepheaderrijen MOETEN lege cellen aan het begin hebben
  // Dit onderscheidt ze van horizontaal gedupliceerde tabellen
  const firstCellEmpty = !(row[0] || "").trim();
  if (!firstCellEmpty) return false;

  // Tel unieke niet-lege waarden
  const uniqueValues = new Set(
    row.filter(v => v && v.trim()).map(v => v.trim().toLowerCase())
  );

  // Een titelrij heeft precies ÉÉN unieke waarde
  // Een groepheaderrij moet MEERDERE unieke waarden hebben
  if (uniqueValues.size <= 1) return false;

  // Tel opeenvolgende herhaalde waarden (duidt op colspan-expansie)
  let consecutiveRepeats = 0;
  for (let i = 1; i < row.length; i++) {
    const curr = (row[i] || "").trim();
    const prev = (row[i - 1] || "").trim();
    if (curr === prev) consecutiveRepeats++;
  }

  const repeatRatio = consecutiveRepeats / (row.length - 1);

  // Hoge herhalingsratio (>30%) suggereert colspan-expansie
  // Volgende rij moet meer unieke waarden hebben (de eigenlijke subheaders)
  const nextUniqueValues = new Set(
    nextRow.filter(v => v && v.trim()).map(v => v.trim().toLowerCase())
  );

  return repeatRatio > 0.3 && nextUniqueValues.size > uniqueValues.size;
}

Heuristiek 5: Wikipedia-Navigatieprefixen Opschonen

Wikipedia-sjablonen prefixen content vaak met "v t e" (links naar bekijken/overleg/bewerken):

function cleanWikipediaNavPrefix(text) {
  if (!text) return text;

  // Patroon 1: "v t e " aan het begin (spatie-gescheiden)
  // Patroon 2: "v | t | e " (pipe-gescheiden)
  // Patroon 3: "[v] [t] [e] " (haakje-gescheiden)

  return text
    .replace(/^\s*v\s+t\s+e\s+/i, "")
    .replace(/^\s*v\s*\|\s*t\s*\|\s*e\s+/i, "")
    .replace(/^\s*\[v\]\s*\[t\]\s*\[e\]\s+/i, "")
    .trim();
}

Alles Samenbrengen: Het Detectie-algoritme

function detectHeaderRowIndex(matrix) {
  if (!matrix || matrix.length < 2) return 0;

  const totalColumns = matrix[0]?.length || 0;

  for (let i = 0; i < Math.min(matrix.length - 1, 5); i++) {
    const currentRow = matrix[i];
    const nextRow = matrix[i + 1];

    // Sla titelrijen over
    if (isTitleRow(currentRow, totalColumns)) {
      continue;
    }

    // Controleer op gegroepeerde headers (twee niveaus)
    if (detectGroupHeaderRow(currentRow, nextRow)) {
      // De subheaderrij (i+1) is de eigenlijke header
      return i + 1;
    }

    // Controleer of deze rij op headers lijkt en de volgende op data
    if (rowLooksLikeHeaders(currentRow) && rowLooksLikeData(nextRow)) {
      return i;
    }
  }

  // Fallback: neem aan dat rij 0 de header is
  return 0;
}

Real-world Testen

Deze heuristieken zijn ontwikkeld door te testen tegen:

Wikipedia-landen/bevolkingstabellen (titelrijen + "v t e" prefixen)
FBREF-spelersstatistieken (gegroepeerde headers)
Financiële tabellen met eenheidrijen
Overheidsdatatabel met meerdere headerniveaus

Geen heuristiek is perfect. Het doel is om de gangbare patronen correct af te handelen en netjes te falen bij ongebruikelijke tabellen.

Wanneer Detectie Faalt

Voor tabellen die niet in de gangbare patronen passen, bied een handmatige override:

function extractTable(matrix, options = {}) {
  const headerRowIndex = options.headerRowIndex ?? detectHeaderRowIndex(matrix);

  const headerRow = matrix[headerRowIndex];
  const dataRows = matrix.slice(headerRowIndex + 1);

  return { headerRow, dataRows };
}

Gebruikers die hun data kennen, kunnen de headerrij expliciet opgeven.

Samenvatting

Patroon	Detectiemethode
Titelrij	Enkele cel met grote colspan
Standaard header	Rij met voornamelijk tekst, gevolgd door rij met getallen
Gegroepeerde headers	Lege eerste cellen + herhaalde waarden + meer unieke waarden in volgende rij
Wikipedia-nav	"v t e" prefix-patroon

Het kernidee: headers en data hebben verschillende kenmerken. Headers zijn tekstrijk met beschrijvende labels. Data is getallenrijk met feitelijke waarden. De grens ertussen is meestal detecteerbaar.

Lees voor meer over de specifieke uitdagingen van Wikipedia-tabellen onze gids over HTML-tabelscraping in Chrome.

Wil je automatische headerdetectie zonder code te schrijven? Meer informatie op gauchogrid.com/nl/html-table-exporter of probeer het gratis in de Chrome Web Store.

Détecter les Lignes d'En-Tête Automatiquement : Les Heuristiques du Parsing de Tableaux

circobit — Mon, 10 Aug 2026 08:00:00 +0000

La première ligne d'un tableau HTML est la ligne d'en-tête.

Sauf quand ce n'est pas le cas.

Les tableaux Wikipédia ont souvent une ligne de titre couvrant toutes les colonnes avant les vrais en-têtes. Les sites de statistiques sportives ont des en-têtes groupés où « Temps de Jeu » couvre plusieurs sous-colonnes comme « MJ », « Titulaire », « Min ». Les tableaux financiers ont des lignes d'unité (« en millions USD ») qui ressemblent à des en-têtes mais n'en sont pas.

Si vous supposez que la ligne 0 est toujours l'en-tête, vos exports seront cassés pour une portion significative des tableaux réels.

Voici comment détecter la véritable ligne d'en-tête programmatiquement.

Le Problème : Trois Types de « Premières Lignes »

Considérez ces schémas courants :

Schéma 1 : Ligne de Titre

<table>
  <tr>
    <th colspan="4">Population Mondiale par Pays</th>  <!-- Titre, pas en-tête -->
  </tr>
  <tr>
    <th>Rang</th>
    <th>Pays</th>
    <th>Population</th>
    <th>% du Monde</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Inde</td>
    <td>1 428 627 663</td>
    <td>17,85%</td>
  </tr>
</table>

La ligne 0 est un titre. La ligne 1 est l'en-tête. Les lignes 2+ sont les données.

Schéma 2 : En-Têtes Groupés (Deux Niveaux)

<table>
  <tr>
    <th></th>
    <th></th>
    <th colspan="3">Temps de Jeu</th>
    <th colspan="2">Performance</th>
  </tr>
  <tr>
    <th>Joueur</th>
    <th>Nation</th>
    <th>MJ</th>
    <th>Titulaire</th>
    <th>Min</th>
    <th>Buts</th>
    <th>PD</th>
  </tr>
  <tr>
    <td>Jean Dupont</td>
    <td>FRA</td>
    <td>34</td>
    <td>30</td>
    <td>2700</td>
    <td>12</td>
    <td>8</td>
  </tr>
</table>

La ligne 0 contient les en-têtes de groupe. La ligne 1 contient les vrais en-têtes de colonnes. Les lignes 2+ sont les données.

Schéma 3 : Préfixe de Navigation Wikipédia

<tr>
  <th colspan="3">v t e Sites du Patrimoine Mondial</th>
</tr>

Les liens « v t e » (voir/discuter/modifier) sont la navigation de modèle de Wikipédia. Ils doivent être supprimés, et la ligne pourrait être un titre plutôt qu'un en-tête.

Heuristique 1 : Détecter les Lignes de Titre

Une ligne de titre a typiquement :

Une seule cellule (ou très peu)
Un grand colspan couvrant la plupart/toutes les colonnes
Un contenu textuel qui ressemble à un titre, pas à des noms de colonnes

function isTitleRow(row, totalColumns) {
  if (!row || row.length === 0) return false;

  // Compter les cellules non vides
  const nonEmptyCells = row.filter(cell => cell && cell.trim()).length;

  // Les lignes de titre ont généralement 1-2 cellules non vides
  if (nonEmptyCells > 2) return false;

  // Vérifier si la première cellule couvre la plupart des colonnes (indique un colspan)
  // Dans une matrice normalisée, cela se traduit par des valeurs répétées
  const firstValue = row[0];
  const repeatedCount = row.filter(cell => cell === firstValue).length;

  // Si la première valeur se répète sur >50% des colonnes, c'est probablement un titre colspan
  if (repeatedCount > totalColumns * 0.5) {
    return true;
  }

  return false;
}

Heuristique 2 : Ce Qui Fait qu'une Ligne « Ressemble à des En-Têtes »

Les lignes d'en-tête ont des caractéristiques qui les distinguent des lignes de données :

function rowLooksLikeHeaders(row) {
  if (!row || row.length === 0) return false;

  let numericCells = 0;
  let textCells = 0;
  let emptyCells = 0;

  for (const cell of row) {
    const value = (cell || "").trim();

    if (!value) {
      emptyCells++;
    } else if (/^-?\d+([.,]\d+)?%?$/.test(value)) {
      // Nombre pur ou pourcentage
      numericCells++;
    } else {
      textCells++;
    }
  }

  const totalNonEmpty = numericCells + textCells;
  if (totalNonEmpty === 0) return false;

  // Les en-têtes sont principalement du texte, pas des nombres
  // Si >70% des cellules non vides sont numériques, c'est probablement des données
  if (numericCells / totalNonEmpty > 0.7) {
    return false;
  }

  // Les en-têtes ne devraient pas être majoritairement vides
  if (emptyCells / row.length > 0.7) {
    return false;
  }

  return true;
}

Heuristique 3 : Ce Qui Fait qu'une Ligne « Ressemble à des Données »

La vérification inverse aide à confirmer qu'on a trouvé la bonne frontière :

function rowLooksLikeData(row) {
  if (!row || row.length === 0) return false;

  let numericCells = 0;
  let dateCells = 0;
  let totalNonEmpty = 0;

  for (const cell of row) {
    const value = (cell || "").trim();
    if (!value) continue;

    totalNonEmpty++;

    // Vérifier les patterns numériques
    if (/^-?\d+([.,]\d+)?%?$/.test(value)) {
      numericCells++;
    }

    // Vérifier les patterns de dates
    if (/^\d{1,4}[-/\.]\d{1,2}[-/\.]\d{1,4}$/.test(value)) {
      dateCells++;
    }
  }

  if (totalNonEmpty === 0) return false;

  // Les lignes de données contiennent typiquement du contenu numérique ou des dates
  const dataLikeCells = numericCells + dateCells;
  return dataLikeCells / totalNonEmpty > 0.3;
}

Heuristique 4 : Détecter les En-Têtes de Colonnes Groupés

Les tableaux style FBREF ont une ligne d'en-tête de groupe suivie d'une ligne de sous-en-têtes. La ligne de groupe a :

Des cellules vides au début (colonnes sans groupes)
Des valeurs répétées dues à l'expansion des colspan
Plusieurs valeurs uniques non vides (pas une seule comme un titre)

function detectGroupHeaderRow(row, nextRow) {
  if (!row || !nextRow || row.length < 4) return false;

  // Les lignes d'en-tête de groupe DOIVENT avoir des cellules vides au début
  // Cela les distingue des tableaux dupliqués horizontalement
  const firstCellEmpty = !(row[0] || "").trim();
  if (!firstCellEmpty) return false;

  // Compter les valeurs uniques non vides
  const uniqueValues = new Set(
    row.filter(v => v && v.trim()).map(v => v.trim().toLowerCase())
  );

  // Une ligne de titre a exactement UNE valeur unique
  // Une ligne d'en-tête de groupe doit avoir PLUSIEURS valeurs uniques
  if (uniqueValues.size <= 1) return false;

  // Compter les répétitions consécutives (indique l'expansion de colspan)
  let consecutiveRepeats = 0;
  for (let i = 1; i < row.length; i++) {
    const curr = (row[i] || "").trim();
    const prev = (row[i - 1] || "").trim();
    if (curr === prev) consecutiveRepeats++;
  }

  const repeatRatio = consecutiveRepeats / (row.length - 1);

  // Un ratio de répétition élevé (>30%) suggère une expansion de colspan
  // La ligne suivante devrait avoir plus de valeurs uniques (les vrais sous-en-têtes)
  const nextUniqueValues = new Set(
    nextRow.filter(v => v && v.trim()).map(v => v.trim().toLowerCase())
  );

  return repeatRatio > 0.3 && nextUniqueValues.size > uniqueValues.size;
}

Heuristique 5 : Nettoyer les Préfixes de Navigation Wikipédia

Les modèles Wikipédia préfixent souvent le contenu avec « v t e » (liens vers voir/discuter/modifier le modèle) :

function cleanWikipediaNavPrefix(text) {
  if (!text) return text;

  // Pattern 1 : "v t e " au début (séparés par des espaces)
  // Pattern 2 : "v | t | e " (séparés par des barres)
  // Pattern 3 : "[v] [t] [e] " (séparés par des crochets)

  return text
    .replace(/^\s*v\s+t\s+e\s+/i, "")
    .replace(/^\s*v\s*\|\s*t\s*\|\s*e\s+/i, "")
    .replace(/^\s*\[v\]\s*\[t\]\s*\[e\]\s+/i, "")
    .trim();
}

Assembler le Tout : L'Algorithme de Détection

function detectHeaderRowIndex(matrix) {
  if (!matrix || matrix.length < 2) return 0;

  const totalColumns = matrix[0]?.length || 0;

  for (let i = 0; i < Math.min(matrix.length - 1, 5); i++) {
    const currentRow = matrix[i];
    const nextRow = matrix[i + 1];

    // Ignorer les lignes de titre
    if (isTitleRow(currentRow, totalColumns)) {
      continue;
    }

    // Vérifier les en-têtes groupés (deux niveaux)
    if (detectGroupHeaderRow(currentRow, nextRow)) {
      // La ligne de sous-en-têtes (i+1) est le vrai en-tête
      return i + 1;
    }

    // Vérifier si cette ligne ressemble à des en-têtes et la suivante à des données
    if (rowLooksLikeHeaders(currentRow) && rowLooksLikeData(nextRow)) {
      return i;
    }
  }

  // Par défaut : supposer que la ligne 0 est l'en-tête
  return 0;
}

Tests en Conditions Réelles

Ces heuristiques ont été développées en testant contre :

Les tableaux pays/population de Wikipédia (lignes de titre + préfixes « v t e »)
Les statistiques de joueurs FBREF (en-têtes groupés)
Les tableaux financiers avec lignes d'unité
Les tableaux de données gouvernementales avec plusieurs niveaux d'en-têtes

Aucune heuristique n'est parfaite. L'objectif est de gérer correctement les schémas courants et d'échouer gracieusement sur les tableaux inhabituels.

Quand la Détection Échoue

Pour les tableaux qui ne correspondent pas aux schémas courants, fournissez un remplacement manuel :

function extractTable(matrix, options = {}) {
  const headerRowIndex = options.headerRowIndex ?? detectHeaderRowIndex(matrix);

  const headerRow = matrix[headerRowIndex];
  const dataRows = matrix.slice(headerRowIndex + 1);

  return { headerRow, dataRows };
}

Les utilisateurs qui connaissent leurs données peuvent spécifier la ligne d'en-tête explicitement.

Résumé

Schéma	Méthode de Détection
Ligne de titre	Cellule unique avec grand colspan
En-tête standard	Ligne avec principalement du texte, suivie d'une ligne avec des nombres
En-têtes groupés	Premières cellules vides + valeurs répétées + plus de valeurs uniques dans la ligne suivante
Navigation Wikipédia	Pattern de préfixe « v t e »

L'idée clé : les en-têtes et les données ont des caractéristiques différentes. Les en-têtes sont riches en texte avec des libellés descriptifs. Les données sont riches en nombres avec des valeurs réelles. La frontière entre les deux est généralement détectable.

Pour en savoir plus sur les défis spécifiques des tableaux Wikipédia, consultez notre guide sur les scraper de tableaux HTML pour Chrome.

Besoin de détection automatique des en-têtes sans écrire de code ? En savoir plus sur gauchogrid.com/fr/html-table-exporter ou essayez-le gratuitement sur le Chrome Web Store.

Normalização de Números para Dados Internacionais: Um Guia Prático

circobit — Thu, 06 Aug 2026 12:00:00 +0000

Você exporta uma tabela de um site alemão. A coluna de receita mostra "1.234,56 €".

Você cola no Excel. Vira "1.23456E" ou, pior, uma data.

Bem-vindo ao problema de formato numérico internacional.

O Problema Central: O Que "1.234" Significa?

Nos EUA e Reino Unido: 1.234 = um ponto dois três quatro (decimal)

Na Alemanha, Espanha e maior parte da América Latina: 1.234 = mil duzentos e trinta e quatro

Mesmos caracteres. Valores completamente diferentes.

Ao extrair dados de sites internacionais, você não pode assumir qual formato está sendo usado. E errar significa que sua análise estará errada por ordens de grandeza.

A Ambiguidade dos Três Dígitos

O caso mais difícil é exatamente três dígitos após um separador.

Entrada	Interpretação EUA	Interpretação UE
1.234	1.234 (decimal)	1.234 (milhares)
1,234	1,234 (milhares)	1.234 (decimal)
1.234.567	Inválido	1.234.567
1,234,567	1,234,567	Inválido

Com dois dígitos depois, é claramente decimal: "1.23" ou "1,23".
Com quatro ou mais dígitos depois, é claramente decimal: "3.14159".
Com três dígitos? Pode ser qualquer um.

O Algoritmo de Detecção

Aqui está uma abordagem heurística que lida com a maioria dos casos do mundo real:

function normalizeNumberString(value) {
  if (typeof value !== "string") return value;
  const v = value.trim();
  if (!v || !/[0-9]/.test(v)) return value;

  // Passo 1: Limpar símbolos de moeda, porcentagens, espaços
  let cleaned = v
    .replace(/&nbsp;/g, " ")
    .replace(/^(USD|EUR|GBP|R\$|MXN)\s*/i, "")
    .replace(/[$€£¥₹₽₩]/g, "")
    .replace(/%/g, "")
    .replace(/\s+/g, "");

  // Passo 2: Tratar sinais negativos
  const isNegative = cleaned.match(/^-/);
  if (isNegative) {
    cleaned = cleaned.substring(1).trim();
  }

  // Passo 3: Apenas dígitos? Pronto
  if (/^\d+$/.test(cleaned)) {
    return isNegative ? `-${cleaned}` : cleaned;
  }

  // Passo 4: Detectar separadores
  const hasComma = cleaned.includes(",");
  const hasDot = cleaned.includes(".");

  // Passo 5: Aplicar heurística
  let decimalSeparator = ".";
  let thousandsSeparator = ",";

  if (hasComma && hasDot) {
    // Ambos presentes: o último é decimal
    const lastComma = cleaned.lastIndexOf(",");
    const lastDot = cleaned.lastIndexOf(".");

    if (lastComma > lastDot) {
      decimalSeparator = ",";
      thousandsSeparator = ".";
    }
  } else if (hasComma && !hasDot) {
    const parts = cleaned.split(",");

    if (parts.length === 2 && parts[1].length <= 2) {
      // "1,23" → decimal
      decimalSeparator = ",";
    } else {
      // "1,234" ou "1,234,567" → milhares
      decimalSeparator = null;
      thousandsSeparator = ",";
    }
  } else if (hasDot && !hasComma) {
    const parts = cleaned.split(".");

    if (parts.length === 2) {
      const afterDot = parts[1];

      if (afterDot.length <= 2 || afterDot.length >= 4) {
        // "1.23" ou "3.14159" → decimal
        decimalSeparator = ".";
      } else {
        // "1.234" → MILHARES (escolha pragmática para tabelas)
        decimalSeparator = null;
        thousandsSeparator = ".";
      }
    } else {
      // Múltiplos pontos → milhares
      decimalSeparator = null;
      thousandsSeparator = ".";
    }
  }

  // Passo 6: Limpar separadores de milhares
  if (thousandsSeparator) {
    cleaned = cleaned.replace(new RegExp(`\\${thousandsSeparator}`, "g"), "");
  }

  // Passo 7: Normalizar decimal para ponto
  if (decimalSeparator && decimalSeparator !== ".") {
    cleaned = cleaned.replace(decimalSeparator, ".");
  }

  // Passo 8: Validar
  const num = Number(cleaned);
  if (!Number.isFinite(num)) return value;

  return isNegative ? `-${cleaned}` : cleaned;
}

Por Que Três Dígitos = Milhares

A decisão-chave: quando vemos exatamente três dígitos após um único separador (como "1.234"), interpretamos como milhares, não decimal.

Por quê? Em tabelas HTML:

Dados financeiros com milhares são extremamente comuns: $1.234, €1.234
Decimais com exatamente três dígitos são raros na prática
Dados científicos com três decimais (como "3.141") geralmente são escritos como "3.14159" ou simplesmente "3.14"

Essa heurística é um trade-off pragmático que funciona para a maioria das tabelas do mundo real.

A Matriz Completa de Formatos

Entrada	Interpretação	Saída Normalizada
1.234,56	Decimal UE	1234.56
1,234.56	Decimal EUA	1234.56
1.234.567,89	UE milhares + decimal	1234567.89
1,234,567.89	EUA milhares + decimal	1234567.89
1.234	Milhares	1234
1,234	Milhares	1234
3.14	Decimal	3.14
3,14	Decimal	3.14
3.14159	Decimal (4+ dígitos)	3.14159
$ 1.200,50	Moeda + UE	1200.50
-5.000	Milhares negativos	-5000
12.5%	Porcentagem	12.5

Tratando Códigos de Moeda

Dados internacionais vêm com prefixos e sufixos de moeda. Limpe-os primeiro:

// Remover códigos de moeda ANTES dos símbolos
.replace(/^(USD|EUR|GBP|JPY|CHF|CAD|AUD|CNY|INR|BRL|R\$|MXN|KRW)\s*/i, "")
// Depois remover símbolos
.replace(/[$€£¥₹₽₩₪฿₫₴₦]/g, "")

A ordem importa: "R$" (Real brasileiro) contém "$", então remover códigos de moeda primeiro evita correspondências parciais.

Quando a Heurística Falha

Nenhuma heurística é perfeita. Você terá resultados incorretos quando:

Dados científicos com exatamente 3 decimais: "3.141" vira "3141"
Preços abaixo de $10 com 3 casas decimais: "$1.234" vira "$1234"
Formatos mistos em uma coluna: Algumas linhas UE, algumas linhas EUA

Para o caso 3, você precisa de detecção de formato no nível da coluna:

function detectColumnFormat(values) {
  let euIndicators = 0;
  let usIndicators = 0;

  for (const v of values) {
    if (/\d\.\d{3},\d{2}$/.test(v)) euIndicators++;
    if (/\d,\d{3}\.\d{2}$/.test(v)) usIndicators++;
  }

  if (euIndicators > usIndicators) return "eu";
  if (usIndicators > euIndicators) return "us";
  return "auto"; // Usar heurística por célula
}

Perfis de Exportação para Diferentes Regiões

Quando você conhece o país de origem, pode evitar a ambiguidade inteiramente usando perfis específicos por região:

Formato europeu: Assume vírgula como separador decimal, usa ponto e vírgula como delimitador CSV
Formato EUA/UK: Assume ponto como separador decimal, usa vírgula como delimitador CSV

O HTML Table Exporter inclui perfis pré-configurados para ambos os formatos, além de perfis especializados para ferramentas como Pandas e DuckDB.

Armadilhas Comuns

Não Perca Precisão

// Errado: perde precisão em números grandes
const num = parseFloat("12345678901234567890");
// 12345678901234567000 (limite do JavaScript)

// Melhor: manter como string até o cálculo final
const cleaned = normalizeNumberString(value);
// Só usar parseFloat quando precisar calcular

Cuidado com Entidades HTML

Tabelas web às vezes contêm   (espaço não quebrável) dentro de números:

// "1&nbsp;234&nbsp;567" deve virar "1234567"
.replace(/&nbsp;/g, " ")
.replace(/\s+/g, "")

Preserve o Original Quando Houver Dúvida

Se o valor não parece um número, retorne-o inalterado:

if (!/[0-9]/.test(v)) return value;
// ...
if (!Number.isFinite(num)) return value;

Melhor deixar "N/A" como "N/A" do que tentar interpretá-lo.

Resumo

Cenário	Detecção	Notas
Ambos . e ,	O último = decimal	Universal
Apenas vírgula, ≤2 dígitos depois	Decimal	"1,23"
Apenas vírgula, 3+ dígitos depois	Milhares	"1,234"
Apenas ponto, ≤2 ou 4+ dígitos	Decimal	"1.23", "3.14159"
Apenas ponto, exatamente 3 dígitos	Milhares	"1.234"

O caso de três dígitos é o trade-off pragmático. Funciona para a maioria dos dados do mundo real. Na dúvida, use um perfil de exportação que corresponda à sua região de origem.

Para saber mais sobre como copiar dados de sites para Excel sem problemas de formatação, veja nosso guia sobre as melhores extensões Chrome para exportar tabelas.

Precisa de exportações numéricas limpas sem adivinhação? Saiba mais em gauchogrid.com/pt-br/html-table-exporter ou experimente gratuitamente na Chrome Web Store.

Cómo Manejo Rowspans y Colspans en la Extracción de Tablas

circobit — Wed, 05 Aug 2026 13:30:00 +0000

Las tablas con celdas combinadas están en todos lados. Wikipedia las usa. Los sitios de estadísticas deportivas las usan. Los reportes financieros las usan.

Y rompen casi todos los scrapers de tablas que vi.

Este es el problema: cuando iteras elementos <tr> y <td>, obtienes lo que está en el HTML — no lo que se renderiza visualmente. Una celda con rowspan="3" aparece una vez en el HTML pero ocupa tres filas en la salida.

El enfoque ingenuo falla silenciosamente. Obtienes columnas desalineadas, datos faltantes y exportaciones que no se parecen en nada a la tabla original.

Aquí te muestro cómo solucionarlo.

El Problema: HTML No Coincide con la Grilla

Considerá esta tabla simple con una celda combinada:

<table>
  <tr>
    <td rowspan="2">A</td>
    <td>B</td>
  </tr>
  <tr>
    <td>C</td>
  </tr>
</table>

Representación visual:

| A | B |
|   | C |

Pero si extraés celdas ingenuamente iterando filas:

// Enfoque incorrecto
table.querySelectorAll('tr').forEach(row => {
  const cells = row.querySelectorAll('td');
  console.log(cells.map(c => c.textContent));
});
// Resultado: ["A", "B"], ["C"]
// Esperado: ["A", "B"], ["A", "C"]

La fila 2 pierde la "A" que visualmente se extiende hacia ella.

La Solución: Construir una Matriz

El enfoque correcto es pre-asignar una grilla 2D y llenarla según los atributos de span.

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

  rows.forEach((rowEl, rowIndex) => {
    if (!grid[rowIndex]) grid[rowIndex] = [];
    const gridRow = grid[rowIndex];

    let colIndex = 0;

    // Saltar columnas ya ocupadas por rowspans de filas anteriores
    while (gridRow[colIndex] !== undefined) {
      colIndex++;
    }

    const cells = Array.from(rowEl.cells);

    cells.forEach((cell) => {
      // Avanzar pasando celdas ocupadas
      while (gridRow[colIndex] !== undefined) {
        colIndex++;
      }

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

      // Llenar el bloque que esta celda abarca
      for (let r = 0; r < rowSpan; r++) {
        const targetRowIndex = rowIndex + r;
        if (!grid[targetRowIndex]) grid[targetRowIndex] = [];

        for (let c = 0; c < colSpan; c++) {
          const targetColIndex = colIndex + c;
          if (grid[targetRowIndex][targetColIndex] === undefined) {
            grid[targetRowIndex][targetColIndex] = text;
          }
        }
      }

      colIndex += colSpan;
    });
  });

  return grid;
}

Ahora la salida coincide con la tabla visual:

const matrix = extractTableMatrix(table);
// [["A", "B"], ["A", "C"]]

Por Qué Importa: Ejemplos Reales

Tablas de Países en Wikipedia

Wikipedia usa celdas combinadas extensamente. Una tabla listando países por región podría tener:

<tr>
  <td rowspan="5">Europa</td>
  <td>Francia</td>
</tr>
<tr>
  <td>Alemania</td>
</tr>
<!-- ... -->

Sin manejo adecuado, pierdes la asociación "Europa" para las filas 2-5.

Sitios de Estadísticas Deportivas

Sitios como FBREF usan tanto rowspan COMO colspan. Las tablas de estadísticas de jugadores tienen:

Encabezados agrupados con colspan (Tiempo de Juego → PJ | Titular | Min)
Filas de resumen con rowspan abarcando detalles de jugadores

Un scraper ingenuo exporta basura. Un enfoque basado en matriz preserva la estructura.

Reportes Financieros

Los reportes trimestrales suelen tener:

<td colspan="4">2024</td>
<!-- Luego: Q1, Q2, Q3, Q4 -->

El encabezado del año necesita propagarse a las cuatro columnas de trimestres.

Casos Extremos a Manejar

Celdas Vacías en el Medio

A veces las celdas están genuinamente vacías. No confundas esto con "aún no llenada por un span".

// Normalizar al mismo número de columnas
const maxCols = grid.reduce((max, row) => 
  Math.max(max, row ? row.length : 0), 0
);

const normalized = grid.map(row => {
  const r = row || [];
  const out = new Array(maxCols);
  for (let i = 0; i < maxCols; i++) {
    out[i] = r[i] != null ? r[i] : "";
  }
  return out;
});

Tablas Anidadas

Las tablas dentro de celdas generan ruido. La mayoría de las veces, quieres el contenido de texto de la tabla anidada, no una extracción recursiva.

function extractCellText(cell) {
  const clone = cell.cloneNode(true);

  // Remover tablas anidadas, scripts, estilos
  clone.querySelectorAll("table, script, style, noscript")
    .forEach(el => el.remove());

  return clone.textContent.replace(/\s+/g, " ").trim();
}

Colspan + Rowspan Combinados

El algoritmo maneja esto naturalmente — solo estás llenando un rectángulo más grande en la grilla.

<td rowspan="2" colspan="3">Celda Grande</td>

Llena un bloque de 2×3 con el mismo valor.

Cuándo Usar una Herramienta

Escribir esto desde cero es educativo pero consume tiempo. Para uso en producción, considerá:

HTML Table Exporter — Extensión de navegador que maneja estos casos extremos automáticamente
Pandas read_html() — Funciona pero tiene problemas con tablas anidadas complejas
Beautiful Soup — Requiere manejo manual de spans

El Algoritmo Completo

Aquí está la versión de producción con todos los casos extremos manejados:

function extractCellText(cell) {
  if (!cell) return "";
  const clone = cell.cloneNode(true);

  // Remover elementos que contienen contenido no visible
  const invisibleSelectors = "style, script, noscript, template, link";
  clone.querySelectorAll(invisibleSelectors).forEach(el => el.remove());

  const text = clone.textContent || "";
  return text.replace(/\s+/g, " ").trim();
}

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

  rows.forEach((rowEl, rowIndex) => {
    if (!grid[rowIndex]) grid[rowIndex] = [];
    const gridRow = grid[rowIndex];

    let colIndex = 0;

    while (gridRow[colIndex] !== undefined) {
      colIndex++;
    }

    const cells = Array.from(rowEl.cells);

    cells.forEach((cell) => {
      while (gridRow[colIndex] !== undefined) {
        colIndex++;
      }

      const text = extractCellText(cell);
      const rowSpan = parseInt(cell.rowSpan, 10) || 1;
      const colSpan = parseInt(cell.colSpan, 10) || 1;

      for (let r = 0; r < rowSpan; r++) {
        const targetRowIndex = rowIndex + r;
        if (!grid[targetRowIndex]) grid[targetRowIndex] = [];
        const targetRow = grid[targetRowIndex];

        for (let c = 0; c < colSpan; c++) {
          const targetColIndex = colIndex + c;
          if (targetRow[targetColIndex] === undefined) {
            targetRow[targetColIndex] = text;
          }
        }
      }

      colIndex += colSpan;
    });
  });

  // Normalizar todas las filas al mismo largo
  const maxCols = grid.reduce((max, row) => 
    Math.max(max, row ? row.length : 0), 0
  );

  return grid.map(row => {
    const r = row || [];
    const out = new Array(maxCols);
    for (let i = 0; i < maxCols; i++) {
      out[i] = r[i] != null ? r[i] : "";
    }
    return out;
  });
}

Resumen

Enfoque	Maneja Spans	Listo para Producción
Iteración ingenua	❌	❌
Matriz con spans	✅	✅
Pandas read_html	Parcial	Depende
Extensión de navegador	✅	✅

La idea clave: pensá en las tablas como grillas, no como elementos HTML anidados. Construí la grilla primero, después exportá.

Para más sobre exportar las tablas particularmente complicadas de Wikipedia, consulta nuestra guía sobre exportar tablas de Wikipedia a Excel.

¿Necesitas extraer tablas sin escribir código? Conoce más en gauchogrid.com/es/html-table-exporter o pruébalo gratis en la Chrome Web Store.

国際データの数値正規化：実践ガイド

circobit — Wed, 05 Aug 2026 00:00:00 +0000

ドイツのWebサイトからテーブルをエクスポートした。売上列には「1.234,56 €」と表示されている。

それをExcelに貼り付けると、「1.23456E」になるか、もっと悪い場合は日付になる。

国際的な数値フォーマット問題へようこそ。

根本的な問題：「1.234」とは何を意味するか？

米国と英国では：1.234 = 1.234（小数）

ドイツ、スペイン、ラテンアメリカの大部分では：1.234 = 1234（千の位の区切り）

同じ文字。まったく異なる値。

国際的なWebサイトからデータを抽出する際、どちらのフォーマットか仮定することはできません。間違えると、分析結果が桁違いにずれます。

3桁の曖昧さ

最も難しいケースは、区切り文字の後にちょうど3桁ある場合です。

入力	US式の解釈	EU式の解釈
1.234	1.234（小数）	1,234（千の位）
1,234	1,234（千の位）	1.234（小数）
1.234.567	無効	1,234,567
1,234,567	1,234,567	無効

区切り文字の後が2桁なら、明らかに小数：「1.23」や「1,23」。
4桁以上なら、明らかに小数：「3.14159」。
3桁の場合は？どちらにもなりえます。

検出アルゴリズム

ほとんどの実世界のケースに対応するヒューリスティックアプローチ：

function normalizeNumberString(value) {
  if (typeof value !== "string") return value;
  const v = value.trim();
  if (!v || !/[0-9]/.test(v)) return value;

  // ステップ1：通貨記号、パーセント、空白をクリーニング
  let cleaned = v
    .replace(/&nbsp;/g, " ")
    .replace(/^(USD|EUR|GBP|R\$|MXN)\s*/i, "")
    .replace(/[$€£¥₹₽₩]/g, "")
    .replace(/%/g, "")
    .replace(/\s+/g, "");

  // ステップ2：マイナス記号の処理
  const isNegative = cleaned.match(/^-/);
  if (isNegative) {
    cleaned = cleaned.substring(1).trim();
  }

  // ステップ3：純粋な数字のみ？完了
  if (/^\d+$/.test(cleaned)) {
    return isNegative ? `-${cleaned}` : cleaned;
  }

  // ステップ4：区切り文字を検出
  const hasComma = cleaned.includes(",");
  const hasDot = cleaned.includes(".");

  // ステップ5：ヒューリスティックを適用
  let decimalSeparator = ".";
  let thousandsSeparator = ",";

  if (hasComma && hasDot) {
    // 両方存在：最後のものが小数点
    const lastComma = cleaned.lastIndexOf(",");
    const lastDot = cleaned.lastIndexOf(".");

    if (lastComma > lastDot) {
      decimalSeparator = ",";
      thousandsSeparator = ".";
    }
  } else if (hasComma && !hasDot) {
    const parts = cleaned.split(",");

    if (parts.length === 2 && parts[1].length <= 2) {
      // "1,23" → 小数
      decimalSeparator = ",";
    } else {
      // "1,234" or "1,234,567" → 千の位
      decimalSeparator = null;
      thousandsSeparator = ",";
    }
  } else if (hasDot && !hasComma) {
    const parts = cleaned.split(".");

    if (parts.length === 2) {
      const afterDot = parts[1];

      if (afterDot.length <= 2 || afterDot.length >= 4) {
        // "1.23" or "3.14159" → 小数
        decimalSeparator = ".";
      } else {
        // "1.234" → 千の位（テーブル向けの実用的な選択）
        decimalSeparator = null;
        thousandsSeparator = ".";
      }
    } else {
      // 複数のドット → 千の位
      decimalSeparator = null;
      thousandsSeparator = ".";
    }
  }

  // ステップ6：千の位区切りを除去
  if (thousandsSeparator) {
    cleaned = cleaned.replace(new RegExp(`\\${thousandsSeparator}`, "g"), "");
  }

  // ステップ7：小数点をドットに正規化
  if (decimalSeparator && decimalSeparator !== ".") {
    cleaned = cleaned.replace(decimalSeparator, ".");
  }

  // ステップ8：検証
  const num = Number(cleaned);
  if (!Number.isFinite(num)) return value;

  return isNegative ? `-${cleaned}` : cleaned;
}

なぜ3桁 = 千の位なのか

重要な判断：区切り文字の後にちょうど3桁ある場合（例：「1.234」）、小数ではなく千の位として解釈します。

なぜか？HTMLテーブルでは：

千の位を含む金融データは非常に一般的：$1.234、€1.234
ちょうど3桁の小数は実際にはまれ
3桁の小数を持つ科学的データ（例：「3.141」）は通常「3.14159」または「3.14」と書かれる

このヒューリスティックは、実世界のテーブルの大多数に対して機能する実用的なトレードオフです。

完全なフォーマット対応表

入力	解釈	正規化後の出力
1.234,56	EU式小数	1234.56
1,234.56	US式小数	1234.56
1.234.567,89	EU式千の位 + 小数	1234567.89
1,234,567.89	US式千の位 + 小数	1234567.89
1.234	千の位	1234
1,234	千の位	1234
3.14	小数	3.14
3,14	小数	3.14
3.14159	小数（4桁以上）	3.14159
$ 1.200,50	通貨 + EU式	1200.50
-5.000	負の千の位	-5000
12.5%	パーセンテージ	12.5

通貨コードの処理

国際データには通貨の接頭辞と接尾辞が付きます。先にクリーニングしましょう：

// 記号の前に通貨コードを除去
.replace(/^(USD|EUR|GBP|JPY|CHF|CAD|AUD|CNY|INR|BRL|R\$|MXN|KRW)\s*/i, "")
// その後に記号を除去
.replace(/[$€£¥₹₽₩₪฿₫₴₦]/g, "")

順序が重要です：「R$」（ブラジルレアル）には「$」が含まれるため、通貨コードを先に除去することで部分一致を防ぎます。

ヒューリスティックが失敗する場合

完璧なヒューリスティックはありません。以下の場合に不正確な結果になります：

ちょうど3桁の小数を持つ科学データ：「3.141」が「3141」になる
3桁の小数を持つ10ドル未満の価格：「$1.234」が「$1234」になる
1つの列にフォーマットが混在：一部の行がEU式、一部がUS式

ケース3では、列レベルのフォーマット検出が必要です：

function detectColumnFormat(values) {
  let euIndicators = 0;
  let usIndicators = 0;

  for (const v of values) {
    if (/\d\.\d{3},\d{2}$/.test(v)) euIndicators++;
    if (/\d,\d{3}\.\d{2}$/.test(v)) usIndicators++;
  }

  if (euIndicators > usIndicators) return "eu";
  if (usIndicators > euIndicators) return "us";
  return "auto"; // セルごとのヒューリスティックを使用
}

地域別のエクスポートプロファイル

ソース国がわかっている場合、地域固有のプロファイルを使うことで曖昧さを完全に回避できます：

ヨーロッパ式：カンマを小数点として仮定、CSVのデリミタにセミコロンを使用
米国/英国式：ドットを小数点として仮定、CSVのデリミタにカンマを使用

HTML Table Exporterには両方のフォーマット用のプリセットプロファイルと、PandasやDuckDB用の専用プロファイルが含まれています。

よくある落とし穴

精度を失わない

// 間違い：大きな数値で精度を失う
const num = parseFloat("12345678901234567890");
// 12345678901234567000（JavaScriptの限界）

// 正しい：最終計算まで文字列として保持
const cleaned = normalizeNumberString(value);
// 計算が必要な時だけparseFloat

HTMLエンティティに注意

Webテーブルには数値内に  （ノーブレークスペース）が含まれることがあります：

// "1&nbsp;234&nbsp;567" は "1234567" になるべき
.replace(/&nbsp;/g, " ")
.replace(/\s+/g, "")

不確実な場合は元の値を保持

値が数値に見えない場合は、変更せずに返す：

if (!/[0-9]/.test(v)) return value;
// ...
if (!Number.isFinite(num)) return value;

「N/A」を「N/A」のまま残す方が、パースを試みるよりも良い。

まとめ

シナリオ	検出方法	備考
. と , の両方	最後のもの = 小数点	普遍的
カンマのみ、後ろ2桁以下	小数	"1,23"
カンマのみ、後ろ3桁以上	千の位	"1,234"
ドットのみ、後ろ2桁以下または4桁以上	小数	"1.23", "3.14159"
ドットのみ、後ろちょうど3桁	千の位	"1.234"

3桁のケースが実用的なトレードオフです。ほとんどの実データに対して機能します。迷ったら、ソース地域に合ったエクスポートプロファイルを使いましょう。

WebサイトからExcelにデータをフォーマットの問題なくコピーする方法については、WebサイトからExcelにテーブルをコピーする方法のガイドをご覧ください。

推測なしでクリーンな数値エクスポートが必要ですか？gauchogrid.com/ja/html-table-exporterで詳細を確認するか、Chrome ウェブストアで無料でお試しください。

HTML-Tabellen mit versteckten Daten: Scrapen, was man nicht sieht

circobit — Tue, 04 Aug 2026 07:30:00 +0000

Die Tabelle zeigt 10 Spalten. Man exportiert sie. Die CSV hat 10 Spalten.

Aber die Seite hat 15 Spalten an Daten. Wo sind die anderen 5 geblieben?

HTML-Tabellen enthalten oft mehr Daten als sichtbar. Versteckte Spalten, Data-Attribute, eingeklappte Zeilen — alles unsichtbar für einfache Extraktionsmethoden.

So findet und extrahiert man die Daten, die man nicht sieht.

Arten versteckter Daten

1. CSS-versteckte Spalten

Der einfachste Fall: Spalten existieren im DOM, sind aber per CSS versteckt.

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

Oder über Klassen:

.hidden-column { display: none; }

Warum Websites das machen: Mobile Responsiveness (Spalten auf kleinen Bildschirmen ausblenden), interne Daten für JavaScript, schrittweise Offenlegung.

Wie man es erkennt: DevTools öffnen, die Tabelle inspizieren, nach Zellen mit display: none oder visibility: hidden suchen.

2. Data-Attribute

HTML5 erlaubt benutzerdefinierte data-* Attribute auf jedem Element. Tabellen nutzen diese, um Metadaten zu speichern, auf die JavaScript zugreift, die der Nutzer aber nicht sieht.

<tr data-id="12345" data-category="elektronik" data-stock="47">
  <td>Laptop</td>
  <td>999 €</td>
</tr>

Die sichtbare Tabelle zeigt „Laptop" und „999 €". Aber die Zeile trägt drei zusätzliche Datenpunkte.

Häufige Data-Attribute:

data-id — interner Bezeichner
data-sort-value — numerischer Wert zum Sortieren (wenn die Anzeige „Jan 2024" zeigt, aber die Sortierung 202401 braucht)
data-raw — unformatierter Wert (wenn die Anzeige „1,2 Mio. €" zeigt, aber der Wert 1200000 ist)
data-href — Link-URL

3. Title- und Tooltip-Attribute

Das title-Attribut liefert Hover-Text, der oft zusätzliche Informationen enthält.

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

Die Zelle zeigt „15. Jan". Der vollständige Zeitstempel steckt im Tooltip.

4. Eingeklappte/Erweiterbare Zeilen

Tabellen mit Drill-Down-Funktionalität verstecken Detailzeilen, bis man klickt.

<tr class="parent-row">
  <td>Kategorie A</td>
  <td>50.000 €</td>
</tr>
<tr class="child-row" style="display: none;">
  <td>— Unterkategorie A1</td>
  <td>30.000 €</td>
</tr>
<tr class="child-row" style="display: none;">
  <td>— Unterkategorie A2</td>
  <td>20.000 €</td>
</tr>

Die Daten existieren. Sie sind nur nicht aufgeklappt.

5. Lazy-Loaded-Inhalte

Manche Tabellen zeigen eine Teilmenge und laden mehr per JavaScript, wenn man scrollt oder auf „Mehr laden" klickt.

<table id="results">
  <!-- Erste 20 Zeilen gerendert -->
</table>
<button onclick="loadMore()">Mehr Ergebnisse anzeigen</button>

Die restlichen Daten sind nicht im DOM, bis man das Laden auslöst.

Versteckte Daten extrahieren

CSS-versteckte Spalten extrahieren

Mit JavaScript (in der Browser-Konsole):

// display:none von allen Zellen entfernen
document.querySelectorAll('td, th').forEach(el => {
  el.style.display = '';
});

Jetzt normal exportieren — die Spalten sind sichtbar.

Mit Python + BeautifulSoup:

BeautifulSoup ignoriert CSS. Es extrahiert alle Elemente unabhängig von der Sichtbarkeit.

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)  # Enthält versteckte Spalten

Data-Attribute extrahieren

JavaScript-Ansatz:

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

rows.forEach(row => {
  const rowData = {
    // Sichtbarer Text
    cells: Array.from(row.querySelectorAll('td')).map(td => td.textContent),
    // Data-Attribute
    id: row.dataset.id,
    category: row.dataset.category,
    stock: row.dataset.stock
  };
  data.push(rowData);
});

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

Python-Ansatz:

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

    # Zellentext holen
    cells = [td.get_text(strip=True) for td in row.find_all('td')]

    print(f"Daten: {attrs}, Zellen: {cells}")

Title-Attribute extrahieren

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

Eingeklappte Zeilen expandieren

Option 1: Alle Expander klicken

// Alle Expand-Buttons finden und klicken
document.querySelectorAll('.expand-btn, .toggle-row').forEach(btn => {
  btn.click();
});

// Auf DOM-Update warten, dann exportieren
setTimeout(() => {
  // Export-Logik hier
}, 1000);

Option 2: Hidden-Klasse entfernen

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

Lazy Load auslösen

Das ist kniffliger — man muss die Aktion simulieren, die das Laden auslöst.

// Zum Ende scrollen, um Infinite Scroll auszulösen
window.scrollTo(0, document.body.scrollHeight);

// Oder "Mehr laden" wiederholt klicken
const loadMore = document.querySelector('.load-more-btn');
while (loadMore && !loadMore.disabled) {
  loadMore.click();
  await new Promise(r => setTimeout(r, 500)); // Auf Laden warten
}

Praxisbeispiel: Sort-Werte

Sportstatistik-Tabellen zeigen oft formatierte Zahlen, sortieren aber nach Rohwerten.

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

Wenn man nur den sichtbaren Text extrahiert, bekommt man formatierte Strings, die sich nicht sortieren oder berechnen lassen.

Extraktion mit beiden Werten:

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

Wann Browser-Erweiterungen helfen

Gute Tabellenexport-Tools erledigen einiges davon automatisch:

CSS-versteckte Spalten können per Option einbezogen werden
Data-Attribute können als zusätzliche Spalten extrahiert werden
Zahlennormalisierung kann „1,23 Mio. €" in 1230000 umwandeln

HTML Table Exporter extrahiert sichtbare Inhalte mit korrekter Behandlung zusammengeführter Zellen und Formatierung. Für komplexere Extraktionsanforderungen ohne Code siehe unseren Leitfaden zu HTML-Tabellen-Scrapern für Chrome.

Für Data-Attribute und tief versteckte Inhalte benötigt man möglicherweise die oben gezeigten JavaScript-Ansätze.

Der Inspektions-Workflow

Vor dem Extrahieren jeder Tabelle:

DevTools öffnen (F12)
Das Tabellenelement inspizieren
Prüfen auf:
- display: none bei Spalten
- data-* Attribute auf Zeilen/Zellen
- title-Attribute mit Zusatzinfos
- Versteckte Kindzeilen
- „Mehr laden"-Buttons
Entscheiden: Reichen die sichtbaren Daten, oder braucht man die versteckten Daten?

Meistens reichen die sichtbaren Daten. Aber wenn nicht, macht das Wissen, wie man versteckte Daten findet und extrahiert, den entscheidenden Unterschied.

Zusammenfassung

HTML-Tabellen können mehrere Datenschichten enthalten:

Schicht	Zugriffsmethode
Sichtbarer Text	Standard-Export
CSS-versteckte Spalten	display:none entfernen oder BeautifulSoup verwenden
Data-Attribute	JavaScript dataset oder Python attrs
Title/Tooltips	title-Attribut extrahieren
Eingeklappte Zeilen	Expandieren oder Hidden-Klasse entfernen
Lazy-Loaded	Laden zuerst auslösen

Die Daten sind meistens da. Man muss nur wissen, wo man suchen muss.

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

국제 데이터를 위한 숫자 정규화: 실용 가이드

circobit — Tue, 04 Aug 2026 00:30:00 +0000

독일 웹사이트에서 테이블을 내보냅니다. 매출 열에 "1.234,56 €"가 표시됩니다.

Excel에 붙여넣습니다. "1.23456E"가 되거나, 더 나쁜 경우 날짜가 됩니다.

국제 숫자 형식 문제에 오신 것을 환영합니다.

핵심 문제: "1.234"는 무엇을 의미하는가?

미국과 영국: 1.234 = 일 점 이삼사 (소수)

독일, 스페인, 대부분의 라틴 아메리카: 1.234 = 천이백삼십사 (천 단위)

같은 문자. 완전히 다른 값.

국제 웹사이트에서 데이터를 추출할 때, 어떤 형식을 다루고 있는지 가정할 수 없습니다. 그리고 잘못 판단하면 분석이 자릿수 단위로 틀어집니다.

세 자리 모호성

구분자 뒤에 정확히 세 자리가 있는 경우가 가장 어렵습니다.

입력	미국식 해석	유럽식 해석
1.234	1.234 (소수)	1,234 (천 단위)
1,234	1,234 (천 단위)	1.234 (소수)
1.234.567	유효하지 않음	1,234,567
1,234,567	1,234,567	유효하지 않음

뒤에 두 자리면 명확히 소수: "1.23" 또는 "1,23".
뒤에 네 자리 이상이면 명확히 소수: "3.14159".
세 자리면? 어느 쪽이든 될 수 있습니다.

감지 알고리즘

대부분의 실제 상황을 처리하는 휴리스틱 접근 방식:

function normalizeNumberString(value) {
  if (typeof value !== "string") return value;
  const v = value.trim();
  if (!v || !/[0-9]/.test(v)) return value;

  // 1단계: 통화 기호, 퍼센트, 공백 제거
  let cleaned = v
    .replace(/&nbsp;/g, " ")
    .replace(/^(USD|EUR|GBP|R\$|MXN)\s*/i, "")
    .replace(/[$€£¥₹₽₩]/g, "")
    .replace(/%/g, "")
    .replace(/\s+/g, "");

  // 2단계: 음수 부호 처리
  const isNegative = cleaned.match(/^-/);
  if (isNegative) {
    cleaned = cleaned.substring(1).trim();
  }

  // 3단계: 순수 숫자면 완료
  if (/^\d+$/.test(cleaned)) {
    return isNegative ? `-${cleaned}` : cleaned;
  }

  // 4단계: 구분자 감지
  const hasComma = cleaned.includes(",");
  const hasDot = cleaned.includes(".");

  // 5단계: 휴리스틱 적용
  let decimalSeparator = ".";
  let thousandsSeparator = ",";

  if (hasComma && hasDot) {
    // 둘 다 있으면: 마지막 것이 소수점
    const lastComma = cleaned.lastIndexOf(",");
    const lastDot = cleaned.lastIndexOf(".");

    if (lastComma > lastDot) {
      decimalSeparator = ",";
      thousandsSeparator = ".";
    }
  } else if (hasComma && !hasDot) {
    const parts = cleaned.split(",");

    if (parts.length === 2 && parts[1].length <= 2) {
      // "1,23" → 소수
      decimalSeparator = ",";
    } else {
      // "1,234" 또는 "1,234,567" → 천 단위
      decimalSeparator = null;
      thousandsSeparator = ",";
    }
  } else if (hasDot && !hasComma) {
    const parts = cleaned.split(".");

    if (parts.length === 2) {
      const afterDot = parts[1];

      if (afterDot.length <= 2 || afterDot.length >= 4) {
        // "1.23" 또는 "3.14159" → 소수
        decimalSeparator = ".";
      } else {
        // "1.234" → 천 단위 (테이블 데이터를 위한 실용적 선택)
        decimalSeparator = null;
        thousandsSeparator = ".";
      }
    } else {
      // 점이 여러 개 → 천 단위
      decimalSeparator = null;
      thousandsSeparator = ".";
    }
  }

  // 6단계: 천 단위 구분자 제거
  if (thousandsSeparator) {
    cleaned = cleaned.replace(new RegExp(`\\${thousandsSeparator}`, "g"), "");
  }

  // 7단계: 소수점을 점으로 정규화
  if (decimalSeparator && decimalSeparator !== ".") {
    cleaned = cleaned.replace(decimalSeparator, ".");
  }

  // 8단계: 유효성 검사
  const num = Number(cleaned);
  if (!Number.isFinite(num)) return value;

  return isNegative ? `-${cleaned}` : cleaned;
}

세 자리 = 천 단위인 이유

핵심 결정: 단일 구분자 뒤에 정확히 세 자리가 있을 때 ("1.234"처럼), 소수가 아닌 천 단위로 해석합니다.

이유는? HTML 테이블에서:

천 단위가 있는 재무 데이터가 매우 일반적: $1.234, €1.234
정확히 세 자리 소수는 실제로 드묾
세 자리 소수가 있는 과학 데이터 (예: "3.141")는 보통 "3.14159"나 "3.14"로 작성

이 휴리스틱은 대부분의 실제 테이블에서 작동하는 실용적 타협입니다.

전체 형식 매트릭스

입력	해석	정규화된 출력
1.234,56	유럽식 소수	1234.56
1,234.56	미국식 소수	1234.56
1.234.567,89	유럽식 천 단위 + 소수	1234567.89
1,234,567.89	미국식 천 단위 + 소수	1234567.89
1.234	천 단위	1234
1,234	천 단위	1234
3.14	소수	3.14
3,14	소수	3.14
3.14159	소수 (4자리 이상)	3.14159
$ 1.200,50	통화 + 유럽식	1200.50
-5.000	음수 천 단위	-5000
12.5%	퍼센트	12.5

통화 코드 처리

국제 데이터에는 통화 접두사와 접미사가 함께 옵니다. 먼저 제거하세요:

// 기호 전에 통화 코드 먼저 제거
.replace(/^(USD|EUR|GBP|JPY|CHF|CAD|AUD|CNY|INR|BRL|R\$|MXN|KRW)\s*/i, "")
// 그 다음 기호 제거
.replace(/[$€£¥₹₽₩₪฿₫₴₦]/g, "")

순서가 중요합니다: "R$" (브라질 헤알)에는 "$"가 포함되어 있으므로, 통화 코드를 먼저 제거해야 부분 매칭을 방지합니다.

휴리스틱이 실패하는 경우

어떤 휴리스틱도 완벽하지 않습니다. 다음과 같은 경우 잘못된 결과가 나옵니다:

정확히 3자리 소수가 있는 과학 데이터: "3.141"이 "3141"이 됨
3자리 소수가 있는 $10 미만 가격: "$1.234"가 "$1234"가 됨
하나의 열에 혼합된 형식: 일부 행은 유럽식, 일부는 미국식

3번의 경우, 열 단위 형식 감지가 필요합니다:

function detectColumnFormat(values) {
  let euIndicators = 0;
  let usIndicators = 0;

  for (const v of values) {
    if (/\d\.\d{3},\d{2}$/.test(v)) euIndicators++;
    if (/\d,\d{3}\.\d{2}$/.test(v)) usIndicators++;
  }

  if (euIndicators > usIndicators) return "eu";
  if (usIndicators > euIndicators) return "us";
  return "auto"; // 셀별 휴리스틱 사용
}

지역별 내보내기 프로필

소스 국가를 알고 있다면, 지역별 프로필을 사용하여 모호성을 완전히 피할 수 있습니다:

유럽식 형식: 쉼표를 소수점으로 가정, CSV 구분자로 세미콜론 사용
미국/영국 형식: 점을 소수점으로 가정, CSV 구분자로 쉼표 사용

HTML Table Exporter에는 두 형식에 대한 사전 설정 프로필과 Pandas 및 DuckDB용 특수 프로필이 포함되어 있습니다.

일반적인 함정

정밀도를 잃지 마세요

// 잘못됨: 큰 숫자에서 정밀도 손실
const num = parseFloat("12345678901234567890");
// 12345678901234567000 (JavaScript 한계)

// 더 나은 방법: 최종 계산까지 문자열로 유지
const cleaned = normalizeNumberString(value);
// 계산이 필요할 때만 parseFloat

HTML 엔티티 주의

웹 테이블에는 숫자 안에   (줄바꿈 없는 공백)이 포함되는 경우가 있습니다:

// "1&nbsp;234&nbsp;567"은 "1234567"이 되어야 함
.replace(/&nbsp;/g, " ")
.replace(/\s+/g, "")

확신이 없을 때 원본 유지

값이 숫자처럼 보이지 않으면 그대로 반환하세요:

if (!/[0-9]/.test(v)) return value;
// ...
if (!Number.isFinite(num)) return value;

"N/A"를 파싱하려고 시도하는 것보다 "N/A" 그대로 두는 것이 낫습니다.

요약

시나리오	감지 방법	참고
.과 , 모두 있음	마지막 것 = 소수점	보편적
쉼표만, 뒤 2자리 이하	소수	"1,23"
쉼표만, 뒤 3자리 이상	천 단위	"1,234"
점만, 뒤 2자리 이하 또는 4자리 이상	소수	"1.23", "3.14159"
점만, 정확히 3자리	천 단위	"1.234"

세 자리의 경우가 실용적 타협입니다. 대부분의 실제 데이터에서 작동합니다. 확신이 없을 때는 소스 지역에 맞는 내보내기 프로필을 사용하세요.

웹사이트에서 Excel로 서식 문제 없이 데이터를 복사하는 방법에 대해 자세히 알아보려면 웹사이트에서 Excel로 테이블 복사하기 가이드를 참조하세요.

추측 없이 깔끔한 숫자 내보내기가 필요하신가요? gauchogrid.com/ko/html-table-exporter에서 자세히 알아보거나 Chrome 웹 스토어에서 무료로 사용해 보세요.