Cor e imagens em Tabelas - Tabelas dentro de Tabelas (nested tables)

Agora que já estamos dominando bem os principais conceitos sobre tabelas, como definir tamanho, espaçamento e alinhamento, ou como criar título, corpo, cabeçalho e rodapé de uma tabela, vamos aprender como mudar o fundo das tabelas e uma importante técnica: colocar tabelas dentro de tabelas.

Este tutorial de nosso curso de HTML irá nos auxiliar a criar um site usando tabelas para definir o layout, assunto de nosso próximo artigo.

• Estudar pela Apostila HTML Progressivo

Como alterar a cor de fundo de tabelas em HTML

Já reparou na tabela do campeonato brasileiro?
Geralmente ela possui um trecho azul escuro em cima, com os times que se classificaram para a libertadores.

Uma outra parte é clara, mostrando os times que vão disputar o campeonato sul-americano.
Tem um trecho em branco também, com os times que nem vão participar dessas competições, nem vão cair.
E, por fim, essas tabelas costumam ter um trecho em vermelho, com quatro times que estão na zona de rebaixamento.

Pois bem, é exatamente isso que vamos fazer neste tutorial de nosso curso de HTML.
Para isso, iremos usar um atributo 'universa'l do HTML 4, que é o que estamos estudando atualmente, que é o atributo bgcolor para definir cores em HTML

Podemos definir a cor de fundo de uma tabela colocando esse atributo na tag table.
Por exemplo, uma tabela com fundo amarelo seria: <table bgcolor="FFFF00">
Ou usando o nome da cor: <table bgcolor="YELLOW">





Por exemplo, a tabela do tutorial passado, com fundo amarelo teria o código:

<table width="40%" border="0" cellspacing="10" cellpadding="4" bgcolor="YELLOW">
   <caption><b>Curso HTML Progressivo</b></caption>
   <tr align="center">
      <td>Curso de HTML</td> <td>Curso de CSS</td>
   </tr>
   <tr align="center"  bgcolor="#0000ff">
      <td>Curso de HTML 5</td> <td>Curso de Webmaster</td>
   </tr>
</table>

Onde veríamos o seguinte efeito:

Curso HTML Progressivo

Curso de HTML	Curso de CSS
Curso de HTML 5	Curso de Webmaster

Como usar as cores em linhas, colunas e células

Note que usamos o atributo bgcolor dentro da tag table, que é a tag principal de uma tabela.
Assim, estamos caracterizando a tabela inteira com a cor amarela.

Mas e se quisermos mudar somente a cor de uma linha da tabela?
Ou de uma coluna? Ou só de uma célula ?

Ora, é só colocar o atributo bgcolor nesse elemento específico da tabela.
Fazendo isso, seu navegador oirá automaticamente interpretar seu código HTML e saberá que você quer alterar a cor de fundo somente daqueles elementos específicos.

Por exemplo, vamos fazer com que a nossa primeira linha tenha a cor de background azul, e a segunda linha tenha o background vermelho.
O que define uma linha em uma tabela? A tag <tr> !
Então vamos colocar o atributo bgcolor nessas tags!

Elas ficarão assim:

<tr align="center" bgcolor="BLUE">
<tr align="center" bgcolor="RED">

E o efeito será o seguinte (obviamente você deve tirar o atributo bgcolor da tag table, que colocamos no exemplo anterior):

>

Curso HTML Progressivo

Curso de HTML	Curso de CSS
Curso de HTML 5	Curso de Webmaster

E se quisermos alterar somente as cores das colunas?
Por exemplo, a primeira coluna de cor azul e a segunda de cor vermelha?
Ora, temos que alterar a tag responsável pelas colunas, a td.

Nosso código deste trecho ficaria:

<td bgcolor="BLUE">Curso de HTML  </td> <td bgcolor="RED">Curso de CSS</td>
<td bgcolor="BLUE">Curso de HTML 5</td> <td bgcolor="RED">Curso de Webmaster</td>

E o resultado, como esperado, se torna:

Curso HTML Progressivo

Curso de HTML	Curso de CSS
Curso de HTML 5	Curso de Webmaster

Agora vamos fazer algo bem 'restart', vamos colocar uma célula de cada cor.
A primeira será azul, a segunda vermelha, a terceira amarela e a quarta cinza. E para completar o show de cores, vamos fazer o background da tabela ser rosa!
Nosso código deve ser:

<table width="40%" border="0" cellspacing="10" cellpadding="4" bgcolor="PINK">

<td bgcolor="BLUE">Curso de HTML    </td> <td bgcolor="RED">Curso de CSS</td>
<td bgcolor="YELLOW">Curso de HTML 5</td> <td bgcolor="GREY">Curso de Webmaster</td>

E o, espalhafatoso, resultado é:

Curso HTML Progressivo

Curso de HTML	Curso de CSS
Curso de HTML 5	Curso de Webmaster

