DEV Community

Cover image for Tablas HTML con Datos Ocultos: Cómo Extraer Lo Que No Se Ve
circobit
circobit

Posted on

Tablas HTML con Datos Ocultos: Cómo Extraer Lo Que No Se Ve

#html #webscraping #javascript #python

La tabla muestra 10 columnas. La exportas. El CSV tiene 10 columnas.

Pero la página tiene 15 columnas de datos. ¿Dónde fueron las otras 5?

Las tablas HTML suelen contener más datos de los que son visibles. Columnas ocultas, atributos data, filas colapsadas — todo invisible para los métodos de extracción básicos.

Aquí te muestro cómo encontrar y extraer los datos que no se ven.

Tipos de Datos Ocultos

1. Columnas Ocultas con CSS

El caso más simple: las columnas existen en el DOM pero están ocultas con CSS.

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

O mediante clases:

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

Por qué los sitios hacen esto: Diseño responsivo (ocultar columnas en pantallas chicas), datos internos para JavaScript, divulgación progresiva.

Cómo detectarlo: Abre DevTools, inspecciona la tabla, busca celdas con display: none o visibility: hidden.

2. Atributos Data

HTML5 permite atributos data-* personalizados en cualquier elemento. Las tablas los usan para almacenar metadatos a los que JavaScript accede pero los usuarios no ven.

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

La tabla visible muestra "Laptop" y "$999". Pero la fila tiene tres datos extra.

Atributos data comunes:

  • data-id — identificador interno
  • data-sort-value — valor numérico para ordenar (cuando se muestra "Ene 2024" pero el orden necesita 202401)
  • data-raw — valor sin formato (cuando se muestra "$1.2M" pero el dato es 1200000)
  • data-href — URL del enlace

3. Atributos Title y Tooltip

El atributo title proporciona texto emergente que suele contener información adicional.

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

La celda muestra "15 Ene". La marca de tiempo completa está en el tooltip.

4. Filas Colapsadas/Expandibles

Las tablas con funcionalidad drill-down ocultan filas de detalle hasta que se hace clic.

<tr class="parent-row">
  <td>Categoría A</td>
  <td>$50.000</td>
</tr>
<tr class="child-row" style="display: none;">
  <td>— Subcategoría A1</td>
  <td>$30.000</td>
</tr>
<tr class="child-row" style="display: none;">
  <td>— Subcategoría A2</td>
  <td>$20.000</td>
</tr>
Enter fullscreen mode Exit fullscreen mode

Los datos existen. Simplemente no están expandidos.

5. Contenido con Carga Diferida (Lazy Load)

Algunas tablas muestran un subconjunto y cargan más mediante JavaScript al hacer scroll o clic en "Cargar Más".

<table id="results">
  <!-- Primeras 20 filas renderizadas -->
</table>
<button onclick="loadMore()">Mostrar Más Resultados</button>
Enter fullscreen mode Exit fullscreen mode

El resto de los datos no están en el DOM hasta que activas la carga.

Extrayendo Datos Ocultos

Extrayendo Columnas Ocultas con CSS

Con JavaScript (en la consola del navegador):

// Remover display:none de todas las celdas
document.querySelectorAll('td, th').forEach(el => {
  el.style.display = '';
});
Enter fullscreen mode Exit fullscreen mode

Ahora exportá normalmente — las columnas son visibles.

Con Python + BeautifulSoup:

BeautifulSoup ignora CSS. Extrae todos los elementos sin importar su visibilidad.

from bs4 import BeautifulSoup

soup = BeautifulSoup(html, 'html.parser')
table = soup.find('table')

for row in table.find_all('tr'):
    cells = [td.get_text(strip=True) for td in row.find_all(['td', 'th'])]
    print(cells)  # Incluye columnas ocultas
Enter fullscreen mode Exit fullscreen mode

Extrayendo Atributos Data

Enfoque con JavaScript:

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

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

console.log(JSON.stringify(data, null, 2));
Enter fullscreen mode Exit fullscreen mode

Enfoque con Python:

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

    # Obtener texto de las celdas
    cells = [td.get_text(strip=True) for td in row.find_all('td')]

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

Extrayendo Atributos Title 

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

Expandiendo Filas Colapsadas

Opción 1: Clic en todos los expansores

// Buscar y hacer clic en todos los botones de expansión
document.querySelectorAll('.expand-btn, .toggle-row').forEach(btn => {
  btn.click();
});

// Esperar a que el DOM se actualice, luego exportar
setTimeout(() => {
  // Lógica de exportación aquí
}, 1000);
Enter fullscreen mode Exit fullscreen mode

Opción 2: Remover la clase hidden

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

Activando Lazy Load

Esto es más complicado — necesitas simular la acción que dispara la carga.

// Scroll al final para activar scroll infinito
window.scrollTo(0, document.body.scrollHeight);

// O hacer clic en "Cargar Más" repetidamente
const loadMore = document.querySelector('.load-more-btn');
while (loadMore && !loadMore.disabled) {
  loadMore.click();
  await new Promise(r => setTimeout(r, 500)); // Esperar la carga
}
Enter fullscreen mode Exit fullscreen mode

Ejemplo Real: Valores de Ordenamiento

Las tablas de estadísticas deportivas suelen mostrar números formateados pero ordenar por valores crudos.

<td data-sort="1234567">1.23M</td>
<td data-sort="20240115">15 Ene, 2024</td>
<td data-sort="0.347">34.7%</td>
Enter fullscreen mode Exit fullscreen mode

Si solo extraes el texto visible, obtienes cadenas formateadas que no se pueden ordenar ni calcular correctamente.

Extracción con ambos valores:

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

Cuándo las Extensiones del Navegador Ayudan

Las buenas herramientas de exportación de tablas manejan algo de esto automáticamente:

  • Las columnas ocultas con CSS se pueden incluir mediante opciones
  • Los atributos data se pueden extraer como columnas adicionales
  • La normalización de números puede parsear "$1.23M" a 1230000

HTML Table Exporter extrae contenido visible con manejo adecuado de celdas combinadas y formato. Para necesidades de extracción más complejas sin código, consulta nuestra guía sobre cómo hacer scraping de tablas sin programar.

Para atributos data y contenido profundamente oculto, puede que necesites los enfoques con JavaScript mencionados arriba.

El Flujo de Inspección

Antes de extraer cualquier tabla:

  1. Abrí DevTools (F12)
  2. Inspeccioná el elemento tabla
  3. Busca:
    • display: none en columnas
    • Atributos data-* en filas/celdas
    • Atributos title con info extra
    • Filas hijas ocultas
    • Botones "Cargar más"
  4. Decide: ¿Los datos visibles son suficientes, o necesitas los datos ocultos?

La mayoría de las veces, los datos visibles son suficientes. Pero cuando no lo son, saber cómo encontrar y extraer datos ocultos marca la diferencia.

Resumen

Las tablas HTML pueden contener múltiples capas de datos:

Capa Cómo Acceder
Texto visible Exportación estándar
Columnas ocultas con CSS Remover display:none o usar BeautifulSoup
Atributos data JavaScript dataset o Python attrs
Title/tooltips Extraer atributo title
Filas colapsadas Expandir o remover clase hidden
Carga diferida Activar la carga primero

Los datos generalmente están ahí. Solo necesitas saber dónde buscar.

¿Necesitas exportar los datos que puedes ver? Conoce más en gauchogrid.com/es/html-table-exporter o prueba HTML Table Exporter gratis en la Chrome Web Store.

Top comments (0)