Tabelas em HTML

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:

1 comentários:

Travis Smith disse...

Pretty component to content. I simply stumbled upon your web site and in accession capital to claim that I get in fact loved account your blog posts. Any way I will be subscribing to your feeds and even I fulfillment you get right of entry to constantly rapidly. yahoo sign in

Postar um comentário

Deixe um comentário referente ao assunto do post, compartilhe seu conhecimento, sua dúvida ou deixe uma sugestão.