DEV Community

Cover image for Tabelas HTML com Dados Ocultos: Extraindo o Que Você Não Vê
circobit
circobit

Posted on

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

#python #javascript #webdev #html

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

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

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

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

Tipos de Dados Ocultos

1. Colunas Ocultas por CSS

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

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

Ou via classes:

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

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

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

2. Atributos Data

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

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

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

Atributos data comuns:

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

3. Atributos Title e Tooltip

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

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

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

4. Linhas Colapsadas/Expansíveis

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

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

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

5. Conteúdo com Lazy Load

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

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

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

Extraindo Dados Ocultos

Extraindo Colunas Ocultas por CSS

Com JavaScript (no console do navegador):

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

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

Com Python + BeautifulSoup:

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

from bs4 import BeautifulSoup

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

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

Extraindo Atributos Data

Abordagem com JavaScript:

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

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

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

Abordagem com Python:

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

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

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

Extraindo Atributos Title 

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

Expandindo Linhas Colapsadas

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

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

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

Opção 2: Remover classe hidden

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

Acionando Lazy Load

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

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

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

Exemplo Real: Valores de Ordenação

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

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

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

Extração com ambos os valores:

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

Quando Extensões de Navegador Ajudam

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

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

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

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

O Fluxo de Inspeção

Antes de extrair qualquer tabela:

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

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

Resumo

Tabelas HTML podem conter múltiplas camadas de dados:

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

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

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

Top comments (0)