Tabelas em HTML

Marcadores: HTML Editar postagem

Tabelas são muito usadas na organização de dados e informações, mas além deste propósito, as tabelas em HTML são muito utilizadas na construção de web sites. Por exemplo, podemos criar uma tabela com três linhas, sendo uma para o cabeçalho do site, outra para o conteúdo e a última para o rodapé do site.

Estrutura de uma tabela

Para criar tabelas, vamos utilizar a tag <table> que define uma tabela em HTML.
Dentro da tag <table>, precisamos definir a estrutura de linhas e colunas que formarão cada célula de nossa tabela. Para isso, vamos usar outras duas tags, uma que cria linhas e outra que cria as colunas de uma tabela. Essas tags são <tr> (tag que define uma linha) e <td> (tag que define uma coluna).
Observe a sintaxe de uma tabela de três linhas e duas colunas:

<table>
            <tr>
                  <td>
                        Linha 1, Coluna 1
                  </td>
                  <td>
                        Linha 1, Coluna 2
                  </td>
            </tr>
            <tr>
                  <td>
                        Linha 2, Coluna 1
                  </td>
                  <td>
                        Linha 2, Coluna 2
                  </td>
            </tr>
            <tr>
                  <td>
                        Linha 3, Coluna 1
                  </td>
                  <td>
                        Linha 3, Coluna 2
                  </td>
            </tr>
</table>

Além de criar tabelas em formato padrão, você pode intercalar novas linhas e/ou colunas dentro de qualquer parte de uma tabela, possibilitando assim a construção de uma tabela que irá atender as suas necessidades.
Exemplo:

<table>
            <tr>
                  <td>
                        Cabeçalho
                  </td>
            </tr>
            <tr>
                  <td>
                        Menu - item 1
                  </td>
                  <td>
                        Menu - item 2
                  </td>
                  <td>
                        Menu - item 3
                  </td>
                  <td>
                        Menu - item 4
                  </td>
            </tr>
</table>

Observe o exemplo acima em que demonstro uma tabela que pode ser usada na construção do topo de um site. Essa tabela tem duas linhas, a primeira possui uma coluna, aonde será inserido o cabeçalho do site, e a segunda que possui quatro colunas, sendo cada coluna um item do menu de navegação de um site.

Comandos

Para personalizar a nossa tabela, temos a disposição diversos comandos HTML. Observe abaixo uma pequena lista de comandos, suas funções e seus possíveis valores:

Comando	Função	Valor
width	Controla a largura da tabela.	Valores em píxel, porcentagem, e outras unidades numéricas.

height
Controla a altura da tabela.
Valores em píxel, porcentagem, e outras unidades numéricas.
align
Alinha a tabela.
center (centro), left (esquerda), right (direita).
border
Controla a largura da borda da tabela.
Valores em píxel, porcentagem, e outras unidades numéricas.
cellpadding
Define uma margem interna para as células de uma tabela.
Valores em píxel, porcentagem, e outras unidades numéricas.
cellspacing
Define um espaço entre as células de uma tabela.
Valores em píxel, porcentagem, e outras unidades numéricas.
background
Define uma imagem para o fundo da tabela.
URL de uma imagem.
bgcolor
Define uma cor para o fundo da tabela.
Números de cores em hexadecimal, rgb, etc.

Está é uma pequena lista de comandos que lhes podem ser úteis, cuja sua utilização é muito simples, bastando colocar dentro da tag que deseja aplicar o comando (podem ser tags de linha, de coluna e até mesmo na tag <table> para aplicar os estilos em toda a tabela.) o nome do comando, seguido do sinal de igual e entre aspas o valor do comando.
Exemplo:

<table border="2px" width="500px">
            <tr>
                  <td bgcolor="#CCCCCC">
                        Linha 1, Coluna 1
                  </td>
                  <td bgcolor="#CCCCCC">
                        Linha 1, Coluna 2
                  </td>
            </tr>
            <tr bgcolor="#999999">
                  <td>
                        Linha 2, Coluna 1
                  </td>
                  <td>
                        Linha 2, Coluna 2
                  </td>
            </tr>
</table>

---

---

Postagens relacionadas: