DEV Community: circobit

Automatische Erkennung von Header-Zeilen: Die Heuristiken hinter dem Tabellen-Parsing

circobit — Tue, 01 Sep 2026 07:30:00 +0000

Die erste Zeile einer HTML-Tabelle ist die Header-Zeile.

Außer wenn nicht.

Wikipedia-Tabellen haben oft eine Titelzeile, die alle Spalten überspannt, bevor die eigentlichen Header kommen. Sportstatistik-Seiten haben gruppierte Header, bei denen „Spielzeit" mehrere Unterspalten wie „SP", „Starts", „Min" überspannt. Finanztabellen haben Einheitenzeilen („in Millionen EUR"), die wie Header aussehen, aber keine sind.

Wenn man annimmt, dass Zeile 0 immer der Header ist, werden die Exporte bei einem erheblichen Anteil realer Tabellen fehlerhaft sein.

So erkennt man die tatsächliche Header-Zeile programmatisch.

Das Problem: Drei Arten von „ersten Zeilen"

Diese häufigen Muster gibt es:

Muster 1: Titelzeile

<table>
  <tr>
    <th colspan="4">Weltbevölkerung nach Land</th>  <!-- Titel, kein Header -->
  </tr>
  <tr>
    <th>Rang</th>
    <th>Land</th>
    <th>Bevölkerung</th>
    <th>% der Welt</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Indien</td>
    <td>1.428.627.663</td>
    <td>17,85 %</td>
  </tr>
</table>

Zeile 0 ist ein Titel. Zeile 1 ist der Header. Zeile 2+ sind Daten.

Muster 2: Gruppierte Header (zweistufig)

<table>
  <tr>
    <th></th>
    <th></th>
    <th colspan="3">Spielzeit</th>
    <th colspan="2">Leistung</th>
  </tr>
  <tr>
    <th>Spieler</th>
    <th>Nation</th>
    <th>SP</th>
    <th>Starts</th>
    <th>Min</th>
    <th>Tore</th>
    <th>Assists</th>
  </tr>
  <tr>
    <td>Max Müller</td>
    <td>GER</td>
    <td>34</td>
    <td>30</td>
    <td>2700</td>
    <td>12</td>
    <td>8</td>
  </tr>
</table>

Zeile 0 sind Gruppen-Header. Zeile 1 sind die tatsächlichen Spalten-Header. Zeile 2+ sind Daten.

Muster 3: Wikipedia-Navigationspräfix

<tr>
  <th colspan="3">v t e Welterbestätten</th>
</tr>

Die „v t e"-Links (view/talk/edit) sind Wikipedias Template-Navigation. Sie müssen entfernt werden, und die Zeile könnte trotzdem ein Titel statt ein Header sein.

Heuristik 1: Titelzeilen erkennen

Eine Titelzeile hat typischerweise:

Eine einzelne Zelle (oder sehr wenige Zellen)
Großes colspan, das die meisten/alle Spalten überspannt
Textinhalt, der wie ein Titel aussieht, nicht wie Spaltennamen

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

  // Nicht-leere Zellen zählen
  const nonEmptyCells = row.filter(cell => cell && cell.trim()).length;

  // Titelzeilen haben meist 1-2 nicht-leere Zellen
  if (nonEmptyCells > 2) return false;

  // Prüfen ob erste Zelle die meisten Spalten überspannt
  // In einer normalisierten Matrix zeigt sich das als wiederholte Werte
  const firstValue = row[0];
  const repeatedCount = row.filter(cell => cell === firstValue).length;

  // Wenn der erste Wert >50% der Spalten wiederholt, ist es wahrscheinlich ein Colspan-Titel
  if (repeatedCount > totalColumns * 0.5) {
    return true;
  }

  return false;
}

Heuristik 2: Was eine Zeile „wie Header aussehen" lässt

Header-Zeilen haben Eigenschaften, die sie von Datenzeilen unterscheiden:

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

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

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

    if (!value) {
      emptyCells++;
    } else if (/^-?\d+([.,]\d+)?%?$/.test(value)) {
      // Reine Zahl oder Prozent
      numericCells++;
    } else {
      textCells++;
    }
  }

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

  // Header sind überwiegend Text, nicht Zahlen
  // Wenn >70% der nicht-leeren Zellen numerisch sind, sind es wahrscheinlich Daten
  if (numericCells / totalNonEmpty > 0.7) {
    return false;
  }

  // Header sollten nicht überwiegend leer sein
  if (emptyCells / row.length > 0.7) {
    return false;
  }

  return true;
}

Heuristik 3: Was eine Zeile „wie Daten aussehen" lässt

Die Gegenprüfung hilft zu bestätigen, dass man die richtige Grenze gefunden hat:

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

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

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

    totalNonEmpty++;

    // Auf numerische Muster prüfen
    if (/^-?\d+([.,]\d+)?%?$/.test(value)) {
      numericCells++;
    }

    // Auf Datumsmuster prüfen
    if (/^\d{1,4}[-/\.]\d{1,2}[-/\.]\d{1,4}$/.test(value)) {
      dateCells++;
    }
  }

  if (totalNonEmpty === 0) return false;

  // Datenzeilen haben typischerweise numerischen oder Datumsinhalt
  const dataLikeCells = numericCells + dateCells;
  return dataLikeCells / totalNonEmpty > 0.3;
}

Heuristik 4: Gruppierte Spalten-Header erkennen

FBREF-artige Tabellen haben eine Gruppen-Header-Zeile gefolgt von einer Sub-Header-Zeile. Die Gruppenzeile hat:

Leere Zellen am Anfang (Spalten ohne Gruppen)
Wiederholte Werte durch Colspan-Expansion
Mehrere eindeutige nicht-leere Werte (nicht nur einen wie bei einem Titel)

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

  // Gruppen-Header-Zeilen MÜSSEN leere Zellen am Anfang haben
  const firstCellEmpty = !(row[0] || "").trim();
  if (!firstCellEmpty) return false;

  // Eindeutige nicht-leere Werte zählen
  const uniqueValues = new Set(
    row.filter(v => v && v.trim()).map(v => v.trim().toLowerCase())
  );

  // Eine Titelzeile hat genau EINEN eindeutigen Wert
  // Eine Gruppen-Header-Zeile muss MEHRERE eindeutige Werte haben
  if (uniqueValues.size <= 1) return false;

  // Aufeinanderfolgende Wiederholungen zählen (zeigt Colspan-Expansion an)
  let consecutiveRepeats = 0;
  for (let i = 1; i < row.length; i++) {
    const curr = (row[i] || "").trim();
    const prev = (row[i - 1] || "").trim();
    if (curr === prev) consecutiveRepeats++;
  }

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

  // Hohes Wiederholungsverhältnis (>30%) deutet auf Colspan-Expansion hin
  const nextUniqueValues = new Set(
    nextRow.filter(v => v && v.trim()).map(v => v.trim().toLowerCase())
  );

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

Heuristik 5: Wikipedia-Navigationspräfixe bereinigen

Wikipedia-Templates stellen Inhalten oft „v t e" voran (Links zu Anzeigen/Diskussion/Bearbeiten):

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

  // Muster 1: "v t e " am Anfang (leerzeichengetrennt)
  // Muster 2: "v | t | e " (pipe-getrennt)
  // Muster 3: "[v] [t] [e] " (klammergetrennt)

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

Alles zusammensetzen: Der Erkennungsalgorithmus

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

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

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

    // Titelzeilen überspringen
    if (isTitleRow(currentRow, totalColumns)) {
      continue;
    }

    // Auf gruppierte Header prüfen (zweistufig)
    if (detectGroupHeaderRow(currentRow, nextRow)) {
      // Die Sub-Header-Zeile (i+1) ist der tatsächliche Header
      return i + 1;
    }

    // Prüfen ob diese Zeile wie Header aussieht und die nächste wie Daten
    if (rowLooksLikeHeaders(currentRow) && rowLooksLikeData(nextRow)) {
      return i;
    }
  }

  // Fallback: Zeile 0 als Header annehmen
  return 0;
}

Praxistests

Diese Heuristiken wurden durch Tests gegen folgende Tabellen entwickelt:

Wikipedia Länder-/Bevölkerungstabellen (Titelzeilen + „v t e"-Präfixe)
FBREF-Spielerstatistiken (gruppierte Header)
Finanztabellen mit Einheitenzeilen
Behördentabellen mit mehreren Header-Ebenen

Keine Heuristik ist perfekt. Das Ziel ist, die gängigen Muster korrekt zu behandeln und bei ungewöhnlichen Tabellen sauber zu scheitern.

Wenn die Erkennung versagt

Für Tabellen, die nicht in gängige Muster passen, eine manuelle Überschreibung bereitstellen:

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

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

  return { headerRow, dataRows };
}

Nutzer, die ihre Daten kennen, können die Header-Zeile explizit angeben.

Zusammenfassung

Muster	Erkennungsmethode
Titelzeile	Einzelne Zelle mit großem colspan
Standard-Header	Zeile mit überwiegend Text, gefolgt von Zeile mit Zahlen
Gruppierte Header	Leere erste Zellen + wiederholte Werte + mehr eindeutige Werte in der nächsten Zeile
Wikipedia-Nav	„v t e"-Präfixmuster

Die zentrale Erkenntnis: Header und Daten haben unterschiedliche Eigenschaften. Header sind textlastig mit beschreibenden Labels. Daten sind zahlenlastig mit tatsächlichen Werten. Die Grenze zwischen ihnen ist normalerweise erkennbar.

Für mehr zu Wikipedias spezifischen Tabellenherausforderungen siehe unseren Leitfaden zur besten Chrome-Erweiterung zum Kopieren von Tabellen nach Excel.

Automatische Header-Erkennung ohne Code? Erfahren Sie mehr auf gauchogrid.com/de/html-table-exporter oder probieren Sie es kostenlos im Chrome Web Store.

Convirtiendo Tablas Web a Sentencias SQL INSERT

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

Tienes una tabla en una página web. La necesitas en tu base de datos.

El enfoque manual: copiar a Excel, limpiar, exportar CSV, escribir CREATE TABLE a mano, usar LOAD DATA o COPY, depurar los errores.

El enfoque mejor: generar SQL completo directamente — CREATE TABLE con tipos inferidos, sentencias INSERT con escape adecuado.

Aquí te muestro cómo construir un conversor de tabla web a SQL.

El Formato de Salida

Una exportación SQL completa debería incluir:

-- Exportado con HTML Table Exporter PRO

CREATE TABLE products (
  product_id INTEGER,
  name TEXT,
  price REAL,
  in_stock TEXT
);