É importante notar que, embora o fudo da tabela seja rosa, essa cor não vai alterar a cor de cada célula, pois definimos cores específicas para cada uma delas.
É como se o HTML entendesse que se você definiu uma cor pra cada célula, esta deve ser mais importante, estar a frente, acima da cor do fundo.
Esperto esse HTML, não?

Como usar uma imagem como plano de fundo de uma tabela

E por fim, uma outra maneira de você customizar e usar recursos gráficos em suas tabelas é colocar uma figura, imagem como plano de fundo.
Para isso, usamos o atributo background que irá fornecer a URL da imagem.
Para fazermos nossos testes, salve a seguinte imagem, com o nome "fundo-tabela.gif"

Se você salvar esta imagem na mesma pasta que está usando para criar seus códigos fonte HTML, poderá colocar ela como background usando o atributo da seguinte maneira:

<table background="fundo-tabela.gif">

Caso esteja colocando suas imagens em uma pasta chamada 'img', por exemplo, o código é:

<table background="img/fundo-tabela.gif">

Onde temos o seguinte resultado:

Curso HTML Progressivo

Curso de HTML	Curso de CSS
Curso de HTML 5	Curso de Webmaster

Este tipo de efeito é muito comum em empresas que costumam colocar suas logomarcas na forma de marca d'água (um fundo com alguma imagem).

Tabelas aninhadas - Tabelas dentro de tabelas: Criando um tabuleiro de Sudoku em HTML

Embora tenhamos usados apenas textos dentro de células, é perfeitamente possível usar qualquer coisa dentro de células.

Sim, isso mesmo.

Podemos colocar palavras, textos gigantes, imagens, listas, e até mesmo outras tabelas.
E é o fato de colocarmos tabelas dentro de tabelas que nos permitirá criar layouts para sites inteiros, como veremos no próximo artigo de nossa apostila de HTML.

O que vamos mostrar, basicamente, é como é possível organizar os elementos internos de uma tabela, pois estes sempre ficam alinhados e dispostos lado a lado, acima, abaixo, na organização natural de uma tabela.

Vamos criar o tabuleiro do jogo Sudoku para mostrar como botar uma tabela dentro de outra.
Se pensar com cabeça de webmaster que sabe tabela, é fácil ver que ele é composto por 9 células grandes, e dentro de cada célula grande desta tem 9 células menores, e dentro de cada célula menor desta tem um número de 1 até 9.

Vamos reproduzir o tabuleiro completo ao lado:




Agora vamos criar o primeiro bloco grande, que tem a primeira linha ' 3 5 7'.
Seu código HTML para isso é:

<table width="10%" border="1" cellspacing="0" cellpadding="4">
   <tr align="center">
      <td> 3 </td> <td> 5 </td> <td> 7 </td> 
   </tr>

   <tr align="center">
      <td> 4 </td> <td> 6 </td> <td> 8 </td>
   </tr>

   <tr align="center">
      <td> 9 </td> <td>  1 </td> <td> 2 </td>
   </tr>
</table>

Note nossa organização com o código. Ela é extremamente importante em HTML, principalmente na hora de estudar tabelas, pois é fácil de se perder!
Veja que temos três linhas <tr> </tr> bem separadas, e dentro de cada uma destas, três colunas com <td> </td>

O efeito deste código HTML é:

3	5	7
4	6	8
9	1	2

Para criar os outros blocos, o código é exatamente o mesmo, apenas mudamos os números.
Então não precisamos repetir, você crie todos os blocos aí em seu editor de texto.

A grande sacada aqui é, colocar cada um destes 9 blocos em uma outra tabela.
Uma tabela também de 3 linhas e 3 colunas, como esta:



Cada um dos blocos que criamos teria ficar dentro de cada uma célula desta.
E o que teríamos? O tabuleiro do sudoku!
Colocando cada um desses blocos grandes dentro desta nova tabela, teremos algo assim:

BLOCO 1	BLOCO 2	BLOCO 3
BLOCO 4	BLOCO 5	BLOCO 6
BLOCO 7	BLOCO 8	BLOCO 9

Cujo código para isso é:

<table width="30%" border="1" cellspacing="0" cellpadding="4">
   <tr align="center">
      <td>
         BLOCO 1
      </td>
           
      <td>
         BLOCO 2
      </td>
      
      <td>
         BLOCO 3
      </td> 
   </tr>

   <tr align="center">
      <td>
         BLOCO 4
      </td>
           
      <td>
         BLOCO 5
      </td>
      
      <td>
         BLOCO 6
      </td> 
   </tr>

   <tr align="center">
      <td>
         BLOCO 7
      </td>
           
      <td>
         BLOCO 8
      </td>
      
      <td>
         BLOCO 9
      </td> 
   </tr>
</table>

Pronto! Agora só temos que pegar o código daquela nossa primeira tabela (que demos o exemplo do bloco 1), e colocar onde tem escrito "BLOCO 1", "BLOCO 2", etc.

O resultado vai ser um código gigante, cujo belo efeito será:

