Aula 06 HTML – HyperText Markup Language – Tabelas

Olá Pessoal,

É importante que ao fazer esta aula você já tenha feito as anteriores e conheça as principais tags em HTML.

Então Vamos lá…
Hoje vou falar um pouco sobre TABELAS.

Nesta aula vamos falar sobre tabelas em HTML.

No desenvolvimento de websites, por mais simples que seja, é necessário uma maneira de organizar seus conteúdos e ajustar seu website. Para isto, usamos as famosas TABELAS. Vou explicar passo a passo como criar a sua sem a necessidade de qualquer programa que desenvolva páginas.

Para isto, vamos precisar do Bloco de notas, isto mesmo! O bloco de notas do Windows. Ou qualquer programa editor de textos simples que você tenha instalado em seu computador.

Tags Principais

<table> </table> // Estas tags definem o inicio e o fim de uma tabela

Toda tabela tem linhas e colunas…

A tag para linhas é:

<tr> </tr>

E para as colunas é:

<td> </td>

Exemplo de tabela:
<table>
<tr>
<td>Célula 1</td>
<td>Célula 2</td>
</tr>
<tr>
<td>Célula 3</td>
<td>Célula 4</td>
</tr>
</table>
Qual a diferença entre <tr> e <td>?
Como você deve ter visto no exemplo acima, este foi o código HTML mais complicado que escrevemos até agora. Vamos analisar isto por partes e explicar as diferentes tags:

3 tags básicas são usadas para inserir tabelas:

<table> começa e termina uma tabela. Evidente.
<tr> significa “table row” – linha de tabela – começa e termina e uma linha horizontal da tabela. Também evidente.
<td> significa “table data” – dados da tabela. começa e termina cada célula contida nas linhas da tabela. Tudo simples e evidente.
Eis o acontece no Exemplo 1: a tabela começa com <table>, segue-se uma <tr>, que indica o início de uma nova linha. Duas células são então inseridas na linha: <td>Célula 1</td> e <td>Célula 2</td>. A linha termina com </tr> e uma nova linha <tr> começa imediatamente a seguir. A nova linha também contém duas células. A tabela termina com </table>.

 

Atributos de Uma Tabela:

Border: que é usado para definir a espessura de uma borda em volta da tabela

Align: define o alinhamento horizontal do conteúdo da tabela, de uma linha ou de uma célula. Por exemplo, left, center ou right (à esquerda, no centro ou à direita).
Valign: define o alinhamento vertical do conteúdo de uma célula. Por exemplo, top, middle ou bottom (em cima, no meio ou em baixo).

Para melhorar seus estudos clique no link confira http://www.ancibe.com.br/html/tabelas.html mais detalhes do que você pode fazer com tabelas.

 

Lembrado todos que participarem deste curso e comentarem em todoas as aulas receberão GRATUITAMENTE UM CERTIFICADO DE PARTICIPAÇÃO.

Confira a vídeo aula:

 
Slides desta aula:

Valeu e até a proxíma!
Fonte: http://www.codigofonte.net/dicas/html/127_criando-tabelas-em-html

http://pt-br.html.net/tutorials/html/lesson10.php