DEV Community: circobit

Como Eu Lido com Tabelas Aninhadas e Rowspans (As Partes Difíceis do Parsing de Tabelas HTML)

circobit — Thu, 28 May 2026 12:00:00 +0000

Parsear tabelas HTML parece simples até você encontrar dados do mundo real. Tabelas da Wikipedia têm linhas de navegação. Sites financeiros usam rowspans complexos. Sites de estatísticas esportivas aninham cabeçalhos em dois níveis.

Depois de construir o HTML Table Exporter, uma ferramenta de extração de tabelas usada em milhares de sites diferentes, cataloguei os casos extremos que quebram a maioria dos parsers. Veja como lidar com cada um.

Problema 1: Expansão de Rowspan

Uma célula com rowspan="3" ocupa espaço vertical na linha atual e nas duas próximas. Se você iterar por row.cells ingenuamente, suas colunas desalinham.

A saída quebrada:

| País  | 2020 | 2021 | 2022 |    <- Cabeçalho
| EUA   | 100  | 200  | 300  |    <- Esperado
| 150   | 250  | 350  |           <- "EUA" faltando (rowspan continuou)

A correção: Rastrear posições ocupadas num grid virtual.

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

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

    Array.from(rowEl.cells).forEach(cell => {
      // Encontrar próxima coluna desocupada
      while (grid[rowIndex][colIndex] !== undefined) {
        colIndex++;
      }

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

      // Marcar todas as células que este elemento abrange
      for (let r = 0; r < rowSpan; r++) {
        const targetRow = rowIndex + r;
        if (!grid[targetRow]) grid[targetRow] = [];

        for (let c = 0; c < colSpan; c++) {
          grid[targetRow][colIndex + c] = text;
        }
      }

      colIndex += colSpan;
    });
  });

  // Normalizar comprimento das linhas
  const maxCols = Math.max(...grid.map(r => r.length));
  return grid.map(row => {
    const normalized = new Array(maxCols).fill("");
    row.forEach((val, i) => normalized[i] = val ?? "");
    return normalized;
  });
}

Insight chave: O grid virtual é a fonte de verdade. As células DOM são apenas instruções para preenchê-lo.

Problema 2: Tabelas Aninhadas

Infoboxes da Wikipedia frequentemente contêm tabelas dentro de células de tabela. Uma abordagem recursiva extrai lixo:

<table>
  <tr>
    <td>País</td>
    <td>
      <table>  <!-- Aninhada! -->
        <tr><td>População</td><td>330M</td></tr>
      </table>
    </td>
  </tr>
</table>

Estratégia de detecção: Verificar se o ancestral de uma tabela também é uma tabela.

function isNestedTable(table) {
  let parent = table.parentElement;

  while (parent) {
    if (parent.tagName === "TABLE") {
      return true;
    }
    parent = parent.parentElement;
  }

  return false;
}

// Ao escanear uma página
function getTopLevelTables() {
  const all = document.querySelectorAll("table");
  return Array.from(all).filter(t => !isNestedTable(t));
}

Mas e o conteúdo da tabela aninhada?

Para a tabela externa, eu achato tabelas aninhadas em seu conteúdo textual:

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

  // Remover tabelas aninhadas (texto já está incluído via textContent)
  clone.querySelectorAll("table").forEach(t => t.remove());

  // Remover elementos invisíveis
  clone.querySelectorAll("style, script").forEach(el => el.remove());

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

Problema 3: Linhas de Navegação da Wikipedia

Tabelas da Wikipedia frequentemente começam com uma linha de navegação:

| v t e  Lista de países por população |
| Posição | País    | População |
| 1       | China   | 1,4B      |

Aquela linha "v t e" (Ver/Discussão/Editar) não é dado — é interface. Um parser que a trata como cabeçalho produz lixo.

Para um guia prático sobre como lidar com tabelas da Wikipedia, veja A Melhor Extensão Chrome para Copiar Tabelas para Excel.

Detecção:

function isWikipediaNavRow(row) {
  const firstCell = row[0] || "";

  // Padrões comuns para linhas de navegação
  const patterns = [
    /^v\s+t\s+e\s/i,
    /^\s*v\s*\|\s*t\s*\|\s*e/i,
    /^\[v\]\s*\[t\]\s*\[e\]/i
  ];

  return patterns.some(p => p.test(firstCell));
}

function detectHeaderRowIndex(matrix) {
  for (let i = 0; i < Math.min(3, matrix.length - 1); i++) {
    if (isWikipediaNavRow(matrix[i])) {
      return i + 1;  // Cabeçalho é a próxima linha
    }
  }
  return 0;  // Padrão: primeira linha é cabeçalho
}

Problema 4: Linhas de Título (Abrangendo Todas as Colunas)

Algumas tabelas têm uma linha de título que abrange toda a largura:

<table>
  <tr><td colspan="4">Receita Trimestral (R$ milhões)</td></tr>
  <tr><td>T1</td><td>T2</td><td>T3</td><td>T4</td></tr>
  <tr><td>100</td><td>120</td><td>115</td><td>130</td></tr>
</table>

Depois da expansão de rowspan, a primeira linha se torna ["Receita Trimestral...", "Receita Trimestral...", ...] — o mesmo valor repetido.

Detecção:

function isTitleRow(row, nextRow) {
  if (!row || !nextRow) return false;

  const uniqueValues = new Set(row.filter(v => v.trim()));
  const nextUniqueValues = new Set(nextRow.filter(v => v.trim()));

  // Características da linha de título:
  // 1. Apenas um valor único (repetido via colspan)
  // 2. Próxima linha tem múltiplos valores únicos (cabeçalhos reais)
  // 3. O valor único é texto longo (>30 caracteres geralmente)

  return (
    uniqueValues.size === 1 &&
    nextUniqueValues.size > 2 &&
    row[0] && row[0].length > 30
  );
}

Problema 5: Cabeçalhos de Coluna Agrupados (Estilo FBRef)

Sites de estatísticas esportivas como FBRef usam cabeçalhos em dois níveis:

|          |        | Tempo de Jogo     | Desempenho     |
| Jogador  | Nação  | PJ | Titulares | Min | Gols | Ass | xG |
| Haaland  | Noruega| 35 | 33        | 2950| 36   | 8   | 32 |

A primeira linha contém nomes de grupo. A segunda contém nomes reais de colunas. Ambas são "cabeçalhos."

O desafio: Depois da expansão de colspan, a linha 0 fica assim:

["", "", "Tempo de Jogo", "Tempo de Jogo", "Tempo de Jogo", "Desempenho", "Desempenho", "Desempenho"]

Heurísticas de detecção:

function isGroupHeaderRow(row, nextRow) {
  if (!row || !nextRow || row.length !== nextRow.length) return false;

  // Contar quantas células têm o mesmo valor que sua vizinha
  let repeatCount = 0;
  for (let i = 1; i < row.length; i++) {
    if (row[i] && row[i] === row[i-1]) repeatCount++;
  }

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

  // Linhas de cabeçalho agrupado geralmente têm 40%+ de valores repetidos
  // E a próxima linha tem mais valores únicos
  const uniqueInRow = new Set(row.filter(v => v.trim())).size;
  const uniqueInNext = new Set(nextRow.filter(v => v.trim())).size;

  return repeatRatio > 0.4 && uniqueInNext > uniqueInRow;
}

Mesclando cabeçalhos de grupo + sub-cabeçalhos:

function mergeGroupAndSubHeaders(groupRow, subHeaderRow) {
  return subHeaderRow.map((subHeader, idx) => {
    const group = (groupRow[idx] || "").trim();
    const sub = (subHeader || "").trim();

    if (!group) return sub;
    if (!sub) return group;
    if (sub.toLowerCase() === group.toLowerCase()) return sub;

    return `${group} - ${sub}`;
  });
}

// Resultado: ["Jogador", "Nação", "Tempo de Jogo - PJ", "Tempo de Jogo - Titulares", ...]

Problema 6: Tabelas Horizontalmente Duplicadas

Tabelas de população da Wikipedia frequentemente têm esta estrutura:

| Pos | Nome   | Pop  | Pos | Nome    | Pop  |
| 1   | Tóquio | 37M  | 11  | Paris   | 11M  |
| 2   | Delhi  | 32M  | 12  | Cairo   | 10M  |

Esta é UMA tabela lógica exibida em duas colunas para economizar espaço vertical.

Detecção:

function detectHorizontalDuplication(headers) {
  const half = Math.floor(headers.length / 2);
  if (half < 2) return null;

  const firstHalf = headers.slice(0, half);
  const secondHalf = headers.slice(half, half * 2);

  // Verificar se a segunda metade corresponde à primeira
  const matches = firstHalf.every((h, i) => 
    h.toLowerCase() === secondHalf[i]?.toLowerCase()
  );

  if (matches) {
    return { detected: true, repeatCount: 2, baseColumns: half };
  }

  return null;
}

Normalização: Dividir cada linha e empilhar verticalmente:

function normalizeHorizontallyDuplicatedTable(matrix, baseColumns) {
  const header = matrix[0].slice(0, baseColumns);
  const normalizedRows = [header];

  for (let i = 1; i < matrix.length; i++) {
    const row = matrix[i];
    // Primeira metade
    normalizedRows.push(row.slice(0, baseColumns));
    // Segunda metade (se não estiver vazia)
    const secondHalf = row.slice(baseColumns, baseColumns * 2);
    if (secondHalf.some(cell => cell.trim())) {
      normalizedRows.push(secondHalf);
    }
  }

  return normalizedRows;
}

O Algoritmo Combinado

Parsing do mundo real requer verificar todos esses casos em sequência:

function parseTable(table) {
  // 1. Expandir rowspans/colspans para grid virtual
  let matrix = expandRowspans(table);

  // 2. Detectar e pular linhas de navegação/título
  const headerIndex = detectHeaderRowIndex(matrix);
  if (headerIndex > 0) {
    matrix = matrix.slice(headerIndex);
  }

  // 3. Lidar com cabeçalhos agrupados (estilo FBRef)
  const groupedHeaders = detectGroupedColumnHeaders(matrix);
  if (groupedHeaders) {
    const mergedHeaders = mergeGroupAndSubHeaders(matrix[0], matrix[1]);
    matrix = [mergedHeaders, ...matrix.slice(2)];
  }

  // 4. Lidar com duplicação horizontal
  const duplication = detectHorizontalDuplication(matrix[0]);
  if (duplication) {
    matrix = normalizeHorizontallyDuplicatedTable(matrix, duplication.baseColumns);
  }

  return matrix;
}

Testando Esses Casos Extremos

Todo padrão acima veio de um bug report real. Eu mantenho uma suíte de testes com fixtures HTML para cada um:

// Teste: Linha de navegação estilo Wikipedia
const navRowHtml = `
  <table>
    <tr><td colspan="3">v t e Países</td></tr>
    <tr><td>Pos</td><td>País</td><td>Pop</td></tr>
    <tr><td>1</td><td>China</td><td>1,4B</td></tr>
  </table>
`;

const result = parseTable(parseHtml(navRowHtml));
assert(result[0][0] === "Pos");    // Cabeçalho corretamente identificado
assert(result[1][1] === "China");  // Dados corretamente alinhados

A suíte de testes tem 24 casos cobrindo combinações desses padrões. Novos bug reports se tornam novos casos de teste.

Experimente Você Mesmo

Se você está construindo extração de tabelas, espero que isso economize tempo de depuração. Se você só precisa exportar tabelas sem escrever código, o HTML Table Exporter lida com todos esses casos automaticamente.

Saiba mais em gauchogrid.com/pt-br/html-table-exporter ou experimente gratuitamente na Chrome Web Store.

Encontrou uma tabela que quebra seu parser? Compartilhe a URL nos comentários — eu coleciono esses casos extremos.

From Browser to Database: The Shortest Path for Web Tables

circobit — Wed, 27 May 2026 14:00:00 +0000

You found data on a website. You need it in your database.

What's the fastest path from point A to point B?

This guide covers the practical workflows for getting HTML tables into SQLite, PostgreSQL, MySQL, and other databases—with minimal friction.

The General Workflow

Every browser-to-database pipeline has the same steps:

Extract — Get the table out of the webpage
Clean — Fix formatting, types, and structure
Load — Insert into database

The question is where to do each step and with what tools.

Path 1: CSV as Intermediary

The most common approach. Works with any database.

Step 1: Export to CSV

Use a browser extension like HTML Table Exporter or copy-paste into a spreadsheet and save as CSV.

Key consideration: Delimiter choice. Commas work unless your data contains commas. Semicolons or tabs are safer for messy data.

Step 2: Load into Database

SQLite:

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

Or with headers:

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

PostgreSQL:

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

Or using psql:

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

MySQL:

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

Pros and Cons

✅ Universal compatibility

✅ Easy to inspect intermediate file

✅ Can manually fix issues before loading

❌ Extra step

❌ Type inference is basic

Path 2: Direct to SQL Statements

Export the table directly as INSERT statements.

Export as SQL

Some export tools generate SQL directly. The output looks like:

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

Load

Just execute the SQL file:

# SQLite
sqlite3 mydb.db < data.sql

# PostgreSQL
psql -d mydb -f data.sql

# MySQL
mysql mydb < data.sql

Pros and Cons

✅ One step from export to database

✅ SQL is portable across databases (mostly)

❌ Large datasets = huge SQL files

❌ Need to define table schema first

Path 3: Python + Pandas Pipeline

Maximum flexibility. Best for repeated imports or complex cleaning.

Complete Workflow

import pandas as pd
from sqlalchemy import create_engine

# Step 1: Load CSV (exported from browser)
df = pd.read_csv('data.csv')

# Step 2: Clean
df.columns = df.columns.str.lower().str.replace(' ', '_')  # Normalize column names
df['date'] = pd.to_datetime(df['date'])  # Parse dates
df['amount'] = df['amount'].str.replace('[$,]', '', regex=True).astype(float)  # Clean currency

# Step 3: Load to database
engine = create_engine('sqlite:///mydb.db')
# Or: create_engine('postgresql://user:pass@localhost/mydb')
# Or: create_engine('mysql+pymysql://user:pass@localhost/mydb')

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

