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
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 em “Aula 06 HTML – HyperText Markup Language – Tabelas

  1. Tales eu não conseguir fazer tabela….não deu certo
    O que eu posso ter feito errado? Eu coloquei assim no wordpad os comandos:

    Célula 1
    Célula 2

    Célula 3
    Céluka 4

    Salvei como tabela.html ficou o ícone de página mas aparece outras coisas lá, um monte de letras
    🙁

  2. Bem agora no meu comentário anterior realmente apareceu só “Células”
    mas quando salvei e fui abrir a página aparece assim:

    {\rtf1\ansi\ansicpg1252\deff0\deflang1046{\fonttbl{\f0\fswiss\fcharset0 Arial;}} {\*\generator Msftedit 5.41.15.1515;}\viewkind4\uc1\pard\f0\fs20 \par \par \par \par \par \par >\par \par \par \par
    C\’e9lula 1 C\’e9lula 2 C\’e9lula 3 C\’e9luka 4
    \par \par }

    :/

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *