Design para Web 3 XHTML(continuação) Ferramentas para Web I.

Apresentação em tema: "Design para Web 3 XHTML(continuação) Ferramentas para Web I."— Transcrição da apresentação:

1 Design para Web Http://tertuliano.wetpaint.com

2 3 XHTML(continuação) Ferramentas para Web I

3 TABELAS As tabelas são perfeitas para organizar e apresentar dados de forma prática. Você pode inserir texto, imagens ou links em tabelas, distribuindo melhor as informações em sua página. Trabalhar com tabelas parece uma tarefa difícil, mas na realidade após conhecer as tags e atributos, se torna uma tarefa simples e agradável. Como padrão a tabela não possui bordas. Cada linha da tabela é definida separadamente e você pode modificar a aparência da tabela, utilizando alguns atributos que veremos mais tarde.

4 Tabelas Tabelas são utilizadas em XHTML para representar dados tabulares São utilizadas também para alinhamento de imagens no browser Ninho de Tabelas (comentário) Tag : Dentro desta tag de bloco fica toda a estrutura da tabela ou tabelas.

5 Tabelas Atributos de : BORDER = n: Define a espessura da borda da tabela CELLSPACING=n: Espaço entre as células da tabela CELLPADDING=n: Espaço entre os dados e a borda da célula WIDTH = n|n%: Largura da tabela em relação à tela ALIGN = “tipo”: Alinhamento horizontal da tabela. Tipo : left ou right.

6 Definição de linhas e células: : Define uma linha da tabela. : Define uma célula da linha de título da tabela : Define o conteúdo de uma célula de dados Exemplo de uma Tabela : Personagem Idade Mickey 5 Peter Pan 15 Tabelas

7 Tabelas Resultado da Tabela no browser:

8 EXEMPLO 1 Tabelas Exemplo de Tabela sem Bordas: Linha 1 - Coluna 1 Linha 1 - Coluna 2 Linha 2 - Coluna 1 Linha 2 - Coluna 2

9 TABELAS - ATRIBUTOS Sintaxe do comando:... onde: BORDER="n": é o número da espessura da borda, definido em pixels; WIDTH="n%": é a largura da tabela em relação ao browser; HEIGHT="n%": é a altura da tabela em relação ao browser; CELLSPACING="n": é o espaço entre uma célula e outra, definido em pixels; CELLPADDING="n": é o espaço entre os dados e a borda da tabela, definido em pixels.

10 EXEMPLO 2 Arquivo: tabelasmodificadas.htm Tabelas Modificadas Exemplo de Tabela com: border="3", width="80%" height="30%" cellspacing="6" cellpadding="6" Linha 1 - Coluna 1 Linha 1 - Coluna 2 Linha 2 - Coluna 1 Linha 2 – Coluna 2

11 TABELAS - ALINHAMENTO Sintaxe do comando: Dados da Tabela onde: - ALIGN="posição": define o alinhamento horizontal do conteúdo de uma célula: left: alinha à esquerda; right: alinha à direita; center: alinha centralizado. - VALIGN="posição": define o alinhamento vertical do conteúdo de uma célula: top: alinhamento superior; bottom: alinhamento inferior; middle: alinhamento centralizado.

12 EXEMPLO 3 Arquivo: tabelas-alinhamento.htm Tabelas Alinhadas Exemplo de uma Tabela com Vários Alinhamentos: Alinhamento Centralizado na tag TD Alinhamento à Direita na tag TD Alinhamento à Direita na tag TR

13 MESCLANDO CELULAS Você pode mesclar células em uma mesma linha, ou em uma mesma coluna, utilizando alguns atributos na tag TD. - o atributo COLSPAN, define o número de colunas de uma tabela a serem ocupadas por uma célula; - o atributo ROWSPAN, define o número de linhas ocupadas por uma célula. Sintaxe do comando: Dados da Tabela onde: COLSPAN="n": é o número de colunas que a célula ocupará; ROWSPAN="n": é o número de linhas que a célula ocupará;

14 EXEMPLO 4 Arquivo: tabelas-mescladas.htm Tabelas com Células Mescladas Tabela utilizando o atributo COLSPAN na tag TD Linha 1 Coluna 1 Linha 2 Coluna 1 Linha 2 Coluna 2 continuação >>

15 Tabela utilizando o atributo ROWSPAN na tag TD: Linha 1 Coluna 1 Linha 1 Coluna2 Linha2 Coluna2