Type Mapping

Pandas infers types, but you can be explicit:

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

Pros and Cons

✅ Full control over cleaning and types

✅ Handles complex transformations

✅ Repeatable and scriptable

❌ Requires Python environment

❌ Overkill for one-time imports

Path 4: DuckDB (The Modern Shortcut)

DuckDB reads CSV directly and handles most cleaning automatically.

Direct Query

-- Query CSV without importing
SELECT * FROM 'data.csv';

-- With type inference
SELECT * FROM read_csv_auto('data.csv');

-- Create table from CSV
CREATE TABLE mytable AS SELECT * FROM 'data.csv';

From Browser to Query in Seconds

# Export table as CSV from browser
# Then immediately query:
duckdb -c "SELECT column1, SUM(column2) FROM 'data.csv' GROUP BY column1;"

No schema definition. No import step. Just query.

Pros and Cons

✅ Fastest for ad-hoc analysis

✅ Excellent type inference

✅ SQL interface

❌ Not a traditional database (for persistence, export results)

Handling Common Issues

Column Names with Spaces

Web tables often have headers like "Total Sales" or "Year to Date".

Fix at export: Some tools normalize headers automatically.

Fix at import:

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

Or in SQL after import:

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

Mixed Number Formats

European (1.234,56) vs US (1,234.56) formats break imports.

Fix before import: Use a tool with cleaning presets, or:

# European to standard
df['value'] = df['value'].str.replace('.', '').str.replace(',', '.').astype(float)

Null Representations

Web tables show blanks, "N/A", "—", "-" for missing data.

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

Or in DuckDB:

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

Dates in Various Formats

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

The format='mixed' handles inconsistent date formats in the same column.

Choosing the Right Path

Scenario	Recommended Path
One-time import, small table	CSV + direct database import
One-time import, needs cleaning	Python + Pandas
Quick analysis, no persistence needed	DuckDB
Regular imports from same source	Python script (automate)
Need SQL format for sharing/versioning	Direct SQL export

Example: Full Workflow

Let's say you have a table of product data on a website.

Step 1: Export with HTML Table Exporter → CSV with cleaned numbers

Step 2: Quick validation in DuckDB:

SELECT COUNT(*), COUNT(DISTINCT product_id) FROM 'products.csv';
-- Check for duplicates

Step 3: Load to PostgreSQL:

import pandas as pd
from sqlalchemy import create_engine

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

Total time: 2 minutes.

The Meta-Lesson

The shortest path isn't always the most direct.

Spending 30 seconds on cleaning at export saves 10 minutes debugging import errors. Using the right intermediate format (CSV vs SQL vs JSON) depends on your target database and data complexity.

For most web table → database workflows:

Export to CSV with number/date cleaning
Load with your database's native CSV import
Only bring in Python if you need complex transformations

Simple pipelines are maintainable pipelines.

For Python workflows specifically, see our detailed guide on exporting web tables to JSON for Python & Pandas.

Need clean exports that are database-ready? Learn more at gauchogrid.com/html-table-exporter or try HTML Table Exporter free on the Chrome Web Store.

Automatizando Exportaciones de Tablas Web con JavaScript — Guía Práctica

circobit — Wed, 27 May 2026 13:30:00 +0000

Encontraste una tabla en un sitio web. Necesitas esos datos en una hoja de cálculo. El camino obvio — copiar, pegar, limpiar en Excel — funciona una vez. Pero ¿qué pasa si necesitas estos datos semanalmente? ¿O de 50 páginas diferentes?

Esta guía te muestra cómo extraer tablas HTML programáticamente con JavaScript, manejar los casos borde que rompen los enfoques ingenuos, y exportar a formatos que tus herramientas realmente aceptan.

El Enfoque Ingenuo (Y Por Qué Falla)

La extracción más simple se ve así:

function extractTable(table) {
  return Array.from(table.rows).map(row => 
    Array.from(row.cells).map(cell => cell.textContent.trim())
  );
}

Esto funciona para tablas simples. Se rompe inmediatamente cuando encuentras:

Rowspan/colspan — Celdas que abarcan múltiples filas o columnas
Tablas anidadas — Tablas dentro de celdas de tabla
Contenido oculto — Elementos <style>, <script>, o display:none
Caracteres especiales — Saltos de línea, tabs y comillas dentro del contenido de las celdas

Arreglemos cada uno.

Manejando Rowspan y Colspan

Cuando una celda tiene rowspan="2", ocupa espacio en la fila actual Y en la siguiente. Un extractor ingenuo ve menos celdas de las esperadas y desalinea las columnas.

La solución: construir una grilla virtual que rastree las posiciones ocupadas.

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

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

    let colIndex = 0;

    Array.from(rowEl.cells).forEach(cell => {
      // Saltear columnas ya ocupadas por rowspans previos
      while (grid[rowIndex][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 rectangular que esta celda ocupa
      for (let r = 0; r < rowSpan; r++) {
        const targetRow = rowIndex + r;
        if (!grid[targetRow]) grid[targetRow] = [];

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

      colIndex += colSpan;
    });
  });

  return grid;
}

Ahora una tabla como esta:

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

Se convierte correctamente en:

[
  ["A", "B"],
  ["A", "C"]  // "A" aparece en ambas filas
]

Extrayendo Texto Limpio

textContent captura todo — incluyendo reglas CSS en etiquetas <style> y JavaScript en etiquetas <script> que algunas páginas inyectan en las celdas de las tablas.

La extracción limpia requiere filtrado:

function extractCellText(cell) {
  if (!cell) return "";

  // Clonar para evitar modificar el DOM
  const clone = cell.cloneNode(true);

  // Eliminar elementos invisibles
  const invisibleSelectors = "style, script, noscript, template, link";
  clone.querySelectorAll(invisibleSelectors).forEach(el => el.remove());

  // Normalizar espacios en blanco
  return (clone.textContent || "").replace(/\s+/g, " ").trim();
}

Detectando Tablas Anidadas

Cuando una tabla contiene otra tabla dentro de una celda, típicamente quieres los datos de la tabla exterior, no un lío recursivo.

La detección es directa:

function isNestedTable(table, allTables) {
  let parent = table.parentElement;

  while (parent) {
    if (parent.tagName === "TABLE") {
      return true;  // Esta tabla está dentro de otra tabla
    }
    parent = parent.parentElement;
  }

  return false;
}

// Filtrar al escanear una página
const allTables = document.querySelectorAll("table");
const topLevelTables = Array.from(allTables)
  .filter(t => !isNestedTable(t, allTables));

Convirtiendo a CSV

CSV parece simple hasta que necesitas manejar:

Comas dentro de los valores
Comillas dentro de los valores
Saltos de línea dentro de los valores

El enfoque compatible con RFC 4180:

function toCSV(rows, delimiter = ",") {
  return rows.map(row =>
    row.map(cell => {
      if (cell == null) cell = "";
      const str = String(cell);

      // Entrecomillar si contiene delimitador, comillas o saltos de línea
      const needsQuotes = str.includes(delimiter) || /["\r\n]/.test(str);
      const escaped = str.replace(/"/g, '""');

      return needsQuotes ? `"${escaped}"` : escaped;
    }).join(delimiter)
  ).join("\r\n");
}

Esto maneja correctamente el caso pesadilla:

toCSV([['Di "Hola, Mundo"', "Normal"]])
// '"Di ""Hola, Mundo""",Normal'

Para una guía completa sobre exportaciones CSV, mira Las 5 Mejores Extensiones de Chrome para Exportar Tablas.

Convirtiendo a JSON

Para exportar a JSON, la primera fila se convierte en claves:

function toJSON(rows) {
  if (rows.length < 2) return "[]";

  const headers = rows[0].map((h, i) => sanitizeKey(h, i));
  const dataRows = rows.slice(1);

  const objects = dataRows.map(row => {
    const obj = {};
    headers.forEach((key, i) => {
      obj[key] = row[i] ?? "";
    });
    return obj;
  });

  return JSON.stringify(objects, null, 2);
}

function sanitizeKey(header, index) {
  let key = (header || "").toString().trim();

  if (!key) return `col_${index + 1}`;

  // Normalizar a snake_case en minúsculas
  return key
    .normalize("NFD")
    .replace(/[\u0300-\u036f]/g, "")  // Eliminar acentos
    .toLowerCase()
    .replace(/[^a-z0-9]+/g, "_")
    .replace(/^_+|_+$/g, "");
}

Entrada:

| Nombre del Producto | Precio ($) |
|---------------------|------------|
| Widget              | 29.99      |

Salida:

[
  {
    "nombre_del_producto": "Widget",
    "precio": "29.99"
  }
]

Disparando la Descarga

En un contexto de navegador, puedes disparar una descarga sin un servidor:

function downloadFile(content, filename, mimeType) {
  const blob = new Blob([content], { type: mimeType });
  const url = URL.createObjectURL(blob);

  const link = document.createElement("a");
  link.href = url;
  link.download = filename;
  link.click();

  URL.revokeObjectURL(url);
}

// Uso
const csv = toCSV(extractTableMatrix(table));
downloadFile(csv, "datos.csv", "text/csv;charset=utf-8");

Integrando Todo

Aquí hay un bookmarklet mínimo que exporta la primera tabla de cualquier página:

javascript:(function(){
  const table = document.querySelector("table");
  if (!table) { alert("No se encontró tabla"); return; }

  function extractTableMatrix(table) {
    const rows = Array.from(table.rows);
    const grid = [];
    rows.forEach((rowEl, ri) => {
      if (!grid[ri]) grid[ri] = [];
      let ci = 0;
      Array.from(rowEl.cells).forEach(cell => {
        while (grid[ri][ci] !== undefined) ci++;
        const text = cell.textContent.trim();
        const rs = parseInt(cell.rowSpan) || 1;
        const cs = parseInt(cell.colSpan) || 1;
        for (let r = 0; r < rs; r++) {
          if (!grid[ri+r]) grid[ri+r] = [];
          for (let c = 0; c < cs; c++) {
            if (grid[ri+r][ci+c] === undefined) grid[ri+r][ci+c] = text;
          }
        }
        ci += cs;
      });
    });
    return grid;
  }

  const data = extractTableMatrix(table);
  const csv = data.map(row => 
    row.map(c => c.includes(",") ? `"${c}"` : c).join(",")
  ).join("\n");

  const blob = new Blob([csv], {type: "text/csv"});
  const link = document.createElement("a");
  link.href = URL.createObjectURL(blob);
  link.download = "tabla.csv";
  link.click();
})();

Cuándo Usar una Extensión de Navegador

Este código funciona, pero mantenerlo entre diferentes sitios es tedioso. Si extraes tablas regularmente, una extensión de navegador maneja:

Múltiples tablas por página
Selección de formato (CSV, JSON, Excel)
Limpieza de datos (normalización de números, manejo de nulos)
Selección y reordenamiento de columnas

Construí HTML Table Exporter exactamente para este flujo de trabajo. Los algoritmos centrales son similares a lo mostrado aquí, empaquetados en una UI usable.

Más info en gauchogrid.com/es/html-table-exporter o pruébala gratis en la Chrome Web Store.

¿Preguntas sobre casos borde de extracción de tablas? Deja un comentario; probablemente ya lo enfrenté.

ネストテーブルとrowspanの処理方法（HTMLテーブルパースの難所）

circobit — Wed, 27 May 2026 00:00:00 +0000

HTMLテーブルのパースは、実世界のデータに遭遇するまでは簡単に思えます。Wikipediaのテーブルにはナビゲーション行があり、金融サイトは複雑なrowspanを使い、スポーツ統計サイトはヘッダーを2階層にネストしています。

数千の異なるサイトで使用されているテーブル抽出ツール HTML Table Exporter を開発する中で、ほとんどのパーサーを壊すエッジケースをカタログ化してきました。それぞれの対処法を紹介します。

問題1：rowspanの展開

rowspan="3" のセルは、現在の行と次の2行に垂直方向のスペースを占有します。row.cells を素朴に反復処理すると、列がずれます。

壊れた出力：

| 国    | 2020 | 2021 | 2022 |    <- ヘッダー
| 日本  | 100  | 200  | 300  |    <- 期待通り
| 150   | 250  | 350  |          <- "日本" が欠落（rowspan継続）

修正： 仮想グリッドで占有位置を追跡します。

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

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

    Array.from(rowEl.cells).forEach(cell => {
      // 次の未占有列を見つける
      while (grid[rowIndex][colIndex] !== undefined) {
        colIndex++;
      }

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

      // この要素がスパンするすべてのセルをマーク
      for (let r = 0; r < rowSpan; r++) {
        const targetRow = rowIndex + r;
        if (!grid[targetRow]) grid[targetRow] = [];

        for (let c = 0; c < colSpan; c++) {
          grid[targetRow][colIndex + c] = text;
        }
      }

      colIndex += colSpan;
    });
  });

  // 行の長さを正規化
  const maxCols = Math.max(...grid.map(r => r.length));
  return grid.map(row => {
    const normalized = new Array(maxCols).fill("");
    row.forEach((val, i) => normalized[i] = val ?? "");
    return normalized;
  });
}

重要な洞察： 仮想グリッドが信頼の源です。DOMセルはグリッドを埋めるための命令に過ぎません。

問題2：ネストテーブル

Wikipediaのインフォボックスには、テーブルセル内にテーブルが含まれることがよくあります。再帰的なアプローチではゴミが抽出されます：

<table>
  <tr>
    <td>国</td>
    <td>
      <table>  <!-- ネスト！ -->
        <tr><td>人口</td><td>1.26億</td></tr>
      </table>
    </td>
  </tr>
</table>

検出戦略： テーブルの祖先もテーブルかどうかチェックします。

function isNestedTable(table) {
  let parent = table.parentElement;

  while (parent) {
    if (parent.tagName === "TABLE") {
      return true;
    }
    parent = parent.parentElement;
  }

  return false;
}

function getTopLevelTables() {
  const all = document.querySelectorAll("table");
  return Array.from(all).filter(t => !isNestedTable(t));
}

ネストテーブルのコンテンツは？

