Introdução ao html - tabelas

1. Introduçãoao html - tabelas ANA PAULA ALVES DE LIMA

2. O conceito tradicional do uso de tabelas • É assim que foi e é assim que continua sendo o projeto da maioria dos sites, tanto existentes quanto os que estão sendo construídos.

3. Tabelasem html • Tabelas são usadas para apresentar "dados tabulares" , isto é, informação que deva ser apresentada em linhas e colunas, de forma lógica. • Para layout de páginasrecomenda-se o uso de <div>

4. Como éfeita a criação de tabelasem html • Há 3 tags principais: • <table> • <tr> • <td> • A tag<table> éusadaparacriação da estrutura da tabela • A tag <tr> É usadaparacriação de linhasnatabela. Significa "tablerow" - linha de tabela -começa e termina e uma linha horizontal da tabela • A tag< td> é usadaparacriação de colunasnatabela. Significa "table data" - dados da tabela. começa e termina cada célula contida nas linhas da tabela.

5. Exemplo de código html paratabelas <table border='1'> <tr> <td>coluna 1</td> <td>coluna 2</td> </tr> </table>

6. Atributos da Tag <table> • border • Descrição: Define se a tabela terá borda ou não • Valores: 1 ou 0 • id • Descrição: identificadorespara a tabela • width • Descrição: larguradatabela • height: Define a altura da tabela em pixels ou porcentagem.

7. Atributos da Tag <td> • align • Descrição: Define o alinhamento do conteúdo dentro da coluna • Valores: left, right, center, justify • cellpadding: Define o espaço entre as bordas da célula e o conteúdo da mesma. (em pixels) • cellspacing: Define o espaço entre as bordas (em pixels).

8. Cellpadding e Cellspacing cellpadding cellspacing facebook.com/rangeljavier

9. O que mais existe? • Os dois atributos colspan e rowspansão usados para criar tabelas singulares. • Colspané a abreviação para "columnspan". Colspané usada na tag <td> para indicar quantas colunas estarão contidas em uma célula.

10. Exemplo Colspan <tableborder="1"> <tr> <tdcolspan="3">Célula 1</td> </tr> <tr> <td>Célula 2</td> <td>Célula 3</td> <td>Célula 4</td> </tr> </table>

11. Que tal rowspan? • Como você já deve ter concluido, rowspanespecifica quantas linhas estarão contidas em uma célula:

12. Exemplo Rowspan <tableborder="1"> <tr> <td rowspan="3">Célula 1</td> <td>Célula 2</td> </tr> <tr> <td>Célula 3</td> </tr> <tr> <td>Célula 4</td> </tr> </table>

13. Tag <th> • Emgeraltabelaspossuemcabeçalhosutilizadosparaorganizar as informações • Utiliza-se esta tag paradefiniroscabeçalhosemtabelas • Utilizadajuntamente com a tag <tr> e aoinvés da tag <td>

14. Exemplo de código html paracabeçalho de tabela <table border='1'> <tr> <th>cabeçalho 1</th> <th>cabeçalho 2</th> <tr> <td>coluna 1</td> <td>coluna 2</td> </tr> </table>

15. Divisão da Tabela • As tabelas podem ser divididas organizadamente em cabeçalho, corpo e rodapé. • Existem tags da tabela para auxiliarmos esta divisão. facebook.com/rangeljavier

16. Exemplo CABEÇALHO DA TABELA CORPO DA TABELA facebook.com/rangeljavier

17. Divisão da Tabela • <thead> cria o cabeçalho • Para funcionamento corretamente, utiliza-se ainda uma tag<th>Disciplina</th> para cada item de cabeçalho. • <tbody> cria o corpo • <tfoot> para criar rodapés da tabelas (quando for necessário) facebook.com/rangeljavier

18. Exercíciosparapraticar

19. Prática 01

20. Prática 02