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.

Curso de HTML Aula 06 – 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
2 Comentários