外側のテーブルでは、ネストテーブルをテキストコンテンツにフラット化します：

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

  // ネストテーブルを削除（テキストはtextContentに含まれている）
  clone.querySelectorAll("table").forEach(t => t.remove());

  // 不可視要素を削除
  clone.querySelectorAll("style, script").forEach(el => el.remove());

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

問題3：Wikipediaのナビゲーション行

Wikipediaのテーブルは、ナビゲーション行で始まることがよくあります：

| v t e  国の人口一覧 |
| 順位 | 国   | 人口    |
| 1    | 中国 | 14億   |

あの「v t e」行（閲覧/ノート/編集リンク）はデータではなくUIです。これをヘッダー行として扱うパーサーはゴミを生成します。

Wikipediaテーブルの処理に関する実践ガイドは、テーブルをExcelにコピーするのに最適なChrome拡張機能もご覧ください。

検出：

function isWikipediaNavRow(row) {
  const firstCell = row[0] || "";

  const patterns = [
    /^v\s+t\s+e\s/i,
    /^\s*v\s*\|\s*t\s*\|\s*e/i,
    /^\[v\]\s*\[t\]\s*\[e\]/i
  ];

  return patterns.some(p => p.test(firstCell));
}

function detectHeaderRowIndex(matrix) {
  for (let i = 0; i < Math.min(3, matrix.length - 1); i++) {
    if (isWikipediaNavRow(matrix[i])) {
      return i + 1;  // ヘッダーは次の行
    }
  }
  return 0;  // デフォルト：最初の行がヘッダー
}

問題4：タイトル行（全列スパン）

一部のテーブルには、全幅にまたがるタイトル行があります：

<table>
  <tr><td colspan="4">四半期売上（百万円）</td></tr>
  <tr><td>Q1</td><td>Q2</td><td>Q3</td><td>Q4</td></tr>
  <tr><td>100</td><td>120</td><td>115</td><td>130</td></tr>
</table>

rowspan展開後、最初の行は ["四半期売上...", "四半期売上...", ...] になります — 同じ値の繰り返し。

検出：

function isTitleRow(row, nextRow) {
  if (!row || !nextRow) return false;

  const uniqueValues = new Set(row.filter(v => v.trim()));
  const nextUniqueValues = new Set(nextRow.filter(v => v.trim()));

  return (
    uniqueValues.size === 1 &&
    nextUniqueValues.size > 2 &&
    row[0] && row[0].length > 30
  );
}

問題5：グループ化カラムヘッダー（FBRefスタイル）

FBRefのようなスポーツ統計サイトは2階層ヘッダーを使用します：

|        |        | プレー時間      | パフォーマンス |
| 選手   | 国籍   | 出場 | 先発 | 分 | ゴール | アシスト | xG |
| ハーランド| ノルウェー | 35 | 33 | 2950| 36  | 8   | 32 |

1行目にはグループ名、2行目に実際のカラム名があります。両方とも「ヘッダー」です。

課題： colspan展開後、0行目はこうなります：

["", "", "プレー時間", "プレー時間", "プレー時間", "パフォーマンス", "パフォーマンス", "パフォーマンス"]

検出ヒューリスティクス：

function isGroupHeaderRow(row, nextRow) {
  if (!row || !nextRow || row.length !== nextRow.length) return false;

  let repeatCount = 0;
  for (let i = 1; i < row.length; i++) {
    if (row[i] && row[i] === row[i-1]) repeatCount++;
  }

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

  const uniqueInRow = new Set(row.filter(v => v.trim())).size;
  const uniqueInNext = new Set(nextRow.filter(v => v.trim())).size;

  return repeatRatio > 0.4 && uniqueInNext > uniqueInRow;
}

グループ + サブヘッダーのマージ：

function mergeGroupAndSubHeaders(groupRow, subHeaderRow) {
  return subHeaderRow.map((subHeader, idx) => {
    const group = (groupRow[idx] || "").trim();
    const sub = (subHeader || "").trim();

    if (!group) return sub;
    if (!sub) return group;
    if (sub.toLowerCase() === group.toLowerCase()) return sub;

    return `${group} - ${sub}`;
  });
}

// 結果: ["選手", "国籍", "プレー時間 - 出場", "プレー時間 - 先発", ...]

問題6：水平重複テーブル

Wikipediaの人口テーブルには、こんな構造のものがよくあります：

| 順位 | 名前   | 人口  | 順位 | 名前    | 人口  |
| 1    | 東京   | 3700万 | 11   | パリ   | 1100万 |
| 2    | デリー | 3200万 | 12   | カイロ | 1000万 |

これは垂直スペースを節約するために2列で表示された1つの論理テーブルです。

検出：

function detectHorizontalDuplication(headers) {
  const half = Math.floor(headers.length / 2);
  if (half < 2) return null;

  const firstHalf = headers.slice(0, half);
  const secondHalf = headers.slice(half, half * 2);

  const matches = firstHalf.every((h, i) => 
    h.toLowerCase() === secondHalf[i]?.toLowerCase()
  );

  if (matches) {
    return { detected: true, repeatCount: 2, baseColumns: half };
  }

  return null;
}

正規化： 各行を分割して垂直にスタック：

function normalizeHorizontallyDuplicatedTable(matrix, baseColumns) {
  const header = matrix[0].slice(0, baseColumns);
  const normalizedRows = [header];

  for (let i = 1; i < matrix.length; i++) {
    const row = matrix[i];
    normalizedRows.push(row.slice(0, baseColumns));
    const secondHalf = row.slice(baseColumns, baseColumns * 2);
    if (secondHalf.some(cell => cell.trim())) {
      normalizedRows.push(secondHalf);
    }
  }

  return normalizedRows;
}

統合アルゴリズム

実世界のパースでは、これらすべてのケースを順番にチェックする必要があります：

function parseTable(table) {
  // 1. rowspan/colspanを仮想グリッドに展開
  let matrix = expandRowspans(table);

  // 2. ナビ/タイトル行を検出・スキップ
  const headerIndex = detectHeaderRowIndex(matrix);
  if (headerIndex > 0) {
    matrix = matrix.slice(headerIndex);
  }

  // 3. グループヘッダーの処理（FBRefスタイル）
  const groupedHeaders = detectGroupedColumnHeaders(matrix);
  if (groupedHeaders) {
    const mergedHeaders = mergeGroupAndSubHeaders(matrix[0], matrix[1]);
    matrix = [mergedHeaders, ...matrix.slice(2)];
  }

  // 4. 水平重複の処理
  const duplication = detectHorizontalDuplication(matrix[0]);
  if (duplication) {
    matrix = normalizeHorizontallyDuplicatedTable(matrix, duplication.baseColumns);
  }

  return matrix;
}

エッジケースのテスト

上記のすべてのパターンは、実際のバグレポートから生まれました。各パターンのHTMLフィクスチャを含むテストスイートをメンテナンスしています：

// テスト: Wikipediaスタイルのナビ行
const navRowHtml = `
  <table>
    <tr><td colspan="3">v t e 国一覧</td></tr>
    <tr><td>順位</td><td>国</td><td>人口</td></tr>
    <tr><td>1</td><td>中国</td><td>14億</td></tr>
  </table>
`;

const result = parseTable(parseHtml(navRowHtml));
assert(result[0][0] === "順位");   // ヘッダーが正しく識別
assert(result[1][1] === "中国");   // データが正しく整列

テストスイートにはこれらのパターンの組み合わせをカバーする24のケースがあります。新しいバグレポートが新しいテストケースになります。

試してみよう

テーブル抽出を開発している方には、このガイドがデバッグ時間の節約になれば幸いです。コードを書かずにテーブルをエクスポートしたいだけなら、HTML Table Exporter がこれらすべてのケースを自動的に処理します。

詳しくは gauchogrid.com/ja/html-table-exporter をご覧いただくか、Chrome Web Store で無料でお試しください。

パーサーを壊すテーブルを見つけましたか？URLを共有してください。エッジケースを収集しています。

중첩 테이블과 Rowspan 처리하기 (HTML 테이블 파싱의 어려운 부분)

circobit — Tue, 26 May 2026 00:30:00 +0000

HTML 테이블 파싱은 실제 데이터를 만나기 전까지는 간단해 보입니다. 위키피디아 테이블에는 네비게이션 행이 있습니다. 금융 사이트는 복잡한 rowspan을 사용합니다. 스포츠 통계 사이트는 헤더를 두 단계로 중첩합니다.

수천 개의 다른 사이트에서 사용되는 테이블 추출 도구 HTML Table Exporter를 만든 후, 대부분의 파서를 깨뜨리는 엣지 케이스를 정리했습니다. 각각의 처리 방법을 살펴보겠습니다.

문제 1: Rowspan 확장

rowspan="3"인 셀은 현재 행과 다음 두 행에서 수직 공간을 차지합니다. row.cells를 단순하게 반복하면 열이 어긋납니다.

깨진 출력:

| 국가    | 2020 | 2021 | 2022 |    <- 헤더
| 미국    | 100  | 200  | 300  |    <- 예상
| 150     | 250  | 350  |          <- "미국" 누락 (rowspan 계속)

해결 방법: 가상 그리드에서 차지된 위치를 추적합니다.

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

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

    Array.from(rowEl.cells).forEach(cell => {
      // 다음 비어있는 열 찾기
      while (grid[rowIndex][colIndex] !== undefined) {
        colIndex++;
      }

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

      // 이 요소가 걸치는 모든 셀 표시
      for (let r = 0; r < rowSpan; r++) {
        const targetRow = rowIndex + r;
        if (!grid[targetRow]) grid[targetRow] = [];

        for (let c = 0; c < colSpan; c++) {
          grid[targetRow][colIndex + c] = text;
        }
      }

      colIndex += colSpan;
    });
  });

  // 행 길이 정규화
  const maxCols = Math.max(...grid.map(r => r.length));
  return grid.map(row => {
    const normalized = new Array(maxCols).fill("");
    row.forEach((val, i) => normalized[i] = val ?? "");
    return normalized;
  });
}

핵심 인사이트: 가상 그리드가 진실의 원천입니다. DOM 셀은 그것을 채우기 위한 지시사항일 뿐입니다.

문제 2: 중첩 테이블

위키피디아 인포박스에는 종종 테이블 셀 안에 테이블이 있습니다. 재귀적 접근법은 쓸모없는 결과를 추출합니다:

<table>
  <tr>
    <td>국가</td>
    <td>
      <table>  <!-- 중첩! -->
        <tr><td>인구</td><td>3.3억</td></tr>
      </table>
    </td>
  </tr>
</table>

감지 전략: 테이블의 상위 요소가 테이블인지 확인합니다.

function isNestedTable(table) {
  let parent = table.parentElement;

  while (parent) {
    if (parent.tagName === "TABLE") {
      return true;
    }
    parent = parent.parentElement;
  }

  return false;
}

// 페이지 스캔 시
function getTopLevelTables() {
  const all = document.querySelectorAll("table");
  return Array.from(all).filter(t => !isNestedTable(t));
}

그런데 중첩 테이블의 내용은?

외부 테이블의 경우, 중첩 테이블을 텍스트 콘텐츠로 평탄화합니다:

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

  // 중첩 테이블 제거 (텍스트는 textContent를 통해 이미 포함됨)
  clone.querySelectorAll("table").forEach(t => t.remove());

  // 보이지 않는 요소 제거
  clone.querySelectorAll("style, script").forEach(el => el.remove());

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

문제 3: 위키피디아 네비게이션 행

위키피디아 테이블은 종종 네비게이션 행으로 시작합니다:

| v t e  국가별 인구 목록              |
| 순위 | 국가   | 인구         |
| 1    | 중국   | 14억         |

"v t e" 행(보기/대화/편집 링크)은 데이터가 아니라 UI입니다. 이것을 헤더 행으로 처리하는 파서는 쓸모없는 결과를 만듭니다.

위키피디아 테이블 처리에 대한 실용 가이드는 테이블 내보내기를 위한 Chrome 최고의 확장 프로그램 5선을 참조하세요.

감지:

function isWikipediaNavRow(row) {
  const firstCell = row[0] || "";

  // 네비게이션 행의 일반적인 패턴
  const patterns = [
    /^v\s+t\s+e\s/i,           // "v t e "
    /^\s*v\s*\|\s*t\s*\|\s*e/i, // "v | t | e"
    /^\[v\]\s*\[t\]\s*\[e\]/i   // "[v] [t] [e]"
  ];

  return patterns.some(p => p.test(firstCell));
}

function detectHeaderRowIndex(matrix) {
  for (let i = 0; i < Math.min(3, matrix.length - 1); i++) {
    if (isWikipediaNavRow(matrix[i])) {
      return i + 1;  // 헤더는 다음 행
    }
  }
  return 0;  // 기본값: 첫 번째 행이 헤더
}

문제 4: 타이틀 행 (전체 열에 걸침)

일부 테이블에는 전체 너비에 걸치는 타이틀 행이 있습니다:

<table>
  <tr><td colspan="4">분기별 매출 (백만 달러)</td></tr>
  <tr><td>Q1</td><td>Q2</td><td>Q3</td><td>Q4</td></tr>
  <tr><td>100</td><td>120</td><td>115</td><td>130</td></tr>
</table>

rowspan 확장 후 첫 번째 행은 ["분기별 매출...", "분기별 매출...", ...]—같은 값이 반복됩니다.

감지:

function isTitleRow(row, nextRow) {
  if (!row || !nextRow) return false;

  const uniqueValues = new Set(row.filter(v => v.trim()));
  const nextUniqueValues = new Set(nextRow.filter(v => v.trim()));

  // 타이틀 행의 특성:
  // 1. 고유 값이 하나만 있음 (colspan으로 반복)
  // 2. 다음 행에는 여러 고유 값이 있음 (실제 헤더)
  // 3. 단일 값이 긴 텍스트 (보통 30자 이상)

  return (
    uniqueValues.size === 1 &&
    nextUniqueValues.size > 2 &&
    row[0] && row[0].length > 30
  );
}

문제 5: 그룹화된 열 헤더 (FBREF 스타일)