INSERT INTO products (product_id, name, price, in_stock) VALUES
  (1, 'Widget', 29.99, 'true'),
  (2, 'Gadget', 49.99, 'false'),
  (3, 'O''Brien''s Special', 19.99, 'true');

Requisitos clave:

Nombre de tabla válido (identificador SQL seguro)
Nombres de columna válidos (sin espacios, sin caracteres especiales)
Tipos de columna apropiados (INTEGER, REAL, TEXT)
Valores correctamente escapados (comillas simples duplicadas)
Manejo de NULL

Paso 1: Sanitizar Identificadores

Los identificadores SQL (nombres de tabla y columna) tienen reglas estrictas:

Sin espacios ni caracteres especiales
No pueden empezar con un dígito
Deberían ser minúsculas para portabilidad

function sanitizeSqlIdentifier(name, fallback) {
  let id = (name || "").toString().trim();

  if (!id) id = fallback || "col";

  id = id
    .normalize("NFD")
    .replace(/[\u0300-\u036f]/g, "")  // Remover acentos (café → cafe)
    .toLowerCase()
    .replace(/[^a-z0-9_]+/g, "_")     // Reemplazar caracteres inválidos con guión bajo
    .replace(/^_+|_+$/g, "");          // Recortar guiones bajos al inicio/final

  // Los identificadores SQL no pueden empezar con un dígito
  if (/^[0-9]/.test(id)) {
    id = "_" + id;
  }

  if (!id) id = fallback || "col";
  return id;
}

Ejemplos:

"Nombre Producto" → "nombre_producto"
"Precio ($)" → "precio"
"2024 Ingresos" → "_2024_ingresos"
"Préço" → "preco"

Paso 2: Generar Nombres de Columna Únicos

Las tablas pueden tener encabezados duplicados. SQL no puede tener nombres de columna duplicados.

