tecnologias web - tabelas

HTML - Tabelas

O que são tabelas?

• Estrutura com linhas e colunas

• As tabelas em HTML funcionam de uma

forma idêntica a estruturas semelhantes

que existem nos processadores de texto.

• Tabelas são tabelas, ora bolas!

facebook.com/rangeljavier

Principal Tag

• Para criar uma tabela com HTML existe

uma tag especifica para isto.

<table>

</table>


Linhas e Colunas

• Para criar uma linha da tabela, utiliza-se a

tag: <tr>

• Para criar uma coluna da tabela, usa-se a

tag: <td>

• Pratica!


Mesclar

• Para mesclarmos colunas ou linhas,

existem dois atributos responsável por

esta ação. O colspan (mesclar colunas) e

o rowspan (mesclar linhas).

• OBS: Estes atributos só funcionarão na

tag <td>


Colspan: Exemplo

<td colspan=“n”></td>

<td colspan=“2”>Linha com duas colunas

mescladas</td>


Rowspan: Exemplo

<td rowspan=“n”></td>

<td rowspan=“2”>Linhas mesclada</td>


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.


Exemplo

CURSO DISCIPLINA PROFESSOR

Enfermagem Anatomia I Ana Cleide

Serviço Social Teoria do Serviço Social Mariana Cruz

Ciências da Computação Programação V Rangel Xavier


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)


Prática


Atributos da Tabela

• Além dos atributos específicos de cada

célula ou linha, as tabelas podem ser

adicionalmente formatadas a partir dos

atributos que nos oferece a própria

etiqueta <table>.


Atributos da Tabela

• Praticar em cada um dos itens.

• align: Alinha horizontalmente a tabela em

relação ao seu entorno.

• background: Permite-nos colocar um

fundo para a tabela desde um link a uma

imagem.


Atributos da Tabela

• bgcolor: Dá cor de fundo à tabela.

• border: Define o número de pixels da

borda principal.

• bordercolor: Define a cor da borda.

• cellpadding: Define o espaço entre as

bordas da célula e o conteúdo da mesma.

(em pixels)


Atributos da Tabela

• cellspacing: Define o espaço entre as

bordas (em pixels).

• height: Define a altura da tabela em

pixels ou porcentagem.

• width: Define a largura da tabela em

pixels ou porcentagem.


Cellpadding e Cellspacing


cellspacingcellpadding

Prática 01


Lista Ordenada Lista Desordenada

1. Rangel

2. Maria

3. Francisco

4. Bartolomeu

5. José

6. João

7. George

8. Lennon

9. Paul

10. Ringo

• Carlos

• Carol

• Mariana

• John

• McCartney

• Star

• Harisson

• Michael

• Jackson

• Five

Prática 02

Esta imagem está dentro de duas

linhas mescladas?

Cabeçalho

Este texto é apenas para complicar

mais ainda as coisas.


Extra

• Cores em Hexadecimal

• Pesquisa sobre diferença entre RGB e

Hexadecimal

• Não é o foco da disciplina


Links Interessantes

• http://www.mundoblogger.com.br/2013/05/

entendendo-a-relacao-entre-cores-rgb-e-

hexadecimais.html

• http://www.color-hex.com/


http://www.mundoblogger.com.br/2013/05/entendendo-a-relacao-entre-cores-rgb-e-hexadecimais.html




















http://www.color-hex.com/



tecnologias web - tabelas

Technology