FBREF 같은 스포츠 통계 사이트는 2단계 헤더를 사용합니다:

|        |        | 출전 시간         | 성적           |
| 선수   | 국적   | MP | 선발 | 분  | 골 | 어시스트 | xG |
| 홀란드 | 노르웨이 | 35 | 33  | 2950| 36 | 8      | 32 |

첫 번째 행에는 그룹 이름이 있습니다. 두 번째 행에는 실제 열 이름이 있습니다. 둘 다 "헤더"입니다.

과제: colspan 확장 후 0번째 행은 이렇게 됩니다:

["", "", "출전 시간", "출전 시간", "출전 시간", "성적", "성적", "성적"]

감지 휴리스틱:

function isGroupHeaderRow(row, nextRow) {
  if (!row || !nextRow || row.length !== nextRow.length) return false;

  // 이웃과 같은 값을 가진 셀 수 세기
  let repeatCount = 0;
  for (let i = 1; i < row.length; i++) {
    if (row[i] && row[i] === row[i-1]) repeatCount++;
  }

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

  // 그룹 헤더 행은 보통 40% 이상 반복 값을 가짐
  // 그리고 다음 행이 더 많은 고유 값을 가짐
  const uniqueInRow = new Set(row.filter(v => v.trim())).size;
  const uniqueInNext = new Set(nextRow.filter(v => v.trim())).size;

  return repeatRatio > 0.4 && uniqueInNext > uniqueInRow;
}

그룹 + 하위 헤더 병합:

function mergeGroupAndSubHeaders(groupRow, subHeaderRow) {
  return subHeaderRow.map((subHeader, idx) => {
    const group = (groupRow[idx] || "").trim();
    const sub = (subHeader || "").trim();

    if (!group) return sub;
    if (!sub) return group;
    if (sub.toLowerCase() === group.toLowerCase()) return sub;

    return `${group} - ${sub}`;
  });
}

// 결과: ["선수", "국적", "출전 시간 - MP", "출전 시간 - 선발", ...]

문제 6: 수평으로 복제된 테이블

위키피디아 인구 테이블에는 종종 이런 구조가 있습니다:

| 순위 | 이름  | 인구  | 순위 | 이름   | 인구  |
| 1    | 도쿄  | 3700만 | 11  | 파리  | 1100만 |
| 2    | 델리  | 3200만 | 12  | 카이로 | 1000만 |

이것은 수직 공간을 절약하기 위해 두 열로 표시된 하나의 논리적 테이블입니다.

감지:

function detectHorizontalDuplication(headers) {
  const half = Math.floor(headers.length / 2);
  if (half < 2) return null;

  const firstHalf = headers.slice(0, half);
  const secondHalf = headers.slice(half, half * 2);

  // 두 번째 절반이 첫 번째 절반과 일치하는지 확인
  const matches = firstHalf.every((h, i) => 
    h.toLowerCase() === secondHalf[i]?.toLowerCase()
  );

  if (matches) {
    return { detected: true, repeatCount: 2, baseColumns: half };
  }

  return null;
}

정규화: 각 행을 분할하고 수직으로 쌓기:

function normalizeHorizontallyDuplicatedTable(matrix, baseColumns) {
  const header = matrix[0].slice(0, baseColumns);
  const normalizedRows = [header];

  for (let i = 1; i < matrix.length; i++) {
    const row = matrix[i];
    // 첫 번째 절반
    normalizedRows.push(row.slice(0, baseColumns));
    // 두 번째 절반 (비어있지 않은 경우)
    const secondHalf = row.slice(baseColumns, baseColumns * 2);
    if (secondHalf.some(cell => cell.trim())) {
      normalizedRows.push(secondHalf);
    }
  }

  return normalizedRows;
}

통합 알고리즘

실제 파싱에서는 이 모든 케이스를 순서대로 확인해야 합니다:

function parseTable(table) {
  // 1. rowspan/colspan을 가상 그리드로 확장
  let matrix = expandRowspans(table);

  // 2. 네비게이션/타이틀 행 감지 및 건너뛰기
  const headerIndex = detectHeaderRowIndex(matrix);
  if (headerIndex > 0) {
    matrix = matrix.slice(headerIndex);
  }

  // 3. 그룹화된 헤더 처리 (FBREF 스타일)
  const groupedHeaders = detectGroupedColumnHeaders(matrix);
  if (groupedHeaders) {
    const mergedHeaders = mergeGroupAndSubHeaders(matrix[0], matrix[1]);
    matrix = [mergedHeaders, ...matrix.slice(2)];
  }

  // 4. 수평 복제 처리
  const duplication = detectHorizontalDuplication(matrix[0]);
  if (duplication) {
    matrix = normalizeHorizontallyDuplicatedTable(matrix, duplication.baseColumns);
  }

  return matrix;
}

이 엣지 케이스 테스트

위의 모든 패턴은 실제 버그 리포트에서 나왔습니다. 각각에 대한 HTML 픽스처가 포함된 테스트 스위트를 유지하고 있습니다:

// 테스트: 위키피디아 스타일 네비게이션 행
const navRowHtml = `
  <table>
    <tr><td colspan="3">v t e 국가</td></tr>
    <tr><td>순위</td><td>국가</td><td>인구</td></tr>
    <tr><td>1</td><td>중국</td><td>14억</td></tr>
  </table>
`;

const result = parseTable(parseHtml(navRowHtml));
assert(result[0][0] === "순위");  // 헤더 올바르게 식별
assert(result[1][1] === "중국");  // 데이터 올바르게 정렬

테스트 스위트에는 이 패턴들의 조합을 다루는 24개의 케이스가 있습니다. 새로운 버그 리포트가 새로운 테스트 케이스가 됩니다.

직접 사용해 보세요

테이블 추출을 만들고 있다면, 이 글이 디버깅 시간을 절약해주기를 바랍니다. 코드를 작성하지 않고 테이블만 내보내고 싶다면, HTML Table Exporter가 이 모든 케이스를 자동으로 처리합니다.

gauchogrid.com/ko/html-table-exporter에서 자세히 알아보거나 Chrome 웹 스토어에서 무료로 사용해 보세요.

파서를 깨뜨리는 테이블을 찾으셨나요? URL을 공유해 주세요. 저는 이런 엣지 케이스를 수집하고 있습니다.

Hoe Ik Geneste Tabellen en Rowspans Verwerk (De Moeilijke Onderdelen van HTML-tabelparsing)

circobit — Mon, 25 May 2026 12:30:00 +0000

Het parsen van HTML-tabellen lijkt eenvoudig — tot je echte data tegenkomt. Wikipedia-tabellen bevatten navigatierijen. Financiële sites gebruiken complexe rowspans. Sportstatistiekensites hebben headers die twee niveaus diep genest zijn.

Na het bouwen van HTML Table Exporter, een tabelextractietool die op duizenden verschillende sites wordt gebruikt, heb ik de randgevallen gecatalogiseerd die de meeste parsers breken. Hier lees je hoe je elk geval kunt aanpakken.

Probleem 1: Rowspan-uitbreiding

Een cel met rowspan="3" neemt verticale ruimte in beslag in de huidige rij en de volgende twee rijen. Als je naïef door row.cells itereert, raken je kolommen niet meer uitgelijnd.

De kapotte output:

| Land    | 2020 | 2021 | 2022 |    <- Header
| VS      | 100  | 200  | 300  |    <- Verwacht
| 150     | 250  | 350  |           <- "VS" ontbreekt (rowspan gaat door)

De oplossing: Houd bezette posities bij in een virtueel grid.

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

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

    Array.from(rowEl.cells).forEach(cell => {
      // Zoek de volgende vrije kolom
      while (grid[rowIndex][colIndex] !== undefined) {
        colIndex++;
      }

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

      // Markeer alle cellen die dit element overspant
      for (let r = 0; r < rowSpan; r++) {
        const targetRow = rowIndex + r;
        if (!grid[targetRow]) grid[targetRow] = [];

        for (let c = 0; c < colSpan; c++) {
          grid[targetRow][colIndex + c] = text;
        }
      }

      colIndex += colSpan;
    });
  });

  // Normaliseer rijlengtes
  const maxCols = Math.max(...grid.map(r => r.length));
  return grid.map(row => {
    const normalized = new Array(maxCols).fill("");
    row.forEach((val, i) => normalized[i] = val ?? "");
    return normalized;
  });
}

Kernpunt: Het virtuele grid is de bron van waarheid. De DOM-cellen zijn slechts instructies om het te vullen.

Probleem 2: Geneste Tabellen

Wikipedia-infoboxen bevatten vaak tabellen binnen tabelcellen. Een recursieve aanpak levert rommel op:

<table>
  <tr>
    <td>Land</td>
    <td>
      <table>  <!-- Genest! -->
        <tr><td>Bevolking</td><td>330M</td></tr>
      </table>
    </td>
  </tr>
</table>

Detectiestrategie: Controleer of een voorouder van de tabel ook een tabel is.

function isNestedTable(table) {
  let parent = table.parentElement;

  while (parent) {
    if (parent.tagName === "TABLE") {
      return true;
    }
    parent = parent.parentElement;
  }

  return false;
}

// Bij het scannen van een pagina
function getTopLevelTables() {
  const all = document.querySelectorAll("table");
  return Array.from(all).filter(t => !isNestedTable(t));
}

Maar hoe zit het met de inhoud van de geneste tabel?

Voor de buitenste tabel maak ik geneste tabellen plat tot hun tekstinhoud:

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

  // Verwijder geneste tabellen (hun tekst zit al in textContent)
  clone.querySelectorAll("table").forEach(t => t.remove());

  // Verwijder onzichtbare elementen
  clone.querySelectorAll("style, script").forEach(el => el.remove());

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

Probleem 3: Wikipedia-navigatierijen

Wikipedia-tabellen beginnen vaak met een navigatierij:

| v t e  Lijst van landen op bevolking |
| Rang | Land    | Bevolking |
| 1    | China   | 1,4 mld   |

Die "v t e"-rij (Bekijken/Overleg/Bewerken) is geen data — het is UI. Een parser die dit als headerrij behandelt, produceert rommel.

Voor een praktische handleiding over het omgaan met Wikipedia-tabellen, zie De 5 Beste Chrome-extensies voor het Exporteren van Tabellen.

Detectie:

function isWikipediaNavRow(row) {
  const firstCell = row[0] || "";

  // Veelvoorkomende patronen voor navigatierijen
  const patterns = [
    /^v\s+t\s+e\s/i,           // "v t e "
    /^\s*v\s*\|\s*t\s*\|\s*e/i, // "v | t | e"
    /^\[v\]\s*\[t\]\s*\[e\]/i   // "[v] [t] [e]"
  ];

  return patterns.some(p => p.test(firstCell));
}

function detectHeaderRowIndex(matrix) {
  for (let i = 0; i < Math.min(3, matrix.length - 1); i++) {
    if (isWikipediaNavRow(matrix[i])) {
      return i + 1;  // Header is de volgende rij
    }
  }
  return 0;  // Standaard: eerste rij is header
}

Probleem 4: Titelrijen (Alle Kolommen Overspannend)

Sommige tabellen hebben een titelrij die de volledige breedte overspant:

<table>
  <tr><td colspan="4">Kwartaalomzet (€ miljoenen)</td></tr>
  <tr><td>Q1</td><td>Q2</td><td>Q3</td><td>Q4</td></tr>
  <tr><td>100</td><td>120</td><td>115</td><td>130</td></tr>
</table>

Na rowspan-uitbreiding wordt de eerste rij ["Kwartaalomzet...", "Kwartaalomzet...", ...] — dezelfde waarde herhaald.

Detectie:

function isTitleRow(row, nextRow) {
  if (!row || !nextRow) return false;

  const uniqueValues = new Set(row.filter(v => v.trim()));
  const nextUniqueValues = new Set(nextRow.filter(v => v.trim()));

  // Kenmerken van een titelrij:
  // 1. Slechts één unieke waarde (herhaald via colspan)
  // 2. Volgende rij heeft meerdere unieke waarden (werkelijke headers)
  // 3. De enkele waarde is lange tekst (>30 tekens, typisch)

  return (
    uniqueValues.size === 1 &&
    nextUniqueValues.size > 2 &&
    row[0] && row[0].length > 30
  );
}

Probleem 5: Gegroepeerde Kolomheaders (FBREF-stijl)

Sportstatistiekensites zoals FBREF gebruiken headers met twee niveaus:

|         |        | Speeltijd         | Prestaties     |
| Speler  | Land   | WS | Basis | Min | Dls | Ast | xG |
| Haaland | Noorw. | 35 | 33    | 2950| 36  | 8   | 32 |

De eerste rij bevat groepsnamen. De tweede rij bevat de werkelijke kolomnamen. Beide zijn "headers."

De uitdaging: Na colspan-uitbreiding ziet rij 0 er zo uit:

["", "", "Speeltijd", "Speeltijd", "Speeltijd", "Prestaties", "Prestaties", "Prestaties"]

Detectieheuristieken:

function isGroupHeaderRow(row, nextRow) {
  if (!row || !nextRow || row.length !== nextRow.length) return false;

  // Tel hoeveel cellen dezelfde waarde hebben als hun buur
  let repeatCount = 0;
  for (let i = 1; i < row.length; i++) {
    if (row[i] && row[i] === row[i-1]) repeatCount++;
  }

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

  // Groepsheaderrijen hebben typisch 40%+ herhaalde waarden
  // EN de volgende rij heeft meer unieke waarden
  const uniqueInRow = new Set(row.filter(v => v.trim())).size;
  const uniqueInNext = new Set(nextRow.filter(v => v.trim())).size;

  return repeatRatio > 0.4 && uniqueInNext > uniqueInRow;
}

Groeps- en subheaders samenvoegen:

function mergeGroupAndSubHeaders(groupRow, subHeaderRow) {
  return subHeaderRow.map((subHeader, idx) => {
    const group = (groupRow[idx] || "").trim();
    const sub = (subHeader || "").trim();

    if (!group) return sub;
    if (!sub) return group;
    if (sub.toLowerCase() === group.toLowerCase()) return sub;

    return `${group} - ${sub}`;
  });
}