function generateColumnNames(headerRow) {
  const usedNames = new Set();

  return headerRow.map((header, index) => {
    const base = sanitizeSqlIdentifier(header, `col_${index + 1}`);
    let candidate = base;
    let counter = 1;

    while (usedNames.has(candidate)) {
      candidate = `${base}_${counter}`;
      counter++;
    }

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

Ejemplos:

["Nombre", "Nombre", "Valor"] → ["nombre", "nombre_1", "valor"]
["", "", "Datos"] → ["col_1", "col_2", "datos"]

Paso 3: Inferir Tipos de Columna

SQL tiene tres tipos principales que nos importan:

INTEGER: Números enteros
REAL: Números decimales
TEXT: Todo lo demás

La inferencia muestrea valores de la columna y elige el tipo más específico que se ajuste a todos los valores:

function inferSqlColumnTypes(rows, headerRowIndex = 0) {
  const headerRow = rows[headerRowIndex] || [];
  const dataRows = rows.slice(headerRowIndex + 1);

  const colCount = headerRow.length;
  const types = new Array(colCount).fill("TEXT");

  for (let col = 0; col < colCount; col++) {
    // Muestrear hasta 50 valores no vacíos
    const values = [];

    for (let r = 0; r < dataRows.length && values.length < 50; r++) {
      const cell = dataRows[r][col];
      const v = cell != null ? String(cell).trim() : "";
      if (v !== "") values.push(v);
    }

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

    // Verificar si todos los valores son enteros
    let allInt = true;
    let allNumeric = true;

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

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

  return types;
}

Decisiones clave:

Muestrear solo 50 valores para rendimiento en tablas grandes
INTEGER es más estricto que REAL (no se permiten decimales)
Si CUALQUIER valor no coincide, caer a TEXT
Las columnas vacías tienen TEXT por defecto

Paso 4: Escapar Valores

Las cadenas SQL requieren escapar comillas simples duplicándolas:

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

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

  // Para tipos numéricos, intentar devolver número sin comillas
  if (type === "INTEGER" || type === "REAL") {
    const normalized = v.replace(",", ".");  // Manejar formato decimal UE
    const num = Number(normalized);

    if (!Number.isNaN(num) && Number.isFinite(num)) {
      return normalized;
    }
    // Caer al manejo TEXT si no es un número válido
  }

  // TEXT o fallback: escapar comillas simples
  const escaped = v.replace(/'/g, "''");
  return `'${escaped}'`;
}

Ejemplos:

"Hola" → 'Hola'
"O'Brien" → 'O''Brien'
"Es \"citado\"" → 'Es "citado"'
123 (INTEGER) → 123
45.67 (REAL) → 45.67
"" → NULL
null → NULL

Paso 5: Generar el SQL Completo

function tableToSqlString(tableInfo) {
  const rows = tableInfo.rows || [];
  if (!rows.length) return "";

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

  if (!headerRow) return "";

  // Generar nombres de columna seguros
  const columnNames = generateColumnNames(headerRow);

  // Inferir tipos de columna
  const types = inferSqlColumnTypes(rows, headerRowIndex);

  // Generar nombre de tabla seguro
  const rawTableName = tableInfo.slug || tableInfo.name || "table";
  let tableName = sanitizeSqlIdentifier(rawTableName, "table");
  if (!tableName) tableName = "table_export";

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

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

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

  // COMBINAR
  let sql = `-- Exportado con HTML Table Exporter PRO\n\n${createStmt}\n\n`;

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

  return sql;
}

Ejemplo de Salida

Tabla de entrada:

Producto	Precio	Cant
Widget	29.99	100
O'Brien's	19.99	50

Salida:

-- Exportado con HTML Table Exporter PRO

CREATE TABLE products (
  producto TEXT,
  precio REAL,
  cant INTEGER
);

INSERT INTO products (producto, precio, cant) VALUES
  ('Widget', 29.99, 100),
  ('O''Brien''s', 19.99, 50);

Manejando Casos Extremos

Tablas Vacías

if (!rows.length) return "";
if (!headerRow) return "";

Devolver string vacío en vez de SQL inválido.

Columnas Completamente NULL

Las columnas con solo valores vacíos/null reciben tipo TEXT. La función de inferencia maneja esto:

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

Formatos Numéricos Mixtos

El escapador normaliza decimales con coma:

const normalized = v.replace(",", ".");

"1,234.56" queda igual. "1.234,56" (formato UE) debería normalizarse antes de llegar al generador SQL — ese es el trabajo de los presets de limpieza.

Valores Muy Largos

Las columnas TEXT en SQLite/PostgreSQL manejan largo arbitrario. No se necesita truncar. Para los límites de VARCHAR de MySQL, necesitarás especificar el largo o usar TEXT explícitamente.

Compatibilidad con Bases de Datos

El SQL generado es intencionalmente simple:

Funcionalidad	SQLite	PostgreSQL	MySQL
CREATE TABLE	✅	✅	✅
INTEGER/REAL/TEXT	✅	✅	✅
INSERT multi-fila	✅	✅	✅
Escape comilla simple	✅	✅	✅

Para funcionalidades específicas de base de datos (constraints, índices, esquemas), extenderías el generador. Para importación básica de datos, esto funciona en todas partes.

Usando la Exportación

# SQLite
sqlite3 mydb.db < export.sql

# PostgreSQL
psql -d mydb -f export.sql

# MySQL
mysql mydb < export.sql

O pégalo directamente en tu cliente de base de datos.

Para más sobre la ruta de exportación CSV (cuando no necesitas SQL), consulta nuestra guía sobre exportar tablas HTML a CSV.

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

Zahlennormalisierung für internationale Daten: Ein praktischer Leitfaden

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

Man exportiert eine Tabelle von einer deutschen Website. Die Umsatzspalte zeigt „1.234,56 €".

Man fügt es in Excel ein. Es wird zu „1.23456E" oder, schlimmer noch, zu einem Datum.

Willkommen beim internationalen Zahlenformat-Problem.

Das Kernproblem: Was bedeutet „1.234"?

In den USA und UK: 1.234 = eins Komma zwei drei vier (Dezimal)

In Deutschland, Spanien und den meisten Ländern Lateinamerikas: 1.234 = eintausendzweihundertvierunddreißig

Dieselben Zeichen. Völlig unterschiedliche Werte.

Beim Extrahieren von Daten aus internationalen Websites kann man nicht annehmen, welches Format vorliegt. Und wenn man falsch liegt, ist die Analyse um Größenordnungen daneben.

Die Drei-Stellen-Mehrdeutigkeit

Der schwierigste Fall: exakt drei Stellen nach einem Trennzeichen.

Eingabe	US-Interpretation	EU-Interpretation
1.234	1,234 (Dezimal)	1.234 (Tausender)
1,234	1.234 (Tausender)	1,234 (Dezimal)
1.234.567	Ungültig	1.234.567
1,234,567	1.234.567	Ungültig

Mit zwei Stellen danach ist es eindeutig Dezimal: „1.23" oder „1,23".
Mit vier+ Stellen danach ist es eindeutig Dezimal: „3.14159".
Mit drei Stellen? Kann beides sein.

Der Erkennungsalgorithmus

Hier ein heuristischer Ansatz, der die meisten Praxisfälle abdeckt:

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

  // Schritt 1: Währungssymbole, Prozente, Leerzeichen bereinigen
  let cleaned = v
    .replace(/&nbsp;/g, " ")
    .replace(/^(USD|EUR|GBP|R\$|MXN)\s*/i, "")
    .replace(/[$€£¥₹₽₩]/g, "")
    .replace(/%/g, "")
    .replace(/\s+/g, "");

  // Schritt 2: Negative Vorzeichen behandeln
  const isNegative = cleaned.match(/^-/);
  if (isNegative) {
    cleaned = cleaned.substring(1).trim();
  }

  // Schritt 3: Nur Ziffern? Fertig
  if (/^\d+$/.test(cleaned)) {
    return isNegative ? `-${cleaned}` : cleaned;
  }

  // Schritt 4: Trennzeichen erkennen
  const hasComma = cleaned.includes(",");
  const hasDot = cleaned.includes(".");

  // Schritt 5: Heuristik anwenden
  let decimalSeparator = ".";
  let thousandsSeparator = ",";

  if (hasComma && hasDot) {
    // Beide vorhanden: das letzte ist das Dezimalzeichen
    const lastComma = cleaned.lastIndexOf(",");
    const lastDot = cleaned.lastIndexOf(".");

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

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

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

      if (afterDot.length <= 2 || afterDot.length >= 4) {
        // "1.23" oder "3.14159" → Dezimal
        decimalSeparator = ".";
      } else {
        // "1.234" → TAUSENDER (pragmatische Wahl für Tabellen)
        decimalSeparator = null;
        thousandsSeparator = ".";
      }
    } else {
      // Mehrere Punkte → Tausender
      decimalSeparator = null;
      thousandsSeparator = ".";
    }
  }

  // Schritt 6: Tausendertrennzeichen entfernen
  if (thousandsSeparator) {
    cleaned = cleaned.replace(new RegExp(`\\${thousandsSeparator}`, "g"), "");
  }

  // Schritt 7: Dezimalzeichen zu Punkt normalisieren
  if (decimalSeparator && decimalSeparator !== ".") {
    cleaned = cleaned.replace(decimalSeparator, ".");
  }

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

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

Warum drei Stellen = Tausender

Die Schlüsselentscheidung: Wenn wir exakt drei Stellen nach einem einzelnen Trennzeichen sehen (wie „1.234"), interpretieren wir es als Tausender, nicht als Dezimal.

Warum? In HTML-Tabellen:

Finanzdaten mit Tausendern sind extrem häufig: $1.234, €1.234
Dezimalzahlen mit exakt drei Stellen sind in der Praxis selten
Wissenschaftliche Daten mit drei Dezimalstellen (wie „3.141") werden meist als „3.14159" oder einfach „3.14" geschrieben

Diese Heuristik ist ein pragmatischer Kompromiss, der für die Mehrheit realer Tabellen funktioniert.

Die vollständige Format-Matrix

Eingabe	Interpretation	Normalisierte Ausgabe
1.234,56	EU-Dezimal	1234.56
1,234.56	US-Dezimal	1234.56
1.234.567,89	EU-Tausender + Dezimal	1234567.89
1,234,567.89	US-Tausender + Dezimal	1234567.89
1.234	Tausender	1234
1,234	Tausender	1234
3.14	Dezimal	3.14
3,14	Dezimal	3.14
3.14159	Dezimal (4+ Stellen)	3.14159
$ 1.200,50	Währung + EU	1200.50
-5.000	Negative Tausender	-5000
12.5%	Prozent	12.5

Währungscodes behandeln

Internationale Daten kommen mit Währungspräfixen und -suffixen. Diese zuerst bereinigen:

// Währungscodes VOR Symbolen entfernen
.replace(/^(USD|EUR|GBP|JPY|CHF|CAD|AUD|CNY|INR|BRL|R\$|MXN|KRW)\s*/i, "")
// Dann Symbole entfernen
.replace(/[$€£¥₹₽₩₪฿₫₴₦]/g, "")

Die Reihenfolge ist wichtig: „R$" (Brasilianischer Real) enthält „$", also verhindert das vorherige Entfernen der Währungscodes partielle Treffer.

Wenn die Heuristik versagt

Keine Heuristik ist perfekt. Man bekommt falsche Ergebnisse bei:

Wissenschaftliche Daten mit exakt 3 Dezimalstellen: „3.141" wird zu „3141"
Preise unter 10 € mit 3 Dezimalstellen: „1.234 €" wird zu „1234 €"
Gemischte Formate in einer Spalte: Manche Zeilen EU, manche US

Für Fall 3 braucht man spaltenweite Formaterkennung:

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

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

  if (euIndicators > usIndicators) return "eu";
  if (usIndicators > euIndicators) return "us";
  return "auto"; // Zellweise Heuristik verwenden
}

Export-Profile für verschiedene Regionen

Wenn man das Herkunftsland kennt, kann man die Mehrdeutigkeit komplett vermeiden, indem man regionsspezifische Profile verwendet:

Europäisches Format: Nimmt Komma als Dezimaltrennzeichen an, verwendet Semikolon als CSV-Trennzeichen
US/UK-Format: Nimmt Punkt als Dezimaltrennzeichen an, verwendet Komma als CSV-Trennzeichen

HTML Table Exporter enthält vordefinierte Profile für beide Formate, plus spezialisierte Profile für Tools wie Pandas und DuckDB.

Häufige Fallstricke

Präzision nicht verlieren

// Falsch: verliert Präzision bei großen Zahlen
const num = parseFloat("12345678901234567890");
// 12345678901234567000 (JavaScript-Limit)

// Besser: als String behalten bis zur finalen Berechnung
const cleaned = normalizeNumberString(value);
// Erst parseFloat verwenden, wenn man rechnen muss

Auf HTML-Entities achten

Webtabellen enthalten manchmal   (geschütztes Leerzeichen) in Zahlen:

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

Original beibehalten, wenn unsicher

Wenn der Wert nicht wie eine Zahl aussieht, unverändert zurückgeben:

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

Besser „N/A" als „N/A" belassen, als zu versuchen es zu parsen.

Zusammenfassung

Szenario	Erkennung	Hinweise
Sowohl . als auch ,	Letztes = Dezimal	Universal
Nur Komma, ≤2 Stellen danach	Dezimal	„1,23"
Nur Komma, 3+ Stellen danach	Tausender	„1,234"
Nur Punkt, ≤2 oder 4+ Stellen	Dezimal	„1.23", „3.14159"
Nur Punkt, exakt 3 Stellen	Tausender	„1.234"

Der Drei-Stellen-Fall ist der pragmatische Kompromiss. Er funktioniert für die meisten realen Daten. Im Zweifelsfall ein Export-Profil verwenden, das zur Quellregion passt.

Für mehr zum Kopieren von Daten aus Websites nach Excel ohne Formatierungsprobleme, siehe unseren Leitfaden zur besten Chrome-Erweiterung zum Kopieren von Tabellen nach Excel.

Saubere Zahlenexporte ohne Ratespiel? Erfahren Sie mehr auf gauchogrid.com/de/html-table-exporter oder probieren Sie es kostenlos im Chrome Web Store.

Convertendo Tabelas Web em Instruções SQL INSERT

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

Você tem uma tabela em uma página web. Precisa dela no seu banco de dados.

A abordagem manual: copiar para o Excel, limpar, exportar CSV, escrever CREATE TABLE à mão, usar LOAD DATA ou COPY, debugar os erros.

A abordagem melhor: gerar SQL completo diretamente — CREATE TABLE com tipos inferidos, instruções INSERT com escape adequado.

Veja como construir um conversor de tabela web para SQL.

O Formato de Saída

Uma exportação SQL completa deve incluir:

-- Exportado pelo HTML Table Exporter PRO

CREATE TABLE produtos (
  produto_id INTEGER,
  nome TEXT,
  preco REAL,
  em_estoque TEXT
);

INSERT INTO produtos (produto_id, nome, preco, em_estoque) VALUES
  (1, 'Widget', 29.99, 'true'),
  (2, 'Gadget', 49.99, 'false'),
  (3, 'Peça do O''Brien', 19.99, 'true');

Requisitos-chave:

Nome de tabela válido (identificador SQL seguro)
Nomes de colunas válidos (sem espaços, sem caracteres especiais)
Tipos de coluna apropriados (INTEGER, REAL, TEXT)
Valores com escape adequado (aspas simples duplicadas)
Tratamento de NULL

Passo 1: Sanitizando Identificadores

Identificadores SQL (nomes de tabelas e colunas) têm regras estritas:

Sem espaços ou caracteres especiais
Não pode começar com dígito
Deve ser minúsculo para portabilidade

function sanitizeSqlIdentifier(name, fallback) {
  let id = (name || "").toString().trim();

  if (!id) id = fallback || "col";

  id = id
    .normalize("NFD")
    .replace(/[\u0300-\u036f]/g, "")  // Remover acentos (café → cafe)
    .toLowerCase()
    .replace(/[^a-z0-9_]+/g, "_")     // Substituir chars inválidos por underscore
    .replace(/^_+|_+$/g, "");          // Remover underscores iniciais/finais

  // Identificadores SQL não podem começar com dígito
  if (/^[0-9]/.test(id)) {
    id = "_" + id;
  }

  if (!id) id = fallback || "col";
  return id;
}

Exemplos:

"Nome do Produto" → "nome_do_produto"
"Preço (R$)" → "preco_r"
"2024 Receita" → "_2024_receita"
"Préço" → "preco"

Passo 2: Gerando Nomes de Colunas Únicos

Tabelas podem ter cabeçalhos duplicados. SQL não pode ter nomes de colunas duplicados.

function generateColumnNames(headerRow) {
  const usedNames = new Set();

  return headerRow.map((header, index) => {
    const base = sanitizeSqlIdentifier(header, `col_${index + 1}`);
    let candidate = base;
    let counter = 1;

    while (usedNames.has(candidate)) {
      candidate = `${base}_${counter}`;
      counter++;
    }

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

Exemplos:

["Nome", "Nome", "Valor"] → ["nome", "nome_1", "valor"]
["", "", "Dados"] → ["col_1", "col_2", "dados"]

Passo 3: Inferindo Tipos de Colunas

SQL tem três tipos principais que nos interessam:

INTEGER: Números inteiros
REAL: Números decimais
TEXT: Todo o resto

A inferência amostra valores da coluna e escolhe o tipo mais específico que serve para todos os valores:

function inferSqlColumnTypes(rows, headerRowIndex = 0) {
  const headerRow = rows[headerRowIndex] || [];
  const dataRows = rows.slice(headerRowIndex + 1);

  const colCount = headerRow.length;
  const types = new Array(colCount).fill("TEXT");

  for (let col = 0; col < colCount; col++) {
    // Amostrar até 50 valores não vazios
    const values = [];

    for (let r = 0; r < dataRows.length && values.length < 50; r++) {
      const cell = dataRows[r][col];
      const v = cell != null ? String(cell).trim() : "";
      if (v !== "") values.push(v);
    }

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

    // Verificar se todos os valores são inteiros
    let allInt = true;
    let allNumeric = true;

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

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

  return types;
}

Decisões-chave:

Amostrar apenas 50 valores para performance em tabelas grandes
INTEGER é mais restrito que REAL (sem decimais)
Se QUALQUER valor não corresponder, cai para TEXT
Colunas vazias recebem TEXT por padrão

Passo 4: Escapando Valores

Strings SQL requerem escape de aspas simples duplicando-as:

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

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

  // Para tipos numéricos, tentar retornar número sem aspas
  if (type === "INTEGER" || type === "REAL") {
    const normalized = v.replace(",", ".");  // Tratar formato decimal UE
    const num = Number(normalized);

    if (!Number.isNaN(num) && Number.isFinite(num)) {
      return normalized;
    }
    // Cai para tratamento TEXT se não for número válido
  }

  // TEXT ou fallback: escapar aspas simples
  const escaped = v.replace(/'/g, "''");
  return `'${escaped}'`;
}

Exemplos:

"Olá" → 'Olá'
"O'Brien" → 'O''Brien'
"Está \"entre aspas\"" → 'Está "entre aspas"'
123 (INTEGER) → 123
45.67 (REAL) → 45.67
"" → NULL
null → NULL

Passo 5: Gerando o SQL Completo

function tableToSqlString(tableInfo) {
  const rows = tableInfo.rows || [];
  if (!rows.length) return "";

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

  if (!headerRow) return "";

  // Gerar nomes de colunas seguros
  const columnNames = generateColumnNames(headerRow);

  // Inferir tipos de colunas
  const types = inferSqlColumnTypes(rows, headerRowIndex);

  // Gerar nome de tabela seguro
  const rawTableName = tableInfo.slug || tableInfo.name || "tabela";
  let tableName = sanitizeSqlIdentifier(rawTableName, "tabela");
  if (!tableName) tableName = "tabela_export";

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

  // CONSTRUIR INSTRUÇÕES INSERT
  const insertHeader = `INSERT INTO ${tableName} (${columnNames.join(", ")}) VALUES`;

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

  // COMBINAR
  let sql = `-- Exportado pelo HTML Table Exporter PRO\n\n${createStmt}\n\n`;

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

  return sql;
}

Exemplo de Saída

Tabela de entrada:

Produto	Preço	Qtd
Widget	29.99	100
O'Brien's	19.99	50

Saída:

-- Exportado pelo HTML Table Exporter PRO

CREATE TABLE produtos (
  produto TEXT,
  preco REAL,
  qtd INTEGER
);

INSERT INTO produtos (produto, preco, qtd) VALUES
  ('Widget', 29.99, 100),
  ('O''Brien''s', 19.99, 50);

Tratando Casos Especiais

Tabelas Vazias

if (!rows.length) return "";
if (!headerRow) return "";

Retornar string vazia em vez de SQL inválido.

Colunas Todas NULL

Colunas com apenas valores vazios/null recebem tipo TEXT. A função de inferência trata isso:

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

Formatos Numéricos Mistos

O escaper normaliza decimais com vírgula:

const normalized = v.replace(",", ".");

"1,234.56" permanece como está. "1.234,56" (formato UE) deve ser normalizado antes de chegar ao gerador SQL — esse é o trabalho dos presets de limpeza.

Valores Muito Longos

Colunas TEXT no SQLite/PostgreSQL lidam com tamanho arbitrário. Nenhuma truncação necessária. Para limites de VARCHAR do MySQL, você precisaria especificar comprimento ou usar TEXT explicitamente.

Compatibilidade entre Bancos de Dados

O SQL gerado é intencionalmente simples:

Recurso	SQLite	PostgreSQL	MySQL
CREATE TABLE	✅	✅	✅
INTEGER/REAL/TEXT	✅	✅	✅
INSERT multi-linhas	✅	✅	✅
Escape aspas simples	✅	✅	✅

Para recursos específicos de banco (constraints, índices, schemas), você estenderia o gerador. Para importação básica de dados, funciona em qualquer lugar.

Usando a Exportação

# SQLite
sqlite3 meubanco.db < exportacao.sql

# PostgreSQL
psql -d meubanco -f exportacao.sql

# MySQL
mysql meubanco < exportacao.sql

Ou cole diretamente no seu cliente de banco de dados.

Para saber mais sobre como exportar tabelas web para diferentes formatos, veja nosso guia sobre a melhor extensão Chrome para copiar tabelas para Excel.

Precisa de exportações SQL sem escrever código? Saiba mais em gauchogrid.com/pt-br/html-table-exporter ou experimente gratuitamente na Chrome Web Store.

Detectando Filas de Encabezado Automáticamente: Las Heurísticas Detrás del Parsing de Tablas

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

La primera fila de una tabla HTML es la fila de encabezado.

Excepto cuando no lo es.

Las tablas de Wikipedia suelen tener una fila de título que abarca todas las columnas antes de los encabezados reales. Los sitios de estadísticas deportivas tienen encabezados agrupados donde "Tiempo de Juego" abarca múltiples sub-columnas como "PJ", "Titular", "Min". Las tablas financieras tienen filas de unidad ("en millones USD") que parecen encabezados pero no lo son.

Si asumes que la fila 0 siempre es el encabezado, tus exportaciones van a estar rotas para una porción significativa de tablas del mundo real.

Aquí te muestro cómo detectar la fila de encabezado real programáticamente.

El Problema: Tres Tipos de "Primeras Filas"

Considerá estos patrones comunes:

Patrón 1: Fila de Título

<table>
  <tr>
    <th colspan="4">Población Mundial por País</th>  <!-- Título, no encabezado -->
  </tr>
  <tr>
    <th>Ranking</th>
    <th>País</th>
    <th>Población</th>
    <th>% del Mundo</th>
  </tr>
  <tr>
    <td>1</td>
    <td>India</td>
    <td>1.428.627.663</td>
    <td>17,85%</td>
  </tr>
</table>

La fila 0 es un título. La fila 1 es el encabezado. La fila 2+ son datos.

Patrón 2: Encabezados Agrupados (Dos Niveles)

<table>
  <tr>
    <th></th>
    <th></th>
    <th colspan="3">Tiempo de Juego</th>
    <th colspan="2">Rendimiento</th>
  </tr>
  <tr>
    <th>Jugador</th>
    <th>Nación</th>
    <th>PJ</th>
    <th>Titular</th>
    <th>Min</th>
    <th>Goles</th>
    <th>Asist</th>
  </tr>
  <tr>
    <td>Juan Pérez</td>
    <td>ARG</td>
    <td>34</td>
    <td>30</td>
    <td>2700</td>
    <td>12</td>
    <td>8</td>
  </tr>
</table>

La fila 0 son encabezados de grupo. La fila 1 son los encabezados de columna reales. La fila 2+ son datos.

Patrón 3: Prefijo de Navegación de Wikipedia

<tr>
  <th colspan="3">v t e Sitios del Patrimonio Mundial</th>
</tr>

Los enlaces "v t e" (ver/discusión/editar) son la navegación de plantillas de Wikipedia. Necesitan ser eliminados, y la fila podría ser un título en lugar de un encabezado.

Heurística 1: Detectar Filas de Título

Una fila de título típicamente tiene:

Una sola celda (o muy pocas celdas)
colspan grande abarcando la mayoría/todas las columnas
Contenido de texto que parece un título, no nombres de columnas

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

  // Contar celdas no vacías
  const nonEmptyCells = row.filter(cell => cell && cell.trim()).length;

  // Las filas de título suelen tener 1-2 celdas no vacías
  if (nonEmptyCells > 2) return false;

  // Verificar si la primera celda abarca la mayoría de columnas (indica colspan)
  // En una matriz normalizada, esto se muestra como valores repetidos
  const firstValue = row[0];
  const repeatedCount = row.filter(cell => cell === firstValue).length;

  // Si el primer valor se repite en >50% de las columnas, probablemente es un título con colspan
  if (repeatedCount > totalColumns * 0.5) {
    return true;
  }

  return false;
}

Heurística 2: Qué Hace Que una Fila "Parezca Encabezados"

Las filas de encabezado tienen características que las distinguen de las filas de datos:

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

  // Si está dominada por números puros, no son encabezados
  let numericCells = 0;
  let textCells = 0;
  let emptyCells = 0;

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

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

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

  // Los encabezados son mayormente texto, no números
  // Si >70% de las celdas no vacías son numéricas, probablemente son datos
  if (numericCells / totalNonEmpty > 0.7) {
    return false;
  }

  // Los encabezados no deberían estar mayormente vacíos
  if (emptyCells / row.length > 0.7) {
    return false;
  }

  return true;
}

Heurística 3: Qué Hace Que una Fila "Parezca Datos"

La verificación inversa ayuda a confirmar que encontramos el límite correcto:

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

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

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

    totalNonEmpty++;

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

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

  if (totalNonEmpty === 0) return false;

  // Las filas de datos típicamente tienen contenido numérico o de fecha
  const dataLikeCells = numericCells + dateCells;
  return dataLikeCells / totalNonEmpty > 0.3;
}

Heurística 4: Detectar Encabezados de Columna Agrupados

Las tablas estilo FBREF tienen una fila de encabezado de grupo seguida por una fila de sub-encabezados. La fila de grupo tiene:

Celdas vacías al principio (columnas sin grupos)
Valores repetidos por expansión de colspan
Múltiples valores únicos no vacíos (no solo uno como un título)

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

  // Las filas de encabezado de grupo DEBEN tener celdas vacías al inicio
  const firstCellEmpty = !(row[0] || "").trim();
  if (!firstCellEmpty) return false;

  // Contar valores únicos no vacíos
  const uniqueValues = new Set(
    row.filter(v => v && v.trim()).map(v => v.trim().toLowerCase())
  );

  // Una fila de título tiene exactamente UN valor único
  // Una fila de encabezado de grupo debe tener MÚLTIPLES valores únicos
  if (uniqueValues.size <= 1) return false;

  // Contar repeticiones consecutivas (indica expansión de colspan)
  let consecutiveRepeats = 0;
  for (let i = 1; i < row.length; i++) {
    const curr = (row[i] || "").trim();
    const prev = (row[i - 1] || "").trim();
    if (curr === prev) consecutiveRepeats++;
  }

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

  // Ratio alto de repetición (>30%) sugiere expansión de colspan
  // La siguiente fila debería tener más valores únicos (los sub-encabezados reales)
  const nextUniqueValues = new Set(
    nextRow.filter(v => v && v.trim()).map(v => v.trim().toLowerCase())
  );

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

Heurística 5: Limpiar Prefijos de Navegación de Wikipedia

Las plantillas de Wikipedia suelen tener prefijo con "v t e" (enlaces para ver/discusión/editar la plantilla):

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

  // Patrón 1: "v t e " al inicio (separados por espacios)
  // Patrón 2: "v | t | e " (separados por pipes)
  // Patrón 3: "[v] [t] [e] " (separados por corchetes)

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

Uniendo Todo: El Algoritmo de Detección

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

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

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

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

    // Verificar encabezados agrupados (dos niveles)
    if (detectGroupHeaderRow(currentRow, nextRow)) {
      // La fila de sub-encabezados (i+1) es el encabezado real
      return i + 1;
    }

    // Verificar si esta fila parece encabezados y la siguiente parece datos
    if (rowLooksLikeHeaders(currentRow) && rowLooksLikeData(nextRow)) {
      return i;
    }
  }

  // Fallback: asumir que la fila 0 es el encabezado
  return 0;
}

Testing en el Mundo Real

Estas heurísticas se desarrollaron probando contra:

Tablas de países/población de Wikipedia (filas de título + prefijos "v t e")
Estadísticas de jugadores de FBREF (encabezados agrupados)
Tablas financieras con filas de unidad
Tablas de datos gubernamentales con múltiples niveles de encabezado

Ninguna heurística es perfecta. El objetivo es manejar los patrones comunes correctamente y fallar graciosamente en tablas inusuales.

Cuando la Detección Falla

Para tablas que no encajan en patrones comunes, proporciona una opción de override manual:

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

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

  return { headerRow, dataRows };
}

Los usuarios que conocen sus datos pueden especificar la fila de encabezado explícitamente.

Resumen

Patrón	Método de Detección
Fila de título	Celda única con colspan grande
Encabezado estándar	Fila con mayormente texto, seguida de fila con números
Encabezados agrupados	Primeras celdas vacías + valores repetidos + más valores únicos en la siguiente fila
Navegación Wikipedia	Patrón de prefijo "v t e"

La idea clave: los encabezados y los datos tienen características diferentes. Los encabezados son ricos en texto con etiquetas descriptivas. Los datos son ricos en números con valores reales. El límite entre ellos generalmente es detectable.

Para más sobre los desafíos específicos de las tablas de Wikipedia, consulta nuestra guía sobre exportar tablas de Wikipedia a Excel.

¿Necesitas detección automática de encabezados sin escribir código? Conoce más en gauchogrid.com/es/html-table-exporter o pruébalo gratis en la Chrome Web Store.

WebテーブルをSQL INSERT文に変換する方法

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

Webページにテーブルがある。それをデータベースに入れたい。

手動のアプローチ：Excelにコピー → クリーンアップ → CSVにエクスポート → 手動でCREATE TABLEを書く → LOAD DATAやCOPYで取り込む → エラーをデバッグ。

もっと良いアプローチ：型推論付きCREATE TABLE、適切にエスケープされたINSERT文を含む完全なSQLを直接生成する。

WebテーブルからSQLコンバーターを構築する方法を解説します。

出力フォーマット

完全なSQLエクスポートには以下が含まれるべきです：

-- Exported from HTML Table Exporter PRO

CREATE TABLE products (
  product_id INTEGER,
  name TEXT,
  price REAL,
  in_stock TEXT
);

INSERT INTO products (product_id, name, price, in_stock) VALUES
  (1, 'Widget', 29.99, 'true'),
  (2, 'Gadget', 49.99, 'false'),
  (3, 'O''Brien''s Special', 19.99, 'true');

主要な要件：

有効なテーブル名（SQL安全な識別子）
有効な列名（スペースなし、特殊文字なし）
適切な列型（INTEGER、REAL、TEXT）
適切にエスケープされた値（シングルクォートを二重化）
NULLの処理

ステップ1：識別子のサニタイズ

SQL識別子（テーブル名と列名）には厳格なルールがあります：

スペースや特殊文字不可
数字で始まることは不可
ポータビリティのために小文字にすべき

function sanitizeSqlIdentifier(name, fallback) {
  let id = (name || "").toString().trim();

  if (!id) id = fallback || "col";

  id = id
    .normalize("NFD")
    .replace(/[\u0300-\u036f]/g, "")  // アクセント除去（café → cafe）
    .toLowerCase()
    .replace(/[^a-z0-9_]+/g, "_")     // 無効な文字をアンダースコアに
    .replace(/^_+|_+$/g, "");          // 先頭/末尾のアンダースコアを除去

  // SQL識別子は数字で始められない
  if (/^[0-9]/.test(id)) {
    id = "_" + id;
  }

  if (!id) id = fallback || "col";
  return id;
}

変換例：

"Product Name" → "product_name"
"Price ($)" → "price"
"2024 Revenue" → "_2024_revenue"
"価格" → 適切にサニタイズ

ステップ2：一意な列名の生成

テーブルには重複ヘッダーがありえます。SQLには重複列名は使えません。

function generateColumnNames(headerRow) {
  const usedNames = new Set();

  return headerRow.map((header, index) => {
    const base = sanitizeSqlIdentifier(header, `col_${index + 1}`);
    let candidate = base;
    let counter = 1;

    while (usedNames.has(candidate)) {
      candidate = `${base}_${counter}`;
      counter++;
    }

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

変換例：

["Name", "Name", "Value"] → ["name", "name_1", "value"]
["", "", "Data"] → ["col_1", "col_2", "data"]

ステップ3：列型の推論

SQLで重要な3つの型：

INTEGER：整数
REAL：小数を含む数値
TEXT：その他すべて

推論は列の値をサンプリングし、すべての値に適合する最も具体的な型を選択します：

function inferSqlColumnTypes(rows, headerRowIndex = 0) {
  const headerRow = rows[headerRowIndex] || [];
  const dataRows = rows.slice(headerRowIndex + 1);

  const colCount = headerRow.length;
  const types = new Array(colCount).fill("TEXT");

  for (let col = 0; col < colCount; col++) {
    // 最大50個の非空値をサンプリング
    const values = [];

    for (let r = 0; r < dataRows.length && values.length < 50; r++) {
      const cell = dataRows[r][col];
      const v = cell != null ? String(cell).trim() : "";
      if (v !== "") values.push(v);
    }

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

    // すべての値が整数かチェック
    let allInt = true;
    let allNumeric = true;

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

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

  return types;
}

重要な判断：

パフォーマンスのため50値のみサンプリング
INTEGERはREALより厳格（小数不可）
いずれかの値が一致しなければTEXTにフォールバック
空の列はデフォルトでTEXT

ステップ4：値のエスケープ

SQL文字列はシングルクォートを二重化してエスケープする必要があります：

function sqlEscapeValue(raw, type) {
  // NULLの処理
  if (raw == null) return "NULL";

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

  // 数値型の場合、クォートなしの数値を返す
  if (type === "INTEGER" || type === "REAL") {
    const normalized = v.replace(",", ".");  // EU式小数フォーマットに対応
    const num = Number(normalized);

    if (!Number.isNaN(num) && Number.isFinite(num)) {
      return normalized;
    }
    // 有効な数値でなければTEXT処理にフォールスルー
  }

  // TEXTまたはフォールバック：シングルクォートをエスケープ
  const escaped = v.replace(/'/g, "''");
  return `'${escaped}'`;
}

変換例：

"Hello" → 'Hello'
"O'Brien" → 'O''Brien'
"It's \"quoted\"" → 'It''s "quoted"'
123（INTEGER）→ 123
45.67（REAL）→ 45.67
"" → NULL
null → NULL

ステップ5：完全なSQLの生成

function tableToSqlString(tableInfo) {
  const rows = tableInfo.rows || [];
  if (!rows.length) return "";

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

  if (!headerRow) return "";

  // 安全な列名を生成
  const columnNames = generateColumnNames(headerRow);

  // 列型を推論
  const types = inferSqlColumnTypes(rows, headerRowIndex);

  // 安全なテーブル名を生成
  const rawTableName = tableInfo.slug || tableInfo.name || "table";
  let tableName = sanitizeSqlIdentifier(rawTableName, "table");
  if (!tableName) tableName = "table_export";

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

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

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

  // 結合
  let sql = `-- Exported from HTML Table Exporter PRO\n\n${createStmt}\n\n`;

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

  return sql;
}

出力例

入力テーブル：

商品名	価格	数量
ウィジェット	29.99	100
O'Brienの特選品	19.99	50

出力：

-- Exported from HTML Table Exporter PRO

CREATE TABLE products (
  product TEXT,
  price REAL,
  qty INTEGER
);

INSERT INTO products (product, price, qty) VALUES
  ('ウィジェット', 29.99, 100),
  ('O''Brienの特選品', 19.99, 50);

エッジケースの処理

空のテーブル

if (!rows.length) return "";
if (!headerRow) return "";

無効なSQLではなく空文字列を返します。

全NULLの列

空/NULL値のみの列はTEXT型になります。推論関数がこれを処理します：

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

混在する数値フォーマット

エスケーパーはカンマの小数を正規化します：

const normalized = v.replace(",", ".");

「1,234.56」はそのまま。「1.234,56」（EU式）はSQLジェネレーターに到達する前に正規化すべきです——それはクリーニングプリセットの役割です。

非常に長い値

SQLite/PostgreSQLのTEXT列は任意の長さに対応。切り捨て不要。MySQLのVARCHAR制限には長さ指定するか、明示的にTEXTを使用する必要があります。

データベース互換性

生成されるSQLは意図的にシンプルです：

機能	SQLite	PostgreSQL	MySQL
CREATE TABLE	✅	✅	✅
INTEGER/REAL/TEXT	✅	✅	✅
複数行INSERT	✅	✅	✅
シングルクォートエスケープ	✅	✅	✅

データベース固有の機能（制約、インデックス、スキーマ）が必要な場合はジェネレーターを拡張します。基本的なデータインポートには、これでどこでも動作します。

エクスポートの使用方法

# SQLite
sqlite3 mydb.db < export.sql

# PostgreSQL
psql -d mydb -f export.sql

# MySQL
mysql mydb < export.sql

またはデータベースクライアントに直接ペースト。

SQLが不要でCSVエクスポートパスについては、HTMLテーブルをCSVにエクスポートする方法のガイドをご覧ください。

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

Rowspan und Colspan beim Tabellenexport: So extrahiert man zusammengeführte Zellen

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

Tabellen mit zusammengeführten Zellen sind überall. Wikipedia nutzt sie. Sportstatistik-Seiten nutzen sie. Finanzberichte nutzen sie.

Und sie machen fast jeden Tabellen-Scraper kaputt, den ich gesehen habe.

Das Problem: Wenn man durch <tr> und <td> Elemente iteriert, bekommt man das, was im HTML steht — nicht das, was visuell gerendert wird. Eine Zelle mit rowspan="3" erscheint einmal im HTML, belegt aber drei Zeilen in der Ausgabe.

Der naive Ansatz scheitert lautlos. Man bekommt verschobene Spalten, fehlende Daten und Exporte, die nichts mit der Originaltabelle zu tun haben.

So behebt man es.

Das Problem: HTML stimmt nicht mit dem Raster überein

Eine einfache Tabelle mit einer zusammengeführten Zelle:

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

Visuelle Darstellung:

| A | B |
|   | C |

Aber wenn man naiv Zellen durch Zeileniteration extrahiert:

// Falscher Ansatz
table.querySelectorAll('tr').forEach(row => {
  const cells = row.querySelectorAll('td');
  console.log(cells.map(c => c.textContent));
});
// Ausgabe: ["A", "B"], ["C"]
// Erwartet: ["A", "B"], ["A", "C"]

Zeile 2 fehlt das „A", das visuell in sie hineinreicht.

Die Lösung: Eine Matrix bauen

Der korrekte Ansatz ist, ein 2D-Raster vorab zuzuweisen und es gemäß der Span-Attribute zu füllen.

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

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

    let colIndex = 0;

    // Spalten überspringen, die bereits durch Rowspans belegt sind
    while (gridRow[colIndex] !== undefined) {
      colIndex++;
    }

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

    cells.forEach((cell) => {
      // Belegte Zellen überspringen
      while (gridRow[colIndex] !== undefined) {
        colIndex++;
      }

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

      // Den Block füllen, den diese Zelle überspannt
      for (let r = 0; r < rowSpan; r++) {
        const targetRowIndex = rowIndex + r;
        if (!grid[targetRowIndex]) grid[targetRowIndex] = [];

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

      colIndex += colSpan;
    });
  });

  return grid;
}

Jetzt stimmt die Ausgabe mit der visuellen Tabelle überein:

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

Warum das wichtig ist: Praxisbeispiele

Wikipedia-Ländertabellen

Wikipedia verwendet zusammengeführte Zellen extensiv. Eine Tabelle, die Länder nach Region auflistet, könnte so aussehen:

<tr>
  <td rowspan="5">Europa</td>
  <td>Frankreich</td>
</tr>
<tr>
  <td>Deutschland</td>
</tr>
<!-- ... -->

Ohne korrekte Behandlung verliert man die Zuordnung „Europa" für die Zeilen 2–5.

Sportstatistik-Seiten

Seiten wie FBREF verwenden sowohl rowspan ALS AUCH colspan. Spielerstatistik-Tabellen haben:

Gruppierte Header mit colspan (Spielzeit → SP | Starts | Min)
Zusammenfassungszeilen mit rowspan über Spielerdetails

Ein naiver Scraper exportiert Zeichensalat. Ein matrixbasierter Ansatz bewahrt die Struktur.

Finanzberichte

Quartalsberichte haben oft:

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

Der Jahres-Header muss sich auf alle vier Quartalsspalten übertragen.

Sonderfälle behandeln

Leere Zellen in der Mitte

Manchmal sind Zellen wirklich leer. Das darf nicht mit „noch nicht durch einen Span gefüllt" verwechselt werden.

// Auf gleiche Spaltenanzahl normalisieren
const maxCols = grid.reduce((max, row) => 
  Math.max(max, row ? row.length : 0), 0
);

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

Verschachtelte Tabellen

Tabellen innerhalb von Zellen erzeugen Rauschen. Meistens will man den Textinhalt der verschachtelten Tabelle, keine rekursive Extraktion.

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

  // Verschachtelte Tabellen, Scripts, Styles entfernen
  clone.querySelectorAll("table, script, style, noscript")
    .forEach(el => el.remove());

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

Colspan + Rowspan kombiniert

Der Algorithmus behandelt das natürlich — man füllt einfach ein größeres Rechteck im Raster.

<td rowspan="2" colspan="3">Große Zelle</td>

Füllt einen 2×3-Block mit demselben Wert.

Wann man ein Tool verwenden sollte

Das von Grund auf zu schreiben ist lehrreich, aber zeitaufwendig. Für den Produktionseinsatz gibt es:

HTML Table Exporter — Browser-Erweiterung, die diese Sonderfälle automatisch behandelt
Pandas read_html() — Funktioniert, hat aber Schwierigkeiten mit komplexen verschachtelten Tabellen
Beautiful Soup — Erfordert manuelle Span-Behandlung

Der vollständige Algorithmus

Hier die Produktionsversion mit allen Sonderfällen:

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

  // Elemente mit nicht-sichtbarem Inhalt entfernen
  const invisibleSelectors = "style, script, noscript, template, link";
  clone.querySelectorAll(invisibleSelectors).forEach(el => el.remove());

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

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

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

    let colIndex = 0;

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

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

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

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

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

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

      colIndex += colSpan;
    });
  });

  // Alle Zeilen auf gleiche Länge normalisieren
  const maxCols = grid.reduce((max, row) => 
    Math.max(max, row ? row.length : 0), 0
  );

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

Zusammenfassung

Ansatz	Behandelt Spans	Produktionsreif
Naive Iteration	❌	❌
Matrix mit Spans	✅	✅
Pandas read_html	Teilweise	Kommt drauf an
Browser-Erweiterung	✅	✅

Die zentrale Erkenntnis: Tabellen als Raster denken, nicht als verschachtelte HTML-Elemente. Erst das Raster bauen, dann exportieren.

Für mehr zum Export der besonders kniffligen Wikipedia-Tabellen siehe unseren Leitfaden zur besten Chrome-Erweiterung zum Kopieren von Tabellen nach Excel.

Tabellen ohne Code extrahieren? Erfahren Sie mehr auf gauchogrid.com/de/html-table-exporter oder probieren Sie es kostenlos im Chrome Web Store.

웹 테이블을 SQL INSERT 문으로 변환하기

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

웹페이지에 테이블이 있습니다. 데이터베이스에 넣어야 합니다.

수동 접근 방식: Excel에 복사, 정리, CSV 내보내기, 직접 CREATE TABLE 작성, LOAD DATA 또는 COPY 사용, 오류 디버깅.

더 나은 접근 방식: 추론된 타입이 포함된 CREATE TABLE과 적절한 이스케이프가 적용된 INSERT 문을 포함한 완전한 SQL을 직접 생성.

웹 테이블을 SQL로 변환하는 방법을 알아보겠습니다.

출력 형식

완전한 SQL 내보내기에는 다음이 포함되어야 합니다:

-- HTML Table Exporter PRO에서 내보냄

CREATE TABLE products (
  product_id INTEGER,
  name TEXT,
  price REAL,
  in_stock TEXT
);

INSERT INTO products (product_id, name, price, in_stock) VALUES
  (1, 'Widget', 29.99, 'true'),
  (2, 'Gadget', 49.99, 'false'),
  (3, 'O''Brien''s Special', 19.99, 'true');

핵심 요구사항:

유효한 테이블 이름 (SQL 안전 식별자)
유효한 열 이름 (공백 없음, 특수 문자 없음)
적절한 열 타입 (INTEGER, REAL, TEXT)
올바르게 이스케이프된 값 (작은따옴표 두 번)
NULL 처리

1단계: 식별자 정제

SQL 식별자(테이블 및 열 이름)에는 엄격한 규칙이 있습니다:

공백이나 특수 문자 없음
숫자로 시작할 수 없음
이식성을 위해 소문자 사용

function sanitizeSqlIdentifier(name, fallback) {
  let id = (name || "").toString().trim();

  if (!id) id = fallback || "col";

  id = id
    .normalize("NFD")
    .replace(/[\u0300-\u036f]/g, "")  // 악센트 제거 (café → cafe)
    .toLowerCase()
    .replace(/[^a-z0-9_]+/g, "_")     // 유효하지 않은 문자를 밑줄로 대체
    .replace(/^_+|_+$/g, "");          // 앞뒤 밑줄 제거

  // SQL 식별자는 숫자로 시작할 수 없음
  if (/^[0-9]/.test(id)) {
    id = "_" + id;
  }

  if (!id) id = fallback || "col";
  return id;
}

예시:

"Product Name" → "product_name"
"Price ($)" → "price"
"2024 Revenue" → "_2024_revenue"
"Préço" → "preco"

2단계: 고유한 열 이름 생성

테이블에 중복 헤더가 있을 수 있습니다. SQL에서는 중복 열 이름을 사용할 수 없습니다.

function generateColumnNames(headerRow) {
  const usedNames = new Set();

  return headerRow.map((header, index) => {
    const base = sanitizeSqlIdentifier(header, `col_${index + 1}`);
    let candidate = base;
    let counter = 1;

    while (usedNames.has(candidate)) {
      candidate = `${base}_${counter}`;
      counter++;
    }

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

예시:

["Name", "Name", "Value"] → ["name", "name_1", "value"]
["", "", "Data"] → ["col_1", "col_2", "data"]

3단계: 열 타입 추론

SQL에서 주로 사용하는 세 가지 타입:

INTEGER: 정수
REAL: 소수
TEXT: 나머지 전부

추론은 열의 값을 샘플링하고 모든 값에 맞는 가장 구체적인 타입을 선택합니다:

function inferSqlColumnTypes(rows, headerRowIndex = 0) {
  const headerRow = rows[headerRowIndex] || [];
  const dataRows = rows.slice(headerRowIndex + 1);

  const colCount = headerRow.length;
  const types = new Array(colCount).fill("TEXT");

  for (let col = 0; col < colCount; col++) {
    // 비어 있지 않은 값 최대 50개 샘플링
    const values = [];

    for (let r = 0; r < dataRows.length && values.length < 50; r++) {
      const cell = dataRows[r][col];
      const v = cell != null ? String(cell).trim() : "";
      if (v !== "") values.push(v);
    }

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

    // 모든 값이 정수인지 확인
    let allInt = true;
    let allNumeric = true;

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

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

  return types;
}

핵심 결정:

대규모 테이블 성능을 위해 50개 값만 샘플링
INTEGER가 REAL보다 엄격 (소수 불허)
어떤 값이든 맞지 않으면 TEXT로 폴백
빈 열은 TEXT로 기본값

4단계: 값 이스케이프

SQL 문자열에서는 작은따옴표를 두 번으로 이스케이프해야 합니다:

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

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

  // 숫자 타입의 경우 따옴표 없는 숫자 반환 시도
  if (type === "INTEGER" || type === "REAL") {
    const normalized = v.replace(",", ".");  // 유럽식 소수점 처리
    const num = Number(normalized);

    if (!Number.isNaN(num) && Number.isFinite(num)) {
      return normalized;
    }
    // 유효한 숫자가 아니면 TEXT 처리로 진행
  }

  // TEXT 또는 폴백: 작은따옴표 이스케이프
  const escaped = v.replace(/'/g, "''");
  return `'${escaped}'`;
}

예시:

"Hello" → 'Hello'
"O'Brien" → 'O''Brien'
"It's \"quoted\"" → 'It''s "quoted"'
123 (INTEGER) → 123
45.67 (REAL) → 45.67
"" → NULL
null → NULL

5단계: 완전한 SQL 생성

function tableToSqlString(tableInfo) {
  const rows = tableInfo.rows || [];
  if (!rows.length) return "";

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

  if (!headerRow) return "";

  // 안전한 열 이름 생성
  const columnNames = generateColumnNames(headerRow);

  // 열 타입 추론
  const types = inferSqlColumnTypes(rows, headerRowIndex);

  // 안전한 테이블 이름 생성
  const rawTableName = tableInfo.slug || tableInfo.name || "table";
  let tableName = sanitizeSqlIdentifier(rawTableName, "table");
  if (!tableName) tableName = "table_export";

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

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

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

  // 결합
  let sql = `-- HTML Table Exporter PRO에서 내보냄\n\n${createStmt}\n\n`;

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

  return sql;
}

출력 예시

입력 테이블:

Product	Price	Qty
Widget	29.99	100
O'Brien's	19.99	50

출력:

-- HTML Table Exporter PRO에서 내보냄

CREATE TABLE products (
  product TEXT,
  price REAL,
  qty INTEGER
);

INSERT INTO products (product, price, qty) VALUES
  ('Widget', 29.99, 100),
  ('O''Brien''s', 19.99, 50);

엣지 케이스 처리

빈 테이블

if (!rows.length) return "";
if (!headerRow) return "";

유효하지 않은 SQL 대신 빈 문자열을 반환합니다.

모든 값이 NULL인 열

빈/null 값만 있는 열은 TEXT 타입을 받습니다. 추론 함수가 이를 처리합니다:

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

혼합된 숫자 형식

이스케이퍼가 쉼표 소수점을 정규화합니다:

const normalized = v.replace(",", ".");

"1,234.56"은 그대로 유지됩니다. "1.234,56" (유럽식 형식)은 SQL 생성기에 도달하기 전에 정규화되어야 합니다—이것은 정제 프리셋의 역할입니다.

매우 긴 값

SQLite/PostgreSQL의 TEXT 열은 임의의 길이를 처리합니다. 잘라내기가 필요 없습니다. MySQL의 VARCHAR 제한의 경우 길이를 지정하거나 명시적으로 TEXT를 사용해야 합니다.

데이터베이스 호환성

생성된 SQL은 의도적으로 단순합니다:

기능	SQLite	PostgreSQL	MySQL
CREATE TABLE	✅	✅	✅
INTEGER/REAL/TEXT	✅	✅	✅
다중 행 INSERT	✅	✅	✅
작은따옴표 이스케이프	✅	✅	✅

데이터베이스별 기능(제약 조건, 인덱스, 스키마)의 경우 생성기를 확장하면 됩니다. 기본 데이터 임포트에는 모든 곳에서 작동합니다.

내보내기 사용

# SQLite
sqlite3 mydb.db < export.sql

# PostgreSQL
psql -d mydb -f export.sql

# MySQL
mysql mydb < export.sql

또는 데이터베이스 클라이언트에 직접 붙여넣기.

SQL이 필요 없는 CSV 내보내기 경로에 대해서는 HTML 테이블을 CSV로 내보내기 가이드를 참조하세요.

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

Webtabellen Converteren naar SQL INSERT-Statements

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

Je hebt een tabel op een webpagina. Je hebt het nodig in je database.

De handmatige aanpak: kopiëren naar Excel, opschonen, CSV exporteren, handmatig CREATE TABLE schrijven, LOAD DATA of COPY gebruiken, fouten debuggen.

De betere aanpak: genereer direct complete SQL—CREATE TABLE met afgeleide types, INSERT-statements met juiste escaping.

Zo bouw je een webtabel-naar-SQL-converter.

Het Outputformaat

Een complete SQL-export moet bevatten:

-- Geëxporteerd met HTML Table Exporter PRO

CREATE TABLE producten (
  product_id INTEGER,
  naam TEXT,
  prijs REAL,
  op_voorraad TEXT
);

INSERT INTO producten (product_id, naam, prijs, op_voorraad) VALUES
  (1, 'Widget', 29.99, 'true'),
  (2, 'Gadget', 49.99, 'false'),
  (3, 'O''Brien''s Special', 19.99, 'true');

Kernvereisten:

Geldige tabelnaam (SQL-veilige identifier)
Geldige kolomnamen (geen spaties, geen speciale tekens)
Passende kolomtypen (INTEGER, REAL, TEXT)
Correct ge-escapete waarden (enkele aanhalingstekens verdubbeld)
NULL-afhandeling

Stap 1: Identifiers Opschonen

SQL-identifiers (tabel- en kolomnamen) hebben strikte regels:

Geen spaties of speciale tekens
Mag niet met een cijfer beginnen
Moet in kleine letters voor portabiliteit

function sanitizeSqlIdentifier(name, fallback) {
  let id = (name || "").toString().trim();

  if (!id) id = fallback || "col";

  id = id
    .normalize("NFD")
    .replace(/[\u0300-\u036f]/g, "")  // Verwijder accenten (café → cafe)
    .toLowerCase()
    .replace(/[^a-z0-9_]+/g, "_")     // Vervang ongeldige tekens met underscore
    .replace(/^_+|_+$/g, "");          // Trim begin/eind-underscores

  // SQL-identifiers mogen niet met een cijfer beginnen
  if (/^[0-9]/.test(id)) {
    id = "_" + id;
  }

  if (!id) id = fallback || "col";
  return id;
}

Voorbeelden:

"Product Naam" → "product_naam"
"Prijs (€)" → "prijs"
"2024 Omzet" → "_2024_omzet"
"Préço" → "preco"

Stap 2: Unieke Kolomnamen Genereren

Tabellen kunnen dubbele headers hebben. SQL kan geen dubbele kolomnamen hebben.

function generateColumnNames(headerRow) {
  const usedNames = new Set();

  return headerRow.map((header, index) => {
    const base = sanitizeSqlIdentifier(header, `col_${index + 1}`);
    let candidate = base;
    let counter = 1;

    while (usedNames.has(candidate)) {
      candidate = `${base}_${counter}`;
      counter++;
    }

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

Voorbeelden:

["Naam", "Naam", "Waarde"] → ["naam", "naam_1", "waarde"]
["", "", "Data"] → ["col_1", "col_2", "data"]

Stap 3: Kolomtypen Afleiden

SQL heeft drie hoofdtypen die we nodig hebben:

INTEGER: Gehele getallen
REAL: Decimale getallen
TEXT: Al het andere

De afleiding bemonstert waarden uit de kolom en kiest het meest specifieke type dat bij alle waarden past:

function inferSqlColumnTypes(rows, headerRowIndex = 0) {
  const headerRow = rows[headerRowIndex] || [];
  const dataRows = rows.slice(headerRowIndex + 1);

  const colCount = headerRow.length;
  const types = new Array(colCount).fill("TEXT");

  for (let col = 0; col < colCount; col++) {
    // Bemonstert maximaal 50 niet-lege waarden
    const values = [];

    for (let r = 0; r < dataRows.length && values.length < 50; r++) {
      const cell = dataRows[r][col];
      const v = cell != null ? String(cell).trim() : "";
      if (v !== "") values.push(v);
    }

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

    // Controleer of alle waarden integers zijn
    let allInt = true;
    let allNumeric = true;

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

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

  return types;
}

Kernbeslissingen:

Bemonstert slechts 50 waarden voor prestaties bij grote tabellen
INTEGER is strikter dan REAL (geen decimalen toegestaan)
Als EEN waarde niet past, val terug op TEXT
Lege kolommen worden standaard TEXT

Stap 4: Waarden Escapen

SQL-strings vereisen escaping van enkele aanhalingstekens door ze te verdubbelen:

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

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

  // Voor numerieke typen, probeer een niet-geciteerd getal te retourneren
  if (type === "INTEGER" || type === "REAL") {
    const normalized = v.replace(",", ".");  // Verwerk EU decimaalformaat
    const num = Number(normalized);

    if (!Number.isNaN(num) && Number.isFinite(num)) {
      return normalized;
    }
    // Val door naar TEXT-afhandeling als het geen geldig getal is
  }

  // TEXT of fallback: escape enkele aanhalingstekens
  const escaped = v.replace(/'/g, "''");
  return `'${escaped}'`;
}

Voorbeelden:

"Hallo" → 'Hallo'
"O'Brien" → 'O''Brien'
"Het is \"geciteerd\"" → 'Het is "geciteerd"'
123 (INTEGER) → 123
45.67 (REAL) → 45.67
"" → NULL
null → NULL

Stap 5: De Volledige SQL Genereren

function tableToSqlString(tableInfo) {
  const rows = tableInfo.rows || [];
  if (!rows.length) return "";

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

  if (!headerRow) return "";

  // Genereer veilige kolomnamen
  const columnNames = generateColumnNames(headerRow);

  // Leid kolomtypen af
  const types = inferSqlColumnTypes(rows, headerRowIndex);

  // Genereer veilige tabelnaam
  const rawTableName = tableInfo.slug || tableInfo.name || "tabel";
  let tableName = sanitizeSqlIdentifier(rawTableName, "tabel");
  if (!tableName) tableName = "tabel_export";

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

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

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

  // COMBINEER
  let sql = `-- Geëxporteerd met HTML Table Exporter PRO\n\n${createStmt}\n\n`;

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

  return sql;
}

Voorbeeldoutput

Invoertabel:

Product	Prijs	Aant
Widget	29.99	100
O'Brien's	19.99	50

Output:

-- Geëxporteerd met HTML Table Exporter PRO

CREATE TABLE producten (
  product TEXT,
  prijs REAL,
  aant INTEGER
);

INSERT INTO producten (product, prijs, aant) VALUES
  ('Widget', 29.99, 100),
  ('O''Brien''s', 19.99, 50);

Randgevallen Afhandelen

Lege Tabellen

if (!rows.length) return "";
if (!headerRow) return "";

Retourneer een lege string in plaats van ongeldige SQL.

Kolommen met Alleen NULL

Kolommen met alleen lege/null-waarden krijgen het TEXT-type. De afleidingsfunctie verwerkt dit:

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

Gemengde Getalformaten

De escaper normaliseert komma-decimalen:

const normalized = v.replace(",", ".");

"1,234.56" blijft zoals het is. "1.234,56" (EU-formaat) moet genormaliseerd worden vóór het de SQL-generator bereikt—dat is de taak van de opschoningspresets.

Zeer Lange Waarden

TEXT-kolommen in SQLite/PostgreSQL verwerken willekeurige lengte. Geen afkapping nodig. Voor MySQL's VARCHAR-limieten moet je de lengte specificeren of expliciet TEXT gebruiken.

Database-compatibiliteit

De gegenereerde SQL is opzettelijk eenvoudig:

Feature	SQLite	PostgreSQL	MySQL
CREATE TABLE	✅	✅	✅
INTEGER/REAL/TEXT	✅	✅	✅
Multi-rij INSERT	✅	✅	✅
Enkele quote escape	✅	✅	✅

Voor databasespecifieke features (constraints, indexen, schema's) breid je de generator uit. Voor eenvoudige data-import werkt dit overal.

De Export Gebruiken

# SQLite
sqlite3 mijndb.db < export.sql

# PostgreSQL
psql -d mijndb -f export.sql

# MySQL
mysql mijndb < export.sql

Of plak direct in je databaseclient.

Lees voor meer over het exporteren van tabellen naar andere formaten onze gids over de beste Chrome-extensies voor het exporteren van tabellen.

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

Convertir des Tableaux Web en Requêtes SQL INSERT

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

Vous avez un tableau sur une page web. Vous en avez besoin dans votre base de données.

L'approche manuelle : copier dans Excel, nettoyer, exporter en CSV, écrire le CREATE TABLE à la main, utiliser LOAD DATA ou COPY, déboguer les erreurs.

La meilleure approche : générer du SQL complet directement — CREATE TABLE avec types inférés, requêtes INSERT avec échappement correct.

Voici comment construire un convertisseur de tableaux web vers SQL.

Le Format de Sortie

Un export SQL complet devrait inclure :

-- Exporté depuis HTML Table Exporter PRO

CREATE TABLE products (
  product_id INTEGER,
  name TEXT,
  price REAL,
  in_stock TEXT
);

INSERT INTO products (product_id, name, price, in_stock) VALUES
  (1, 'Widget', 29.99, 'true'),
  (2, 'Gadget', 49.99, 'false'),
  (3, 'L''article d''O''Brien', 19.99, 'true');

Exigences clés :

Nom de table valide (identifiant SQL sûr)
Noms de colonnes valides (pas d'espaces, pas de caractères spéciaux)
Types de colonnes appropriés (INTEGER, REAL, TEXT)
Valeurs correctement échappées (apostrophes doublées)
Gestion des NULL

Étape 1 : Assainir les Identifiants

Les identifiants SQL (noms de tables et de colonnes) ont des règles strictes :

Pas d'espaces ni de caractères spéciaux
Ne peuvent pas commencer par un chiffre
Devraient être en minuscules pour la portabilité

function sanitizeSqlIdentifier(name, fallback) {
  let id = (name || "").toString().trim();

  if (!id) id = fallback || "col";

  id = id
    .normalize("NFD")
    .replace(/[\u0300-\u036f]/g, "")  // Supprimer les accents (café → cafe)
    .toLowerCase()
    .replace(/[^a-z0-9_]+/g, "_")     // Remplacer les car. invalides par underscore
    .replace(/^_+|_+$/g, "");          // Supprimer les underscores en début/fin

  // Les identifiants SQL ne peuvent pas commencer par un chiffre
  if (/^[0-9]/.test(id)) {
    id = "_" + id;
  }

  if (!id) id = fallback || "col";
  return id;
}

Exemples :

« Nom du Produit » → « nom_du_produit »
« Prix (€) » → « prix »
« 2024 Revenus » → « _2024_revenus »
« Préço » → « preco »

Étape 2 : Générer des Noms de Colonnes Uniques

Les tableaux peuvent avoir des en-têtes dupliqués. SQL ne peut pas avoir de noms de colonnes dupliqués.

function generateColumnNames(headerRow) {
  const usedNames = new Set();

  return headerRow.map((header, index) => {
    const base = sanitizeSqlIdentifier(header, `col_${index + 1}`);
    let candidate = base;
    let counter = 1;

    while (usedNames.has(candidate)) {
      candidate = `${base}_${counter}`;
      counter++;
    }

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

Exemples :

["Nom", "Nom", "Valeur"] → ["nom", "nom_1", "valeur"]
["", "", "Données"] → ["col_1", "col_2", "donnees"]

Étape 3 : Inférer les Types de Colonnes

SQL a trois types principaux qui nous intéressent :

INTEGER : Nombres entiers
REAL : Nombres décimaux
TEXT : Tout le reste

L'inférence échantillonne les valeurs de la colonne et choisit le type le plus spécifique qui correspond à toutes les valeurs :

function inferSqlColumnTypes(rows, headerRowIndex = 0) {
  const headerRow = rows[headerRowIndex] || [];
  const dataRows = rows.slice(headerRowIndex + 1);

  const colCount = headerRow.length;
  const types = new Array(colCount).fill("TEXT");

  for (let col = 0; col < colCount; col++) {
    // Échantillonner jusqu'à 50 valeurs non vides
    const values = [];

    for (let r = 0; r < dataRows.length && values.length < 50; r++) {
      const cell = dataRows[r][col];
      const v = cell != null ? String(cell).trim() : "";
      if (v !== "") values.push(v);
    }

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

    // Vérifier si toutes les valeurs sont des entiers
    let allInt = true;
    let allNumeric = true;

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

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

  return types;
}

Décisions clés :

Échantillonner seulement 50 valeurs pour la performance sur les grands tableaux
INTEGER est plus strict que REAL (pas de décimales autorisées)
Si UNE SEULE valeur ne correspond pas, retomber sur TEXT
Les colonnes vides sont TEXT par défaut

Étape 4 : Échapper les Valeurs

Les chaînes SQL nécessitent d'échapper les apostrophes en les doublant :

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

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

  // Pour les types numériques, essayer de retourner un nombre sans guillemets
  if (type === "INTEGER" || type === "REAL") {
    const normalized = v.replace(",", ".");  // Gérer le format décimal EU
    const num = Number(normalized);

    if (!Number.isNaN(num) && Number.isFinite(num)) {
      return normalized;
    }
    // Retomber sur le traitement TEXT si ce n'est pas un nombre valide
  }

  // TEXT ou fallback : échapper les apostrophes
  const escaped = v.replace(/'/g, "''");
  return `'${escaped}'`;
}

Exemples :

"Bonjour" → 'Bonjour'
"L'article" → 'L''article'
"C'est \"cité\"" → 'C''est "cité"'
123 (INTEGER) → 123
45.67 (REAL) → 45.67
"" → NULL
null → NULL

Étape 5 : Générer le SQL Complet

function tableToSqlString(tableInfo) {
  const rows = tableInfo.rows || [];
  if (!rows.length) return "";

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

  if (!headerRow) return "";

  // Générer des noms de colonnes sûrs
  const columnNames = generateColumnNames(headerRow);

  // Inférer les types de colonnes
  const types = inferSqlColumnTypes(rows, headerRowIndex);

  // Générer un nom de table sûr
  const rawTableName = tableInfo.slug || tableInfo.name || "table";
  let tableName = sanitizeSqlIdentifier(rawTableName, "table");
  if (!tableName) tableName = "table_export";

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

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

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

  // COMBINER
  let sql = `-- Exporté depuis HTML Table Exporter PRO\n\n${createStmt}\n\n`;

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

  return sql;
}

Exemple de Sortie

Tableau d'entrée :

Produit	Prix	Qté
Widget	29.99	100
L'article d'O'Brien	19.99	50

Sortie :

-- Exporté depuis HTML Table Exporter PRO

CREATE TABLE products (
  produit TEXT,
  prix REAL,
  qte INTEGER
);

INSERT INTO products (produit, prix, qte) VALUES
  ('Widget', 29.99, 100),
  ('L''article d''O''Brien', 19.99, 50);

Gérer les Cas Limites

Tableaux Vides

if (!rows.length) return "";
if (!headerRow) return "";

Retourner une chaîne vide plutôt que du SQL invalide.

Colonnes Entièrement NULL

Les colonnes avec uniquement des valeurs vides/nulles obtiennent le type TEXT. La fonction d'inférence gère cela :

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

Formats de Nombres Mixtes

L'échappeur normalise les décimales avec virgule :

const normalized = v.replace(",", ".");

« 1,234.56 » reste tel quel. « 1.234,56 » (format EU) devrait être normalisé avant d'atteindre le générateur SQL — c'est le rôle des préréglages de nettoyage.

Valeurs Très Longues

Les colonnes TEXT dans SQLite/PostgreSQL gèrent des longueurs arbitraires. Pas de troncature nécessaire. Pour les limites VARCHAR de MySQL, il faudrait spécifier la longueur ou utiliser TEXT explicitement.

Compatibilité entre Bases de Données

Le SQL généré est intentionnellement simple :

Fonctionnalité	SQLite	PostgreSQL	MySQL
CREATE TABLE	✅	✅	✅
INTEGER/REAL/TEXT	✅	✅	✅
INSERT multi-lignes	✅	✅	✅
Échappement apostrophe	✅	✅	✅

Pour des fonctionnalités spécifiques aux bases de données (contraintes, index, schémas), il faudrait étendre le générateur. Pour un import basique de données, cela fonctionne partout.

Utiliser l'Export

# SQLite
sqlite3 mydb.db < export.sql

# PostgreSQL
psql -d mydb -f export.sql

# MySQL
mysql mydb < export.sql

Ou collez directement dans votre client de base de données.

Pour en savoir plus sur le chemin d'export CSV (quand vous n'avez pas besoin de SQL), consultez notre guide sur l'export de toutes les lignes d'un tableau web paginé.

Besoin d'exports SQL sans écrire de code ? En savoir plus sur gauchogrid.com/fr/html-table-exporter ou essayez-le gratuitement sur le Chrome Web Store.

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

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

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

Exceto quando não é.

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

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

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

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

Considere estes padrões comuns:

Padrão 1: Linha de Título

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

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

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

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

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

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

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

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

Heurística 1: Detectando Linhas de Título

Uma linha de título tipicamente tem:

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

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

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

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

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

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

  return false;
}

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

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

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

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

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

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

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

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

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

  return true;
}

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

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

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

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

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

    totalNonEmpty++;

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

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

  if (totalNonEmpty === 0) return false;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Juntando Tudo: O Algoritmo de Detecção

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

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

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

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

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

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

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

Testes no Mundo Real

Essas heurísticas foram desenvolvidas testando com:

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

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

Quando a Detecção Falha

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

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

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

  return { headerRow, dataRows };
}

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

Resumo

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

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

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

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

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

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

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

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

Bienvenido al problema del formato numérico internacional.

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

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

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

Mismos caracteres. Valores completamente diferentes.

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

La Ambigüedad de Tres Dígitos

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

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

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

El Algoritmo de Detección

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Por Qué Tres Dígitos = Miles

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

¿Por qué? En tablas HTML:

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

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

La Matriz Completa de Formatos

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

Manejando Códigos de Moneda

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

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

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

Cuándo la Heurística Falla

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

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

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

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

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

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

Perfiles de Exportación para Diferentes Regiones

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

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

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

Errores Comunes

No Perder Precisión

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

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

Cuidado con las Entidades HTML

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

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

Preservar el Original Ante la Duda

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

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

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

Resumen

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

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

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

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