3 5 7 4 6 8 9 1 2	9 6 4 1 2 3 5 8 7	2 8 1 5 7 9 4 6 3
6 3 1 7 2 4 8 9 5	7 9 5 3 1 8 2 4 6	6 8 2 6 9 5 1 3 7
1 7 6 5 8 3 2 4 9	4 5 9 6 7 2 8 3 1	3 2 8 9 1 4 7 5 6

Aqui demos um espaçamento entre os blocos, bem como fizemos a borda da tabela maior ser nula.
Aconselhamos você a realmente ler este trecho do artigo e tentar montar seu próprio tabuleiro de Sudoku usando somente os conceitos que aprendemos em Tabelas!

Esse seu conhecimento será essencial para que possamos começar a criar sites com layouts mais bonitos, organizados e profissionais, a partir do próximo tutorial.

Caso tenha tentado e queira conferir, o código HTML que criar o tabuleiro Sudoku é:

<table width="10%" border="0" cellspacing="3" cellpadding="0">
   <tr align="center">
      <td>
         <table width="10%" border="1" cellspacing="0" cellpadding="4">
            <tr align="center">
               <td> 3 </td> <td> 5 </td> <td> 7 </td> 
            </tr>

            <tr align="center">
               <td> 4 </td> <td> 6 </td> <td> 8 </td>
            </tr>

            <tr align="center">
               <td> 9 </td> <td>  1 </td> <td> 2 </td>
            </tr>
         </table>
      </td>
           
      <td>
         <table width="10%" border="1" cellspacing="0" cellpadding="4">
            <tr align="center">
               <td> 9 </td> <td> 6 </td> <td> 4 </td> 
            </tr>

            <tr align="center">
               <td> 1 </td> <td> 2 </td> <td> 3 </td>
            </tr>

            <tr align="center">
               <td> 5 </td> <td> 8 </td> <td> 7 </td>
            </tr>
         </table>
      </td>
      
      <td>
         <table width="10%" border="1" cellspacing="0" cellpadding="4">
            <tr align="center">
               <td> 2 </td> <td> 8 </td> <td> 1 </td> 
            </tr>

            <tr align="center">
               <td> 5 </td> <td> 7 </td> <td> 9 </td>
            </tr>

            <tr align="center">
               <td> 4 </td> <td> 6 </td> <td> 3 </td>
            </tr>
         </table>
      </td> 
   </tr>

      <tr align="center">
      <td>
         <table width="10%" border="1" cellspacing="0" cellpadding="4">
            <tr align="center">
               <td> 6 </td> <td> 3 </td> <td> 1 </td> 
            </tr>

            <tr align="center">
               <td> 7 </td> <td> 2 </td> <td> 4 </td>
            </tr>

            <tr align="center">
               <td> 8 </td> <td> 9 </td> <td> 5 </td>
            </tr>
         </table>
      </td>
           
      <td>
         <table width="10%" border="1" cellspacing="0" cellpadding="4">
            <tr align="center">
               <td> 7 </td> <td> 9 </td> <td> 5 </td> 
            </tr>

            <tr align="center">
               <td> 3 </td> <td> 1 </td> <td> 8 </td>
            </tr>

            <tr align="center">
               <td> 2 </td> <td> 4 </td> <td> 6 </td>
            </tr>
         </table>
      </td>
      
      <td>
         <table width="10%" border="1" cellspacing="0" cellpadding="4">
            <tr align="center">
               <td> 6 </td> <td> 8 </td> <td> 2 </td> 
            </tr>

            <tr align="center">
               <td> 6 </td> <td> 9 </td> <td> 5 </td>
            </tr>

            <tr align="center">
               <td> 1 </td> <td> 3 </td> <td> 7 </td>
            </tr>
         </table>
      </td> 
   </tr>

      <tr align="center">
      <td>
         <table width="10%" border="1" cellspacing="0" cellpadding="4">
            <tr align="center">
               <td> 1 </td> <td> 7 </td> <td> 6 </td> 
            </tr>

            <tr align="center">
               <td> 5 </td> <td> 8 </td> <td> 3 </td>
            </tr>

            <tr align="center">
               <td> 2 </td> <td> 4 </td> <td> 9 </td>
            </tr>
         </table>
      </td>
           
      <td>
         <table width="10%" border="1" cellspacing="0" cellpadding="4">
            <tr align="center">
               <td> 4 </td> <td> 5 </td> <td> 9 </td> 
            </tr>

            <tr align="center">
               <td> 6 </td> <td> 7 </td> <td> 2 </td>
            </tr>

            <tr align="center">
               <td> 8 </td> <td> 3 </td> <td> 1 </td>
            </tr>
         </table>
      </td>
      
      <td>
         <table width="10%" border="1" cellspacing="0" cellpadding="4">
            <tr align="center">
               <td> 3 </td> <td> 2 </td> <td> 8 </td> 
            </tr>

            <tr align="center">
               <td> 9 </td> <td> 1 </td> <td> 4 </td>
            </tr>

            <tr align="center">
               <td> 7 </td> <td> 5 </td> <td> 6 </td>
            </tr>
         </table>
      </td> 
   </tr>
</table>