// Resultaat: ["Speler", "Land", "Speeltijd - WS", "Speeltijd - Basis", ...]

Probleem 6: Horizontaal Gedupliceerde Tabellen

Wikipedia-bevolkingstabellen hebben vaak deze structuur:

| Rang | Naam   | Bev.  | Rang | Naam    | Bev.  |
| 1    | Tokyo  | 37M   | 11   | Parijs  | 11M   |
| 2    | Delhi  | 32M   | 12   | Caïro   | 10M   |

Dit is ÉÉN logische tabel die in twee kolommen wordt weergegeven om verticale ruimte te besparen.

Detectie:

function detectHorizontalDuplication(headers) {
  const half = Math.floor(headers.length / 2);
  if (half < 2) return null;

  const firstHalf = headers.slice(0, half);
  const secondHalf = headers.slice(half, half * 2);

  // Controleer of de tweede helft overeenkomt met de eerste
  const matches = firstHalf.every((h, i) => 
    h.toLowerCase() === secondHalf[i]?.toLowerCase()
  );

  if (matches) {
    return { detected: true, repeatCount: 2, baseColumns: half };
  }

  return null;
}

Normalisatie: Splits elke rij en stapel ze verticaal:

function normalizeHorizontallyDuplicatedTable(matrix, baseColumns) {
  const header = matrix[0].slice(0, baseColumns);
  const normalizedRows = [header];

  for (let i = 1; i < matrix.length; i++) {
    const row = matrix[i];
    // Eerste helft
    normalizedRows.push(row.slice(0, baseColumns));
    // Tweede helft (als niet leeg)
    const secondHalf = row.slice(baseColumns, baseColumns * 2);
    if (secondHalf.some(cell => cell.trim())) {
      normalizedRows.push(secondHalf);
    }
  }

  return normalizedRows;
}

Het Gecombineerde Algoritme

Parsen in de echte wereld vereist het controleren van al deze gevallen op volgorde:

function parseTable(table) {
  // 1. Rowspans/colspans uitbreiden naar virtueel grid
  let matrix = expandRowspans(table);

  // 2. Navigatie-/titelrijen detecteren en overslaan
  const headerIndex = detectHeaderRowIndex(matrix);
  if (headerIndex > 0) {
    matrix = matrix.slice(headerIndex);
  }

  // 3. Gegroepeerde headers verwerken (FBREF-stijl)
  const groupedHeaders = detectGroupedColumnHeaders(matrix);
  if (groupedHeaders) {
    const mergedHeaders = mergeGroupAndSubHeaders(matrix[0], matrix[1]);
    matrix = [mergedHeaders, ...matrix.slice(2)];
  }

  // 4. Horizontale duplicatie verwerken
  const duplication = detectHorizontalDuplication(matrix[0]);
  if (duplication) {
    matrix = normalizeHorizontallyDuplicatedTable(matrix, duplication.baseColumns);
  }

  return matrix;
}

Deze Randgevallen Testen

Elk patroon hierboven komt uit een echte bugreport. Ik onderhoud een testsuite met HTML-fixtures voor elk geval:

// Test: Wikipedia-stijl navigatierij
const navRowHtml = `
  <table>
    <tr><td colspan="3">v t e Landen</td></tr>
    <tr><td>Rang</td><td>Land</td><td>Bev.</td></tr>
    <tr><td>1</td><td>China</td><td>1,4 mld</td></tr>
  </table>
`;

const result = parseTable(parseHtml(navRowHtml));
assert(result[0][0] === "Rang");  // Header correct geïdentificeerd
assert(result[1][1] === "China"); // Data correct uitgelijnd

De testsuite heeft 24 gevallen die combinaties van deze patronen afdekken. Nieuwe bugrapporten worden nieuwe testgevallen.

Probeer Het Zelf

Als je tabelextractie bouwt, hoop ik dat dit je debugtijd bespaart. Als je gewoon tabellen wilt exporteren zonder code te schrijven, verwerkt HTML Table Exporter al deze gevallen automatisch.

Meer informatie op gauchogrid.com/nl/html-table-exporter of probeer het gratis in de Chrome Web Store.

Een tabel gevonden die je parser breekt? Deel de URL — ik verzamel deze randgevallen.

Tableaux Imbriqués et Rowspans: Les Cas Difficiles du Parsing HTML

circobit — Mon, 25 May 2026 08:00:00 +0000

Parser des tableaux HTML semble simple jusqu'à ce que vous rencontriez des données réelles. Les tableaux Wikipedia ont des lignes de navigation. Les sites financiers utilisent des rowspans complexes. Les sites de statistiques sportives imbriquent les en-têtes sur deux niveaux.

Après avoir développé HTML Table Exporter, un outil d'extraction de tableaux utilisé sur des milliers de sites différents, j'ai catalogué les cas limites qui cassent la plupart des parsers. Voici comment gérer chacun d'entre eux.

Problème 1 : Expansion des Rowspan

Une cellule avec rowspan="3" occupe de l'espace vertical dans la ligne actuelle et les deux suivantes. Si vous itérez naïvement sur row.cells, vos colonnes se désalignent.

La sortie cassée :

| Pays    | 2020 | 2021 | 2022 |    <- En-tête
| France  | 100  | 200  | 300  |    <- Attendu
| 150     | 250  | 350  |           <- "France" manquant (rowspan)

La correction : Suivre les positions occupées dans une grille virtuelle.

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

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

    Array.from(rowEl.cells).forEach(cell => {
      // Trouver la prochaine colonne non occupée
      while (grid[rowIndex][colIndex] !== undefined) {
        colIndex++;
      }

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

      // Marquer toutes les cellules que cet élément couvre
      for (let r = 0; r < rowSpan; r++) {
        const targetRow = rowIndex + r;
        if (!grid[targetRow]) grid[targetRow] = [];

        for (let c = 0; c < colSpan; c++) {
          grid[targetRow][colIndex + c] = text;
        }
      }

      colIndex += colSpan;
    });
  });

  // Normaliser les longueurs de lignes
  const maxCols = Math.max(...grid.map(r => r.length));
  return grid.map(row => {
    const normalized = new Array(maxCols).fill("");
    row.forEach((val, i) => normalized[i] = val ?? "");
    return normalized;
  });
}

Point clé : La grille virtuelle est la source de vérité. Les cellules DOM ne sont que des instructions pour la remplir.

Problème 2 : Tables Imbriquées

Les infoboxes Wikipedia contiennent souvent des tableaux à l'intérieur de cellules. Une approche récursive extrait du charabia :

<table>
  <tr>
    <td>Pays</td>
    <td>
      <table>  <!-- Imbriqué ! -->
        <tr><td>Population</td><td>67M</td></tr>
      </table>
    </td>
  </tr>
</table>

Stratégie de détection : Vérifier si un ancêtre du tableau est aussi un tableau.

function isNestedTable(table) {
  let parent = table.parentElement;

  while (parent) {
    if (parent.tagName === "TABLE") {
      return true;
    }
    parent = parent.parentElement;
  }

  return false;
}

// En scannant une page
function getTopLevelTables() {
  const all = document.querySelectorAll("table");
  return Array.from(all).filter(t => !isNestedTable(t));
}

Mais qu'en est-il du contenu du tableau imbriqué ?

Pour le tableau externe, j'aplatis les tableaux imbriqués en leur contenu texte :

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

  // Supprimer les tableaux imbriqués (leur texte est déjà inclus via textContent)
  clone.querySelectorAll("table").forEach(t => t.remove());

  // Supprimer les éléments invisibles
  clone.querySelectorAll("style, script").forEach(el => el.remove());

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

Problème 3 : Lignes de Navigation Wikipedia

Les tableaux Wikipedia commencent souvent par une ligne de navigation :

| v t e  Liste des pays par population |
| Rang | Pays    | Population |
| 1    | Chine   | 1,4 Mrd   |

Cette ligne « v t e » (Voir/Talk/Edit) n'est pas de la donnée — c'est de l'interface. Un parser qui la traite comme l'en-tête produit du charabia.

Pour un guide pratique sur les tableaux Wikipedia, consultez Les 5 Meilleures Extensions Chrome pour Exporter des Tableaux.

Détection :

function isWikipediaNavRow(row) {
  const firstCell = row[0] || "";

  // Patterns courants pour les lignes de navigation
  const patterns = [
    /^v\s+t\s+e\s/i,           // "v t e "
    /^\s*v\s*\|\s*t\s*\|\s*e/i, // "v | t | e"
    /^\[v\]\s*\[t\]\s*\[e\]/i   // "[v] [t] [e]"
  ];

  return patterns.some(p => p.test(firstCell));
}

function detectHeaderRowIndex(matrix) {
  for (let i = 0; i < Math.min(3, matrix.length - 1); i++) {
    if (isWikipediaNavRow(matrix[i])) {
      return i + 1;  // L'en-tête est la ligne suivante
    }
  }
  return 0;  // Par défaut : la première ligne est l'en-tête
}

Problème 4 : Lignes de Titre (Couvrant Toutes les Colonnes)

Certains tableaux ont une ligne de titre qui couvre toute la largeur :

<table>
  <tr><td colspan="4">Chiffre d'affaires trimestriel (M€)</td></tr>
  <tr><td>T1</td><td>T2</td><td>T3</td><td>T4</td></tr>
  <tr><td>100</td><td>120</td><td>115</td><td>130</td></tr>
</table>

Après l'expansion des rowspan, la première ligne devient ["Chiffre d'affaires...", "Chiffre d'affaires...", ...] — la même valeur répétée.

Détection :

function isTitleRow(row, nextRow) {
  if (!row || !nextRow) return false;

  const uniqueValues = new Set(row.filter(v => v.trim()));
  const nextUniqueValues = new Set(nextRow.filter(v => v.trim()));

  // Caractéristiques d'une ligne de titre :
  // 1. Une seule valeur unique (répétée via colspan)
  // 2. La ligne suivante a plusieurs valeurs uniques (vrais en-têtes)
  // 3. La valeur unique est un texte long (>30 caractères typiquement)

  return (
    uniqueValues.size === 1 &&
    nextUniqueValues.size > 2 &&
    row[0] && row[0].length > 30
  );
}

Problème 5 : En-têtes de Colonnes Groupés (Style FBRef)

Les sites de statistiques sportives comme FBRef utilisent des en-têtes à deux niveaux :

|         |        | Temps de jeu      | Performance    |
| Joueur  | Nation | MJ | Titu | Min   | Buts | PD | xG |
| Mbappé  | France | 35 | 33   | 2950  | 36   | 8  | 32 |

La première ligne contient les noms de groupes. La deuxième contient les noms de colonnes réels. Les deux sont des « en-têtes ».

Le défi : Après l'expansion colspan, la ligne 0 ressemble à :

["", "", "Temps de jeu", "Temps de jeu", "Temps de jeu", "Performance", "Performance", "Performance"]

Heuristiques de détection :

function isGroupHeaderRow(row, nextRow) {
  if (!row || !nextRow || row.length !== nextRow.length) return false;

  // Compter combien de cellules ont la même valeur que leur voisine
  let repeatCount = 0;
  for (let i = 1; i < row.length; i++) {
    if (row[i] && row[i] === row[i-1]) repeatCount++;
  }

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

  // Les lignes d'en-tête groupé ont typiquement 40%+ de valeurs répétées
  // ET la ligne suivante a plus de valeurs uniques
  const uniqueInRow = new Set(row.filter(v => v.trim())).size;
  const uniqueInNext = new Set(nextRow.filter(v => v.trim())).size;

  return repeatRatio > 0.4 && uniqueInNext > uniqueInRow;
}

Fusion groupe + sous-en-têtes :

function mergeGroupAndSubHeaders(groupRow, subHeaderRow) {
  return subHeaderRow.map((subHeader, idx) => {
    const group = (groupRow[idx] || "").trim();
    const sub = (subHeader || "").trim();

    if (!group) return sub;
    if (!sub) return group;
    if (sub.toLowerCase() === group.toLowerCase()) return sub;

    return `${group} - ${sub}`;
  });
}

// Résultat : ["Joueur", "Nation", "Temps de jeu - MJ", "Temps de jeu - Titu", ...]

Problème 6 : Tableaux Dupliqués Horizontalement

Les tableaux de population Wikipedia ont souvent cette structure :

| Rang | Nom    | Pop   | Rang | Nom     | Pop   |
| 1    | Tokyo  | 37M   | 11   | Paris   | 11M   |
| 2    | Delhi  | 32M   | 12   | Le Caire| 10M   |

C'est UN seul tableau logique affiché en deux colonnes pour économiser de l'espace vertical.

Détection :

function detectHorizontalDuplication(headers) {
  const half = Math.floor(headers.length / 2);
  if (half < 2) return null;

  const firstHalf = headers.slice(0, half);
  const secondHalf = headers.slice(half, half * 2);

  // Vérifier si la seconde moitié correspond à la première
  const matches = firstHalf.every((h, i) =>
    h.toLowerCase() === secondHalf[i]?.toLowerCase()
  );

  if (matches) {
    return { detected: true, repeatCount: 2, baseColumns: half };
  }

  return null;
}

Normalisation : Séparer chaque ligne et empiler verticalement :

function normalizeHorizontallyDuplicatedTable(matrix, baseColumns) {
  const header = matrix[0].slice(0, baseColumns);
  const normalizedRows = [header];

  for (let i = 1; i < matrix.length; i++) {
    const row = matrix[i];
    // Première moitié
    normalizedRows.push(row.slice(0, baseColumns));
    // Seconde moitié (si non vide)
    const secondHalf = row.slice(baseColumns, baseColumns * 2);
    if (secondHalf.some(cell => cell.trim())) {
      normalizedRows.push(secondHalf);
    }
  }

  return normalizedRows;
}

L'Algorithme Combiné

Le parsing réel nécessite de vérifier tous ces cas en séquence :

