Como Criar Tabelas Aninhadas e Alterar Cores no HTML (Do Legado ao CSS Moderno)
Fala, futuro mestre do Front-End! Tudo tranquilo por aí? Se você chegou até aqui no nosso curso completo de HTML, você já sabe montar a estrutura básica de uma tabela, definir cabeçalhos e bordas. Mas a web não é feita só de linhas em preto e branco, certo?
Hoje, vamos mergulhar em dois conceitos clássicos e fundamentais: como injetar cores nas suas células (e as tretas de como se fazia antigamente vs como se faz hoje) e o poderoso conceito de Tabelas Aninhadas (colocar uma tabela dentro de outra). E para não ficar só na teoria chata, vamos construir juntos um pedaço de um tabuleiro de Sudoku. Bora codar!
O Que São Tabelas Aninhadas e Cores no HTML?
Como centralizar ou colorir uma tabela e o que é aninhamento? Uma tabela aninhada ocorre quando inserimos a tag <table> dentro de uma célula <td> de outra tabela. Para alterar a cor de fundo, usava-se o atributo legado bgcolor, mas a forma moderna e recomendada é usar a propriedade background-color através do CSS.
A Evolução das Cores: Do `bgcolor` ao CSS
Antigamente (na época do HTML4), os desenvolvedores controlavam a aparência visual diretamente nas tags HTML. Queríamos uma linha vermelha? Metíamos um bgcolor="red" na tag <tr>. Mas isso gerava uma sopa de letrinhas caótica no código.
Hoje em dia, o HTML serve apenas para estrutura e semântica. O visual fica 100% por conta do CSS. O atributo
bgcolor está obsoleto. Mostraremos ele aqui para fins de bagagem histórica (você VAI esbarrar nisso em sistemas legados), mas foque na solução CSS.
Veja a comparação de uma linha de tabela colorida:
<!-- O Jeito Antigo (Legado/Não Recomendado) -->
<tr bgcolor="#ff0000">
<td>Linha Vermelha</td>
</tr>
<!-- O Jeito Moderno com CSS Inline -->
<tr style="background-color: #ff0000; color: white;">
<td>Linha Vermelha</td>
</tr>Cansado de se perder nos códigos e quer dominar o Front-End de verdade? 🚀
A internet está cheia de tutoriais rasos. Se você quer estudar sem depender de internet, fugir de anúncios e ter o mapa completo do zero ao profissional, você precisa do material certo.
"Estava travado tentando entender essas tags e a transição para o CSS, essa apostila salvou meus projetos e clareou minha mente!" - Carlos, Desenvolvedor.
Tabelas Aninhadas: Criando o Tabuleiro de Sudoku
Antes do advento do CSS moderno (onde usamos Flexbox e CSS Grid para layouts de sites), os webmasters estruturavam páginas inteiras usando tabelas dentro de tabelas. Era um pesadelo de manutenção, mas a lógica do aninhamento continua útil para dados complexos.
<td> e o conteúdo principal em outro. Hoje, usar tabelas para layout penaliza o SEO do seu site no Google. Use tabelas apenas para exibir dados tabulares (como planilhas, horários ou nosso jogo abaixo).
Um tabuleiro de Sudoku é perfeito para ilustrar isso. Ele é um quadradão de 9 células (3x3). Dentro de cada uma dessas 9 células maiores, existe outro quadradinho de 9 células (3x3). Vamos ver como isso fica na sintaxe do HTML:
<!-- Tabela Mestre (O Tabuleiro Principal) -->
<table style="border: 2px solid black; background-color: #000; margin: 0 auto;" cellpadding="5" cellspacing="2">
<tr style="text-align: center;">
<!-- CÉLULA 1 DO TABULEIRO MESTRE -->
<td style="background-color: white;">
<!-- Tabela Aninhada (O bloco 3x3 interno) -->
<table border="1" cellspacing="0" cellpadding="8" style="border-collapse: collapse;">
<tr> <td>3</td> <td>5</td> <td>7</td> </tr>
<tr> <td>4</td> <td>6</td> <td>8</td> </tr>
<tr> <td>9</td> <td>1</td> <td>2</td> </tr>
</table>
</td>
<!-- CÉLULA 2 DO TABULEIRO MESTRE -->
<td style="background-color: white;">
<table border="1" cellspacing="0" cellpadding="8" style="border-collapse: collapse;">
<tr> <td>6</td> <td>8</td> <td>2</td> </tr>
<tr> <td>6</td> <td>9</td> <td>5</td> </tr>
<tr> <td>1</td> <td>3</td> <td>7</td> </tr>
</table>
</td>
<!-- CÉLULA 3 DO TABULEIRO MESTRE -->
<td style="background-color: white;">
<table border="1" cellspacing="0" cellpadding="8" style="border-collapse: collapse;">
<tr> <td>4</td> <td>5</td> <td>9</td> </tr>
<tr> <td>6</td> <td>7</td> <td>2</td> </tr>
<tr> <td>8</td> <td>3</td> <td>1</td> </tr>
</table>
</td>
</tr>
</table>Resultado Prático Visual:
Veja como o navegador do seu usuário irá renderizar esse código. Repare nas bordas mais grossas separando os blocos (feitas pela tabela pai com fundo preto) e nas bordas finas dos números (tabelas filhas):
|
|
|
Quando o código começa a ficar profundo (tabela dentro de linha dentro de tabela), identar o código (dar os espaços à esquerda) é caso de vida ou morte. Se você esquecer de fechar um
</td>, todo o tabuleiro do seu Sudoku vai quebrar na tela!
Perguntas Frequentes (FAQ)
Ainda posso usar atributos como width, cellspacing e bgcolor no HTML5?
Eles continuam funcionando na maioria dos navegadores modernos para manter compatibilidade com a "web velha" (Backward Compatibility). No entanto, são considerados deprecated (obsoletos) pela W3C. A melhor prática do mercado é sempre transferir essa parte visual para o CSS.
Por que não devo usar tabelas para o layout do meu site?
O robô do Google lê seu site pelas tags. Quando ele acha uma tag <table>, ele espera ler dados e planilhas cruzadas. Se ele acha o cabeçalho e o menu de navegação do seu site lá dentro, ele não entende a hierarquia, o que derruba seu SEO. Além disso, tabelas aninhadas complexas são horríveis de tornar responsivas para celulares. Em vez disso, use `<div>` com CSS Grid e Flexbox!
O Que Estudar a Seguir?
Agora que você domina as tabelas em sua essência, está na hora de subir o nível. Não pare por aqui! Recomendamos os seguintes próximos passos na sua jornada de Front-End:
- Como criar formulários interativos em HTML (Inputs, Textarea e Botões).
- Introdução ao CSS: Como vincular uma folha de estilos à sua página.
- Listas Ordenadas e Desordenadas: Construindo menus de navegação semanticamente corretos.
Nenhum comentário:
Postar um comentário