function parseTable(table) {
  // 1. Expansion rowspans/colspans vers la grille virtuelle
  let matrix = expandRowspans(table);

  // 2. Détecter et sauter les lignes nav/titre
  const headerIndex = detectHeaderRowIndex(matrix);
  if (headerIndex > 0) {
    matrix = matrix.slice(headerIndex);
  }

  // 3. Gérer les en-têtes groupés (style FBRef)
  const groupedHeaders = detectGroupedColumnHeaders(matrix);
  if (groupedHeaders) {
    const mergedHeaders = mergeGroupAndSubHeaders(matrix[0], matrix[1]);
    matrix = [mergedHeaders, ...matrix.slice(2)];
  }

  // 4. Gérer la duplication horizontale
  const duplication = detectHorizontalDuplication(matrix[0]);
  if (duplication) {
    matrix = normalizeHorizontallyDuplicatedTable(matrix, duplication.baseColumns);
  }

  return matrix;
}

Tester Ces Cas Limites

Chaque pattern ci-dessus vient d'un vrai bug report. Je maintiens une suite de tests avec des fixtures HTML pour chacun :

// Test : ligne de navigation style Wikipedia
const navRowHtml = `
  <table>
    <tr><td colspan="3">v t e Pays</td></tr>
    <tr><td>Rang</td><td>Pays</td><td>Pop</td></tr>
    <tr><td>1</td><td>Chine</td><td>1,4 Mrd</td></tr>
  </table>
`;

const result = parseTable(parseHtml(navRowHtml));
assert(result[0][0] === "Rang");   // En-tête correctement identifié
assert(result[1][1] === "Chine");  // Données correctement alignées

La suite de tests a 24 cas couvrant les combinaisons de ces patterns. Les nouveaux bug reports deviennent de nouveaux cas de test.

Essayez Vous-Même

Si vous construisez de l'extraction de tableaux, j'espère que cela vous fera gagner du temps de débogage. Si vous avez juste besoin d'exporter des tableaux sans écrire de code, HTML Table Exporter gère tous ces cas automatiquement.

En savoir plus sur gauchogrid.com/fr/html-table-exporter ou essayez-le gratuitement sur le Chrome Web Store.

Vous avez trouvé un tableau qui casse votre parser ? Partagez l'URL ; je collectionne ces cas limites.

Automatizando Exportação de Tabelas Web com JavaScript: Um Guia Prático

circobit — Thu, 21 May 2026 12:00:00 +0000

Você encontrou uma tabela num site. Precisa desses dados numa planilha. O caminho óbvio — copiar, colar, limpar no Excel — funciona uma vez. Mas e se você precisa desses dados toda semana? Ou de 50 páginas diferentes?

Este guia mostra como extrair tabelas HTML programaticamente com JavaScript, lidar com os casos extremos que quebram abordagens ingênuas, e exportar para formatos que suas ferramentas realmente aceitam.

A Abordagem Ingênua (E Por Que Ela Falha)

A extração mais simples é assim:

function extractTable(table) {
  return Array.from(table.rows).map(row => 
    Array.from(row.cells).map(cell => cell.textContent.trim())
  );
}

Funciona para tabelas simples. Quebra imediatamente quando você encontra:

Rowspan/colspan — Células que abrangem múltiplas linhas ou colunas
Tabelas aninhadas — Tabelas dentro de células de tabela
Conteúdo oculto — Elementos <style>, <script> ou display:none
Caracteres especiais — Quebras de linha, tabulações e aspas no conteúdo das células

Vamos corrigir cada um.

Lidando com Rowspan e Colspan

Quando uma célula tem rowspan="2", ela ocupa espaço na linha atual E na próxima. Um extrator ingênuo vê menos células do que o esperado e desalinha as colunas.

A solução: construir um grid virtual que rastreia posições ocupadas.

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

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

    let colIndex = 0;

    Array.from(rowEl.cells).forEach(cell => {
      // Pular colunas já ocupadas por rowspans anteriores
      while (grid[rowIndex][colIndex] !== undefined) {
        colIndex++;
      }

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

      // Preencher o bloco retangular que esta célula ocupa
      for (let r = 0; r < rowSpan; r++) {
        const targetRow = rowIndex + r;
        if (!grid[targetRow]) grid[targetRow] = [];

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

      colIndex += colSpan;
    });
  });

  return grid;
}

Agora uma tabela assim:

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

Se torna corretamente:

[
  ["A", "B"],
  ["A", "C"]  // "A" aparece em ambas as linhas
]

Extraindo Texto Limpo

textContent pega tudo — incluindo regras CSS em tags <style> e JavaScript em tags <script> que algumas páginas injetam nas células da tabela.

Extração limpa requer filtragem:

function extractCellText(cell) {
  if (!cell) return "";

  // Clonar para evitar modificar o DOM
  const clone = cell.cloneNode(true);

  // Remover elementos invisíveis
  const invisibleSelectors = "style, script, noscript, template, link";
  clone.querySelectorAll(invisibleSelectors).forEach(el => el.remove());

  // Normalizar espaços em branco
  return (clone.textContent || "").replace(/\s+/g, " ").trim();
}

Detectando Tabelas Aninhadas

Quando uma tabela contém outra tabela em uma célula, você normalmente quer os dados da tabela externa, não uma bagunça recursiva.

A detecção é simples:

function isNestedTable(table, allTables) {
  let parent = table.parentElement;

  while (parent) {
    if (parent.tagName === "TABLE") {
      return true;  // Esta tabela está dentro de outra tabela
    }
    parent = parent.parentElement;
  }

  return false;
}

// Filtrar ao escanear uma página
const allTables = document.querySelectorAll("table");
const topLevelTables = Array.from(allTables)
  .filter(t => !isNestedTable(t, allTables));

Convertendo para CSV

CSV parece simples até você precisar lidar com:

Vírgulas dentro de valores
Aspas dentro de valores
Quebras de linha dentro de valores

A abordagem compatível com RFC 4180:

function toCSV(rows, delimiter = ",") {
  return rows.map(row =>
    row.map(cell => {
      if (cell == null) cell = "";
      const str = String(cell);

      // Colocar entre aspas se contém delimitador, aspas ou quebras de linha
      const needsQuotes = str.includes(delimiter) || /["\r\n]/.test(str);
      const escaped = str.replace(/"/g, '""');

      return needsQuotes ? `"${escaped}"` : escaped;
    }).join(delimiter)
  ).join("\r\n");
}

Isso lida corretamente com o caso pesadelo:

toCSV([['Diga "Olá, Mundo"', "Normal"]])
// '"Diga ""Olá, Mundo""",Normal'

Para um guia completo sobre exportações CSV, veja As 5 Melhores Extensões Chrome para Exportar Tabelas.

Convertendo para JSON

Para exportação JSON, a primeira linha se torna as chaves:

function toJSON(rows) {
  if (rows.length < 2) return "[]";

  const headers = rows[0].map((h, i) => sanitizeKey(h, i));
  const dataRows = rows.slice(1);

  const objects = dataRows.map(row => {
    const obj = {};
    headers.forEach((key, i) => {
      obj[key] = row[i] ?? "";
    });
    return obj;
  });

  return JSON.stringify(objects, null, 2);
}

function sanitizeKey(header, index) {
  let key = (header || "").toString().trim();

  if (!key) return `col_${index + 1}`;

  // Normalizar para snake_case minúsculo
  return key
    .normalize("NFD")
    .replace(/[\u0300-\u036f]/g, "")  // Remover acentos
    .toLowerCase()
    .replace(/[^a-z0-9]+/g, "_")
    .replace(/^_+|_+$/g, "");
}

Entrada:

| Nome Produto | Preço (R$) |
|--------------|------------|
| Widget       | 29,99      |

Saída:

[
  {
    "nome_produto": "Widget",
    "preco": "29.99"
  }
]

Disparando o Download

No contexto do navegador, você pode disparar um download sem servidor:

function downloadFile(content, filename, mimeType) {
  const blob = new Blob([content], { type: mimeType });
  const url = URL.createObjectURL(blob);

  const link = document.createElement("a");
  link.href = url;
  link.download = filename;
  link.click();

  URL.revokeObjectURL(url);
}

// Uso
const csv = toCSV(extractTableMatrix(table));
downloadFile(csv, "dados.csv", "text/csv;charset=utf-8");

Juntando Tudo

Aqui está um bookmarklet mínimo que exporta a primeira tabela de qualquer página:

javascript:(function(){
  const table = document.querySelector("table");
  if (!table) { alert("Nenhuma tabela encontrada"); return; }

  function extractTableMatrix(table) {
    const rows = Array.from(table.rows);
    const grid = [];
    rows.forEach((rowEl, ri) => {
      if (!grid[ri]) grid[ri] = [];
      let ci = 0;
      Array.from(rowEl.cells).forEach(cell => {
        while (grid[ri][ci] !== undefined) ci++;
        const text = cell.textContent.trim();
        const rs = parseInt(cell.rowSpan) || 1;
        const cs = parseInt(cell.colSpan) || 1;
        for (let r = 0; r < rs; r++) {
          if (!grid[ri+r]) grid[ri+r] = [];
          for (let c = 0; c < cs; c++) {
            if (grid[ri+r][ci+c] === undefined) grid[ri+r][ci+c] = text;
          }
        }
        ci += cs;
      });
    });
    return grid;
  }

  const data = extractTableMatrix(table);
  const csv = data.map(row => 
    row.map(c => c.includes(",") ? `"${c}"` : c).join(",")
  ).join("\n");

  const blob = new Blob([csv], {type: "text/csv"});
  const link = document.createElement("a");
  link.href = URL.createObjectURL(blob);
  link.download = "tabela.csv";
  link.click();
})();

Quando Usar uma Extensão de Navegador

Esse código funciona, mas mantê-lo em diferentes sites é tedioso. Se você extrai tabelas regularmente, uma extensão de navegador cuida de:

Múltiplas tabelas por página
Seleção de formato (CSV, JSON, Excel)
Limpeza de dados (normalização de números, tratamento de nulos)
Seleção e reordenação de colunas

Eu criei o HTML Table Exporter exatamente para esse fluxo de trabalho. Os algoritmos centrais são similares ao que foi mostrado aqui, empacotados numa interface usável.

Saiba mais em gauchogrid.com/pt-br/html-table-exporter ou experimente gratuitamente na Chrome Web Store.

Dúvidas sobre casos extremos de extração de tabelas? Deixe um comentário — provavelmente já encontrei o mesmo problema.

HTML Tables with Hidden Data: Scraping What You Can't See

circobit — Wed, 20 May 2026 14:00:00 +0000

The table shows 10 columns. You export it. The CSV has 10 columns.

But the page has 15 columns of data. Where did the other 5 go?

HTML tables often contain more data than what's visible. Hidden columns, data attributes, collapsed rows—all invisible to basic extraction methods.

Here's how to find and extract the data you can't see.

Types of Hidden Data

1. CSS-Hidden Columns

The simplest case: columns exist in the DOM but are hidden with CSS.

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

Or via classes:

.hidden-column { display: none; }

Why sites do this: Mobile responsiveness (hide columns on small screens), internal data for JavaScript, progressive disclosure.

How to detect: Open DevTools, inspect the table, look for cells with display: none or visibility: hidden.

2. Data Attributes

HTML5 allows custom data-* attributes on any element. Tables use these to store metadata that JavaScript accesses but users don't see.

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

The visible table shows "Laptop" and "$999". But the row carries three extra data points.

Common data attributes:

data-id — internal identifier
data-sort-value — numeric value for sorting (when display shows "Jan 2024" but sort needs 202401)
data-raw — unformatted value (when display shows "$1.2M" but data is 1200000)
data-href — link URL

3. Title and Tooltip Attributes

The title attribute provides hover text that often contains additional information.

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

The cell displays "Jan 15". The full timestamp is in the tooltip.

4. Collapsed/Expandable Rows

Tables with drill-down functionality hide detail rows until clicked.

<tr class="parent-row">
  <td>Category A</td>
  <td>$50,000</td>
</tr>
<tr class="child-row" style="display: none;">
  <td>— Subcategory A1</td>
  <td>$30,000</td>
</tr>
<tr class="child-row" style="display: none;">
  <td>— Subcategory A2</td>
  <td>$20,000</td>
</tr>

The data exists. It's just not expanded.

5. Lazy-Loaded Content

Some tables show a subset and load more via JavaScript when you scroll or click "Load More."

<table id="results">
  <!-- First 20 rows rendered -->
</table>
<button onclick="loadMore()">Show More Results</button>

The remaining data isn't in the DOM until you trigger loading.

Extracting Hidden Data

Extracting CSS-Hidden Columns

With JavaScript (in browser console):

// Remove display:none from all cells
document.querySelectorAll('td, th').forEach(el => {
  el.style.display = '';
});

Now export normally—the columns are visible.

With Python + BeautifulSoup:

BeautifulSoup ignores CSS. It extracts all elements regardless of visibility.

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)  # Includes hidden columns

Extracting Data Attributes

JavaScript approach:

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

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

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

Python approach:

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

    # Get cell text
    cells = [td.get_text(strip=True) for td in row.find_all('td')]

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

Extracting Title Attributes

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

Expanding Collapsed Rows

Option 1: Click all expanders

// Find and click all expand buttons
document.querySelectorAll('.expand-btn, .toggle-row').forEach(btn => {
  btn.click();
});

// Wait for DOM to update, then export
setTimeout(() => {
  // Export logic here
}, 1000);

Option 2: Remove hidden class

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

Triggering Lazy Load

This is trickier—you need to simulate the action that triggers loading.

// Scroll to bottom to trigger infinite scroll
window.scrollTo(0, document.body.scrollHeight);

// Or click "Load More" repeatedly
const loadMore = document.querySelector('.load-more-btn');
while (loadMore && !loadMore.disabled) {
  loadMore.click();
  await new Promise(r => setTimeout(r, 500)); // Wait for load
}

Real-World Example: Sort Values

Sports statistics tables often display formatted numbers but sort by raw values.

<td data-sort="1234567">1.23M</td>
<td data-sort="20240115">Jan 15, 2024</td>
<td data-sort="0.347">34.7%</td>

If you only extract the visible text, you get formatted strings that won't sort or calculate correctly.

Extraction with both values:

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

When Browser Extensions Help

Good table export tools handle some of this automatically:

CSS-hidden columns can be included via option
Data attributes can be extracted as additional columns
Number normalization can parse "$1.23M" into 1230000

HTML Table Exporter extracts visible content with proper handling of merged cells and formatting. For more complex extraction needs without code, see our guide on scraping tables from websites without code.

For data attributes and deeply hidden content, you may need the JavaScript approaches above.

The Inspection Workflow

Before extracting any table:

Open DevTools (F12)
Inspect the table element
Check for:
- display: none on columns
- data-* attributes on rows/cells
- title attributes with extra info
- Hidden child rows
- "Load more" buttons
Decide: Is the visible data enough, or do you need the hidden data?

Most of the time, visible data is sufficient. But when it's not, knowing how to find and extract hidden data makes the difference.

Summary

HTML tables can contain multiple layers of data:

Layer	How to Access
Visible text	Standard export
CSS-hidden columns	Remove display:none or use BeautifulSoup
Data attributes	JavaScript dataset or Python attrs
Title/tooltips	Extract title attribute
Collapsed rows	Expand or remove hidden class
Lazy-loaded	Trigger loading first

The data is usually there. You just need to know where to look.

Need to export the data you can see? Learn more at gauchogrid.com/html-table-exporter or try HTML Table Exporter free on the Chrome Web Store.

La Complejidad Oculta de las Tablas HTML

circobit — Wed, 20 May 2026 13:30:00 +0000

Las tablas HTML parecen simples. Filas y celdas. ¿Qué puede salir mal?

Todo, resulta ser.

Pasé meses construyendo HTML Table Exporter, una herramienta de extracción de tablas, y aprendí que las tablas HTML son engañosamente complejas. Aquí va lo que nadie te dice cuando empiezas a parsearlas.

El Enfoque Ingenuo (Que Se Rompe Inmediatamente)

Tu primer intento probablemente se vea así:

function extractTable(table) {
  return Array.from(table.rows).map(row =>
    Array.from(row.cells).map(cell => cell.textContent.trim())
  );
}

Limpio, simple, incorrecto.

Funciona para tablas básicas. Pero la web real está llena de tablas que van a romper este código de formas creativas.

Problema 1: Rowspan y Colspan

Las celdas HTML pueden abarcar múltiples filas o columnas:

<table>
  <tr>
    <td rowspan="3">Categoría A</td>
    <td>Ítem 1</td>
    <td>$10</td>
  </tr>
  <tr>
    <td>Ítem 2</td>
    <td>$20</td>
  </tr>
  <tr>
    <td>Ítem 3</td>
    <td>$30</td>
  </tr>
</table>

El enfoque ingenuo te da:

Fila 0: ["Categoría A", "Ítem 1", "$10"]
Fila 1: ["Ítem 2", "$20"]           // ¡Solo 2 celdas!
Fila 2: ["Ítem 3", "$30"]           // ¡Solo 2 celdas!

Las filas 1 y 2 les falta una columna. Tu alineación de columnas ahora está rota.

La Solución: Construir una Grilla Virtual

Necesitas rastrear qué celdas están "ocupadas" por spans de filas anteriores:

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

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

    // Saltar columnas ya ocupadas por rowspans
    while (grid[rowIndex][colIndex] !== undefined) {
      colIndex++;
    }

    Array.from(rowEl.cells).forEach((cell) => {
      // Seguir avanzando pasando columnas ocupadas
      while (grid[rowIndex][colIndex] !== undefined) {
        colIndex++;
      }

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

      // Llenar toda la región del span
      for (let r = 0; r < rowSpan; r++) {
        for (let c = 0; c < colSpan; c++) {
          const targetRow = rowIndex + r;
          const targetCol = colIndex + c;

          if (!grid[targetRow]) grid[targetRow] = [];
          if (grid[targetRow][targetCol] === undefined) {
            grid[targetRow][targetCol] = text;
          }
        }
      }

      colIndex += colSpan;
    });
  });

  return grid;
}

Ahora obtienes:

Fila 0: ["Categoría A", "Ítem 1", "$10"]
Fila 1: ["Categoría A", "Ítem 2", "$20"]
Fila 2: ["Categoría A", "Ítem 3", "$30"]

El valor de la celda que abarca se duplica en cada posición que ocupa.

Problema 2: Tablas Anidadas

Algunos sitios usan tablas dentro de tablas para layout:

<table>
  <tr>
    <td>
      <table>
        <tr><td>Contenido anidado</td></tr>
      </table>
    </td>
    <td>Celda normal</td>
  </tr>
</table>

Usar cell.textContent captura todo, incluyendo el contenido de la tabla anidada. Usar cell.innerText podría ayudar, pero es inconsistente entre navegadores.

La Solución: Clonar y Remover

function extractCellText(cell) {
  if (!cell) return "";

  // Clonar para evitar modificar el DOM
  const clone = cell.cloneNode(true);

  // Remover contenido invisible y anidado
  const removeSelectors = "style, script, noscript, template, table";
  clone.querySelectorAll(removeSelectors).forEach(el => el.remove());

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

Problema 3: Los Headers No Siempre Están en la Fila 0

Muchas tablas tienen filas de título, filas de navegación, u otro contenido antes de los headers reales:

<table>
  <tr>
    <td colspan="3">Reporte de Ventas Trimestrales 2024</td>
  </tr>
  <tr>
    <th>Región</th>
    <th>Q1</th>
    <th>Q2</th>
  </tr>
  <tr>
    <td>Norte</td>
    <td>$1.2M</td>
    <td>$1.4M</td>
  </tr>
</table>

Si asumes que la fila 0 son los headers, vas a tener "Reporte de Ventas Trimestrales 2024" como nombre de columna.

La Solución: Detectar la Fila de Headers

function detectHeaderRowIndex(matrix) {
  for (let i = 0; i < Math.min(matrix.length - 1, 3); i++) {
    const row = matrix[i];
    const nextRow = matrix[i + 1];

    // Contar valores únicos
    const uniqueValues = new Set(row.filter(c => c && c.trim()));
    const uniqueNext = new Set(nextRow.filter(c => c && c.trim()));

    // Fila de título: 1 valor único (abarca todas las columnas),
    // la siguiente fila tiene más
    const isTitleRow = 
      uniqueValues.size === 1 && 
      uniqueNext.size > 1 &&
      row[0]?.length > 30;

    if (isTitleRow) {
      return i + 1; // Los headers están en la siguiente fila
    }
  }

  return 0;
}

Problema 4: Celdas Vacías y Columnas Inconsistentes

Algunas filas tienen menos celdas que otras. Algunas celdas están completamente vacías. Algunas tienen solo espacio en blanco o  .

// Normalizar todas las filas al mismo largo
function normalizeMatrix(grid) {
  const maxCols = Math.max(...grid.map(row => row.length));

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

Problema 5: Contenido Invisible

Las tablas pueden contener contenido que está visualmente oculto pero presente en el DOM:

Bloques <style> para CSS con scope
Etiquetas <script>
Elementos con display: none
Caracteres de ancho cero

const invisibleSelectors = [
  "style",
  "script", 
  "noscript",
  "template",
  "[hidden]",
  "[style*='display: none']",
  "[style*='display:none']"
].join(", ");

clone.querySelectorAll(invisibleSelectors).forEach(el => el.remove());

Problema 6: Codificación de Caracteres

Las tablas de diferentes fuentes usan diferentes codificaciones:

  (espacio no-rompible)
— y – (guiones)
Comillas tipográficas vs comillas rectas
UTF-8 vs ISO-8859-1

Siempre normalizar:

function normalizeText(text) {
  return text
    .replace(/\u00a0/g, " ")           // Espacio no-rompible
    .replace(/[\u2018\u2019]/g, "'")   // Comillas simples tipográficas
    .replace(/[\u201c\u201d]/g, '"')   // Comillas dobles tipográficas
    .replace(/[\u2013\u2014]/g, "-")   // Guiones medio/largo
    .trim();
}

El Pipeline Completo

Después de manejar todos estos casos, mi pipeline de extracción se ve así:

function extractTable(tableElement) {
  // 1. Construir grilla virtual (maneja rowspan/colspan)
  let matrix = extractTableMatrix(tableElement);

  // 2. Normalizar a conteo de columnas consistente
  matrix = normalizeMatrix(matrix);

  // 3. Encontrar la fila de headers real
  const headerIndex = detectHeaderRowIndex(matrix);

  // 4. Remover filas de título
  if (headerIndex > 0) {
    matrix = matrix.slice(headerIndex);
  }

  // 5. Limpiar todo el texto de celdas
  matrix = matrix.map(row => 
    row.map(cell => normalizeText(extractCellText(cell)))
  );

  return matrix;
}

Casos de Borde Que Encontré

Después de procesar miles de tablas, estos son algunos casos de borde del mundo real:

Fuente	Problema	Solución
Wikipedia	Filas de navegación "v t e"	Detección de patrón + saltar
Wikipedia	Columnas duplicadas horizontalmente	Detectar headers repetidos, desapilar
FBRef	Headers de columna agrupados	Fusionar grupo + sub-header
Sitios financieros	Números como `1.234.567,89`	Normalización sensible al locale
Sitios gubernamentales	Tablas dentro de `<form>`	Ignorar wrapper del form

Lecciones Aprendidas

Nunca confíes en la estructura del DOM. Construye tu propia representación normalizada.
Prueba con casos de borde temprano. Wikipedia, FBRef y sitios gubernamentales son excelentes stress tests.
Normaliza todo. Espacios, codificación, conteo de columnas—hazlo consistente.
Los headers necesitan detección. No asumas que la fila 0 es el header.
Los spans son el enemigo. El enfoque de construir una grilla los maneja limpiamente.

Si quieres saltarte toda esta complejidad, HTML Table Exporter maneja estos casos de borde automáticamente. Un clic para exportar cualquier tabla a CSV, JSON o Excel.

Para ver cómo se compara con otras herramientas similares, mira nuestra guía de las mejores extensiones de Chrome para exportar tablas.

Conoce más en gauchogrid.com/es/html-table-exporter o pruébala gratis en la Chrome Web Store.

Pero si estás construyendo tu propio parser, espero que esto te ahorre algo de tiempo depurando. El rabbit hole es profundo.

¿Cuál es la estructura de tabla más rara que encontraste? Compártela en los comentarios. Colecciono casos de borde.

JavaScriptでWebテーブルエクスポートを自動化する実践ガイド

circobit — Wed, 20 May 2026 00:00:00 +0000

Webサイトでテーブルを見つけました。そのデータをスプレッドシートに取り込みたい。コピー→ペースト→Excelでクリーンアップという方法は一度なら使えます。でも、このデータが毎週必要だったら？50ページ分必要だったら？

このガイドでは、HTMLテーブルをJavaScriptでプログラム的に抽出し、素朴なアプローチを壊すエッジケースに対処し、ツールが実際に受け入れるフォーマットにエクスポートする方法を解説します。

素朴なアプローチ（そしてなぜ失敗するか）

最もシンプルな抽出はこんな感じです：

function extractTable(table) {
  return Array.from(table.rows).map(row => 
    Array.from(row.cells).map(cell => cell.textContent.trim())
  );
}

これはシンプルなテーブルなら動きます。以下に遭遇すると即座に壊れます：

rowspan/colspan — 複数行・複数列にまたがるセル
ネストテーブル — テーブルセル内のテーブル
隠しコンテンツ — <style>、<script>、display:none の要素
特殊文字 — セル内の改行、タブ、引用符

それぞれ修正していきましょう。

rowspanとcolspanの処理

セルに rowspan="2" がある場合、現在の行と次の行のスペースを占有します。素朴な抽出では、期待より少ないセルが取得され、列がずれます。

解決策：占有済みの位置を追跡する仮想グリッドを構築します。

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

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

    let colIndex = 0;

    Array.from(rowEl.cells).forEach(cell => {
      // 前のrowspanで占有済みの列をスキップ
      while (grid[rowIndex][colIndex] !== undefined) {
        colIndex++;
      }

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

      // このセルが占有する矩形ブロックを埋める
      for (let r = 0; r < rowSpan; r++) {
        const targetRow = rowIndex + r;
        if (!grid[targetRow]) grid[targetRow] = [];

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

      colIndex += colSpan;
    });
  });

  return grid;
}

これにより、以下のテーブル：

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

が正しく以下のようになります：

[
  ["A", "B"],
  ["A", "C"]  // "A" が両方の行に表示される
]

クリーンなテキスト抽出

textContent はすべてを取得します — 一部のページがテーブルセルに挿入する <style> タグのCSSルールや <script> タグのJavaScriptも含めて。

クリーンな抽出にはフィルタリングが必要です：

function extractCellText(cell) {
  if (!cell) return "";

  // DOMを変更しないようにクローン
  const clone = cell.cloneNode(true);

  // 不可視要素を削除
  const invisibleSelectors = "style, script, noscript, template, link";
  clone.querySelectorAll(invisibleSelectors).forEach(el => el.remove());

  // 空白を正規化
  return (clone.textContent || "").replace(/\s+/g, " ").trim();
}

ネストテーブルの検出

テーブルのセル内に別のテーブルが含まれている場合、通常は外側のテーブルのデータが欲しいのであって、再帰的な混乱ではありません。

検出は簡単です：

function isNestedTable(table, allTables) {
  let parent = table.parentElement;

  while (parent) {
    if (parent.tagName === "TABLE") {
      return true;  // このテーブルは別のテーブルの中にある
    }
    parent = parent.parentElement;
  }

  return false;
}

// ページをスキャンする際のフィルタリング
const allTables = document.querySelectorAll("table");
const topLevelTables = Array.from(allTables)
  .filter(t => !isNestedTable(t, allTables));

CSVへの変換

CSVは以下の処理が必要になるまではシンプルに見えます：

値の中のカンマ
値の中の引用符
値の中の改行

RFC 4180準拠のアプローチ：

function toCSV(rows, delimiter = ",") {
  return rows.map(row =>
    row.map(cell => {
      if (cell == null) cell = "";
      const str = String(cell);

      // デリミタ、引用符、改行を含む場合はクォート
      const needsQuotes = str.includes(delimiter) || /["\r\n]/.test(str);
      const escaped = str.replace(/"/g, '""');

      return needsQuotes ? `"${escaped}"` : escaped;
    }).join(delimiter)
  ).join("\r\n");
}

これにより、悪夢のようなケースも正しく処理されます：

toCSV([['Say "Hello, World"', "Normal"]])
// '"Say ""Hello, World""",Normal'

CSVエクスポートの完全ガイドは、テーブルエクスポートに最適なChrome拡張機能もご参照ください。

JSONへの変換

JSONエクスポートでは、最初の行がキーになります：

function toJSON(rows) {
  if (rows.length < 2) return "[]";

  const headers = rows[0].map((h, i) => sanitizeKey(h, i));
  const dataRows = rows.slice(1);

  const objects = dataRows.map(row => {
    const obj = {};
    headers.forEach((key, i) => {
      obj[key] = row[i] ?? "";
    });
    return obj;
  });

  return JSON.stringify(objects, null, 2);
}

function sanitizeKey(header, index) {
  let key = (header || "").toString().trim();

  if (!key) return `col_${index + 1}`;

  // 小文字のsnake_caseに正規化
  return key
    .normalize("NFD")
    .replace(/[\u0300-\u036f]/g, "")  // アクセントを削除
    .toLowerCase()
    .replace(/[^a-z0-9]+/g, "_")
    .replace(/^_+|_+$/g, "");
}

入力：

| 商品名   | 価格 (¥) |
|---------|---------|
| ウィジェット | 2,999   |

出力：

[
  {
    "商品名": "ウィジェット",
    "価格": "2,999"
  }
]

ダウンロードのトリガー

ブラウザコンテキストでは、サーバーなしでダウンロードをトリガーできます：

function downloadFile(content, filename, mimeType) {
  const blob = new Blob([content], { type: mimeType });
  const url = URL.createObjectURL(blob);

  const link = document.createElement("a");
  link.href = url;
  link.download = filename;
  link.click();

  URL.revokeObjectURL(url);
}

// 使用例
const csv = toCSV(extractTableMatrix(table));
downloadFile(csv, "data.csv", "text/csv;charset=utf-8");

すべてを組み合わせる

任意のページの最初のテーブルをエクスポートする最小限のブックマークレット：

javascript:(function(){
  const table = document.querySelector("table");
  if (!table) { alert("テーブルが見つかりません"); return; }

  function extractTableMatrix(table) {
    const rows = Array.from(table.rows);
    const grid = [];
    rows.forEach((rowEl, ri) => {
      if (!grid[ri]) grid[ri] = [];
      let ci = 0;
      Array.from(rowEl.cells).forEach(cell => {
        while (grid[ri][ci] !== undefined) ci++;
        const text = cell.textContent.trim();
        const rs = parseInt(cell.rowSpan) || 1;
        const cs = parseInt(cell.colSpan) || 1;
        for (let r = 0; r < rs; r++) {
          if (!grid[ri+r]) grid[ri+r] = [];
          for (let c = 0; c < cs; c++) {
            if (grid[ri+r][ci+c] === undefined) grid[ri+r][ci+c] = text;
          }
        }
        ci += cs;
      });
    });
    return grid;
  }

  const data = extractTableMatrix(table);
  const csv = data.map(row => 
    row.map(c => c.includes(",") ? `"${c}"` : c).join(",")
  ).join("\n");

  const blob = new Blob([csv], {type: "text/csv"});
  const link = document.createElement("a");
  link.href = URL.createObjectURL(blob);
  link.download = "table.csv";
  link.click();
})();

ブラウザ拡張機能を使うべきタイミング

このコードは動きますが、異なるサイト間でメンテナンスするのは面倒です。テーブルを定期的に抽出するなら、ブラウザ拡張機能が以下を処理してくれます：

ページあたり複数テーブル
フォーマット選択（CSV、JSON、Excel）
データクリーニング（数値正規化、Null処理）
列の選択と並び替え

まさにこのワークフローのために HTML Table Exporter を作りました。コアアルゴリズムはここで示したものと同様で、使いやすいUIにパッケージングされています。

詳しくは gauchogrid.com/ja/html-table-exporter をご覧いただくか、Chrome Web Store で無料でお試しください。

テーブル抽出のエッジケースについて質問は？コメントでどうぞ。たぶん経験済みです。

Die versteckte Komplexität von HTML-Tabellen

circobit — Tue, 19 May 2026 07:30:00 +0000

HTML-Tabellen sehen einfach aus. Zeilen und Zellen. Was soll da schiefgehen?

Alles, wie sich herausstellt.

Ich habe Monate damit verbracht, HTML Table Exporter zu bauen, ein Tool zur Tabellenextraktion, und dabei gelernt, dass HTML-Tabellen trügerisch komplex sind. Hier ist, was dir niemand sagt, wenn du anfängst, sie zu parsen.

Der naive Ansatz (der sofort bricht)

Dein erster Versuch sieht wahrscheinlich so aus:

function extractTable(table) {
  return Array.from(table.rows).map(row =>
    Array.from(row.cells).map(cell => cell.textContent.trim())
  );
}

Sauber, einfach, falsch.

Das funktioniert für einfache Tabellen. Aber das echte Web ist voll von Tabellen, die diesen Code auf kreative Weise zum Scheitern bringen.

Problem 1: Rowspan und Colspan

HTML-Zellen können mehrere Zeilen oder Spalten überspannen:

<table>
  <tr>
    <td rowspan="3">Kategorie A</td>
    <td>Artikel 1</td>
    <td>10 €</td>
  </tr>
  <tr>
    <td>Artikel 2</td>
    <td>20 €</td>
  </tr>
  <tr>
    <td>Artikel 3</td>
    <td>30 €</td>
  </tr>
</table>

Der naive Ansatz liefert:

Zeile 0: ["Kategorie A", "Artikel 1", "10 €"]
Zeile 1: ["Artikel 2", "20 €"]           // Nur 2 Zellen!
Zeile 2: ["Artikel 3", "30 €"]           // Nur 2 Zellen!

Den Zeilen 1 und 2 fehlt eine Spalte. Die Spaltenausrichtung ist jetzt kaputt.

Die Lösung: Ein virtuelles Grid aufbauen

Man muss tracken, welche Zellen durch Spans aus vorherigen Zeilen „belegt" sind:

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

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

    // Bereits durch Rowspans belegte Spalten überspringen
    while (grid[rowIndex][colIndex] !== undefined) {
      colIndex++;
    }

    Array.from(rowEl.cells).forEach((cell) => {
      // An belegten Spalten vorbeirücken
      while (grid[rowIndex][colIndex] !== undefined) {
        colIndex++;
      }

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

      // Die gesamte Span-Region füllen
      for (let r = 0; r < rowSpan; r++) {
        for (let c = 0; c < colSpan; c++) {
          const targetRow = rowIndex + r;
          const targetCol = colIndex + c;

          if (!grid[targetRow]) grid[targetRow] = [];
          if (grid[targetRow][targetCol] === undefined) {
            grid[targetRow][targetCol] = text;
          }
        }
      }

      colIndex += colSpan;
    });
  });

  return grid;
}

Jetzt bekommt man:

Zeile 0: ["Kategorie A", "Artikel 1", "10 €"]
Zeile 1: ["Kategorie A", "Artikel 2", "20 €"]
Zeile 2: ["Kategorie A", "Artikel 3", "30 €"]

Der Wert der überspannenden Zelle wird in jede Position dupliziert, die sie einnimmt.

Problem 2: Verschachtelte Tabellen

Manche Websites verwenden Tabellen in Tabellen fürs Layout:

<table>
  <tr>
    <td>
      <table>
        <tr><td>Verschachtelter Inhalt</td></tr>
      </table>
    </td>
    <td>Normale Zelle</td>
  </tr>
</table>

cell.textContent erfasst alles, einschließlich des Inhalts verschachtelter Tabellen. cell.innerText könnte helfen, ist aber browserübergreifend inkonsistent.

Die Lösung: Klonen und Entfernen

function extractCellText(cell) {
  if (!cell) return "";

  // Klonen, um das DOM nicht zu verändern
  const clone = cell.cloneNode(true);

  // Unsichtbare und verschachtelte Inhalte entfernen
  const removeSelectors = "style, script, noscript, template, table";
  clone.querySelectorAll(removeSelectors).forEach(el => el.remove());

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

Problem 3: Header sind nicht immer Zeile 0

Viele Tabellen haben Titelzeilen, Navigationszeilen oder anderen Inhalt vor den eigentlichen Headern:

<table>
  <tr>
    <td colspan="3">Quartalsbericht Vertrieb 2024</td>
  </tr>
  <tr>
    <th>Region</th>
    <th>Q1</th>
    <th>Q2</th>
  </tr>
  <tr>
    <td>Nord</td>
    <td>1,2 Mio. €</td>
    <td>1,4 Mio. €</td>
  </tr>
</table>

Wenn du davon ausgehst, dass Zeile 0 der Header ist, bekommst du „Quartalsbericht Vertrieb 2024" als Spaltenname.

Die Lösung: Header-Zeile erkennen

function detectHeaderRowIndex(matrix) {
  for (let i = 0; i < Math.min(matrix.length - 1, 3); i++) {
    const row = matrix[i];
    const nextRow = matrix[i + 1];

    // Eindeutige Werte zählen
    const uniqueValues = new Set(row.filter(c => c && c.trim()));
    const uniqueNext = new Set(nextRow.filter(c => c && c.trim()));

    // Titelzeile: 1 eindeutiger Wert (alle Spalten überspannend), nächste Zeile hat mehr
    const isTitleRow = 
      uniqueValues.size === 1 && 
      uniqueNext.size > 1 &&
      row[0]?.length > 30;

    if (isTitleRow) {
      return i + 1; // Header sind in der nächsten Zeile
    }
  }

  return 0;
}

Problem 4: Leere Zellen und inkonsistente Spalten

Manche Zeilen haben weniger Zellen als andere. Manche Zellen sind komplett leer. Manche enthalten nur Whitespace oder  .

// Alle Zeilen auf die gleiche Länge normalisieren
function normalizeMatrix(grid) {
  const maxCols = Math.max(...grid.map(row => row.length));

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

Problem 5: Unsichtbarer Inhalt

Tabellen können Inhalte enthalten, die visuell versteckt, aber im DOM vorhanden sind:

<style>-Blöcke für scoped CSS
<script>-Tags
display: none-Elemente
Zero-Width-Zeichen

const invisibleSelectors = [
  "style",
  "script", 
  "noscript",
  "template",
  "[hidden]",
  "[style*='display: none']",
  "[style*='display:none']"
].join(", ");

clone.querySelectorAll(invisibleSelectors).forEach(el => el.remove());

Problem 6: Zeichenkodierung

Tabellen aus verschiedenen Quellen verwenden unterschiedliche Kodierungen:

  (geschütztes Leerzeichen)
— und – (Gedankenstriche)
Typografische vs. gerade Anführungszeichen
UTF-8 vs. ISO-8859-1

Immer normalisieren:

function normalizeText(text) {
  return text
    .replace(/\u00a0/g, " ")           // Geschütztes Leerzeichen
    .replace(/[\u2018\u2019]/g, "'")   // Typografische einfache Anführungszeichen
    .replace(/[\u201c\u201d]/g, '"')   // Typografische doppelte Anführungszeichen
    .replace(/[\u2013\u2014]/g, "-")   // Halb-/Geviertstrich
    .trim();
}

Die komplette Pipeline

Nach der Behandlung all dieser Fälle sieht meine Extraktions-Pipeline so aus:

function extractTable(tableElement) {
  // 1. Virtuelles Grid aufbauen (handhabt rowspan/colspan)
  let matrix = extractTableMatrix(tableElement);

  // 2. Auf konsistente Spaltenzahl normalisieren
  matrix = normalizeMatrix(matrix);

  // 3. Tatsächliche Header-Zeile finden
  const headerIndex = detectHeaderRowIndex(matrix);

  // 4. Titelzeilen entfernen
  if (headerIndex > 0) {
    matrix = matrix.slice(headerIndex);
  }

  // 5. Allen Zellentext bereinigen
  matrix = matrix.map(row => 
    row.map(cell => normalizeText(extractCellText(cell)))
  );

  return matrix;
}

Edge Cases aus der Praxis

Nach der Verarbeitung tausender Tabellen hier einige reale Edge Cases:

Quelle	Problem	Lösung
Wikipedia	„v t e"-Navigationszeilen	Mustererkennung + überspringen
Wikipedia	Horizontal duplizierte Spalten	Wiederholende Header erkennen, entstapeln
FBRef	Gruppierte Spaltenheader	Gruppe + Sub-Header zusammenführen
Finanzseiten	Zahlen als `1.234.567,89`	Locale-bewusste Normalisierung
Behördenseiten	Tabellen in `<form>`	Formular-Wrapper ignorieren

Erkenntnisse

Vertraue niemals der DOM-Struktur. Baue deine eigene normalisierte Darstellung.
Teste früh mit Edge Cases. Wikipedia, FBRef und Behördenseiten sind großartige Stresstests.
Normalisiere alles. Whitespace, Encoding, Spaltenzahl – mach es konsistent.
Header brauchen Erkennung. Geh nicht davon aus, dass Zeile 0 der Header ist.
Spans sind der Feind. Der Grid-Aufbau-Ansatz handhabt sie sauber.

Wenn du dir die ganze Komplexität sparen willst, handhabt HTML Table Exporter diese Edge Cases automatisch. Ein Klick zum Exportieren jeder Tabelle als CSV, JSON oder Excel.

Für weitere Tipps und Anleitungen, besuche unseren Blog mit Tutorials zur Tabellenextraktion.

Mehr erfahren auf gauchogrid.com/de/html-table-exporter oder kostenlos im Chrome Web Store ausprobieren.

Aber wenn du deinen eigenen Parser baust, hoffe ich, dass dir das einige Stunden Debugging spart. Das Rabbit Hole ist tief.

Was ist die merkwürdigste Tabellenstruktur, die dir begegnet ist? Schreib es in die Kommentare. Ich sammle Edge Cases wie Sammelkarten.