Criação de Tabelas

Tabelas são um recurso bastante usado para se organizar visualmente, de modo alinhado, os dados em um documento HTML, ou seja, permitem colocar imagens e texto de um modo mais criativo ou adequado na página. Saiba fazer tudo isso!!!

Por | @oficinadanet Programação
Tabelas são um recurso bastante usado para se organizar visualmente, de modo alinhado, os dados em um documento HTML, ou seja, permitem colocar imagens e texto de um modo mais criativo ou adequado na página.

Dentro de cada célula da tabela pode-se inserir textos, imagens, arquivos, links e, inclusive, outras tabelas.

Cada linha pode conter várias células, assim, é preciso que se marque exatamente o ponto de quebra de uma linha e início de outra.

  • Abaixo, veremos a criação de uma tabela simples.











Célula Célula
Célula Célula



Determina o início e o fim de uma tabela.


Determina o início e um fim de uma linha.


Determina o início e um fim de uma célula.

Atributos de personalização de tabela

border= "x"

Determina a largura da borda da tabela. (x é o valor em pixels da borda)

bgcolor= "cor"
Determina a cor de fundo da tabela.

width= "x"

Determina a largura da tabela. (x é o valor em pixels da largura)

height= "x"
Determina a altura da tabela. (x é o valor em pixels da altura)

cellspacing= "x"
Determina o espaço existente entre a borda da tabela e a célula. (x é o valor do espaço em pixels)

cellpadding= "x"
Determina o espaço existente entre a célula e o conteúdo da mesma. (x é o valor do espaço em pixels)

...
Alguns atributos de tabelas serão apresentadas;
















Exemplo de tabela
Texto 1 Texto 2 Texto 3
Continuação do texto 1 Continuação do texto 2 Continuação do texto 3
Continuação do texto 1 Continuação do texto 2 Continuação do texto 3
Este é apenas um pequeno exemplo


Atributos usados com este elemento: SUMMARY, WIDTH, BORDER, FRAME, RULES, CELLSPACING, CELLPADDING, ID, CLASS, LANG, DIR, TITLE, STYLE, ONCLICK, ONDBLCLICK, ONMOUSEDOWN, ONMOUSEUP, ONMOUSEOVER, ONMOUSEMOVE, ONMOUSEOUT, ONKEYPRESS, ONKEYDOWN, ONKEYUP, BGCOLOR, FRAME, RULES, BORDER.

.

O TBODY é usado para especificar o conteúdo da tabela. Dentro dele estão os elementos que criam as linhas (TR) e colunas da tabela (TD). O uso do TBODY, no entanto, não é necessário.

Exemplo:






Este é um exemplo
Este é outro exemplo


Atributos usados com este elemento: ID, CLASS, LANG, DIR, TITLE, STYLE, ONCLICK, ONDBLCLICK, ONMOUSEDOWN, ONMOUSEUP, ONMOUSEOVER, ONMOUSEMOVE, ONMOUSEOUT, ONKEYPRESS, ONKEYDOWN, ONKEYUP, ALIGN, CHAR, CHAROFF, VALIGN.

.

Todo o conteúdo que é exibido em uma tabela deve ser inserido dentro de uma célula criada com o elemento TD ou TH.

Exemplo:




Primeira célula da tabelaSegunda célula da tabelaTerceira célula da tabela


Atributos usados com este elemento: ABBR, AXIS, HEADERS, SCOPE, ROWSPAN, COLSPAN, NOWRAP, WIDTH, HEIGHT, ID, CLASS, LANG, DIR, TITLE, STYLE, ONCLICK, ONDBLCLICK, ONMOUSEDOWN, ONMOUSEUP, ONMOUSEOVER, ONMOUSEMOVE, ONMOUSEOUT, ONKEYPRESS, ONKEYDOWN, ONKEYUP, BGCOLOR, ALIGN, CHAR, CHAROFF, VALIGN.

.

O elemento TEXTAREA é usado para criar caixas de entrada de texto em páginas HTML.

Exemplo:








Atributos usados com este elemento: NAME, ROWS, COLS, DISABLED, READONLY, TABINDEX, ACCESSKEY, ID, CLASS, LANG, TITLE, STYLE, ONFOCUS, ONBLUR, ONSELECT, ONCHANGE, ONCLICK, ONDBLCLICK, ONMOUSEDOWN, ONMOUSEUP, ONMOUSEOVER, ONMOUSEMOVE, ONMOUSEOUT, ONKEYPRESS, ONKEYDOWN, ONKEYUP.

.

O TFOOT é usado para exibir conteúdo no rodapé de uma tabela. Todo TFOOT deve ter, pelo menos, uma linha de dados, criada com o elemento TD.

Exemplo:










Texto A Texto B Texto C
Fim da tabela


Atributos relacionados com este elemento: Atributos usados com este elemento: ID, CLASS, LANG, DIR, TITLE, STYLE, ONCLICK, ONDBLCLICK, ONMOUSEDOWN, ONMOUSEUP, ONMOUSEOVER, ONMOUSEMOVE, ONMOUSEOUT, ONKEYPRESS, ONKEYDOWN, ONKEYUP, ALIGN, CHAR, CHAROFF, VALIGN.

.

Assim como o elemento TD, o TH é usado para definir as células e o conteúdo de uma tabela. Os dois elementos funcionam da mesma forma, mas o TH é mais utilizado para definir o título de uma coluna. A principal diferença é que o conteúdo inserido dentro do elemento TH é alinhado ao centro da célula e os textos são exibidos em negrito.

Exemplo:




Título ATítulo BTítulo C
Conteúdo A...Conteúdo B...Conteúdo C...


Atributos usados com este elemento: Atributos usados com este elemento: ABBR, AXIS, HEADERS, SCOPE, ROWSPAN, COLSPAN, NOWRAP, WIDTH, HEIGHT, ID, CLASS, LANG, DIR, TITLE, STYLE, ONCLICK, ONDBLCLICK, ONMOUSEDOWN, ONMOUSEUP, ONMOUSEOVER, ONMOUSEMOVE, ONMOUSEOUT, ONKEYPRESS, ONKEYDOWN, ONKEYUP, BGCOLOR, ALIGN, CHAR, CHAROFF, VALIGN.

.

O THEAD é usado para definir o cabeçalho de uma tabela. O TFOOT deve ter pelo menos uma linha de dados, criada com o elemento TR.

Exemplo:












Texto A Texto B Texto C
Fim da tabela



. <br /> <br /> É usado para identificar o título de um documento HTML. Este elemento deve sempre ser colocado no cabeçalho (HEAD) de uma página.<br /> <br /> Exemplo:<br /> <cite><br /> <head><br /> <title>Título da Página


.

Define as linhas de uma tabela. Toda linha deve ter pelo menos um elemento TD, para exibir o conteúdo da tabela.

Exemplo:




Esta é a primeira linha de uma tabela
Esta é a segunda linha de uma tabela


Atributos usados com este elemento: ID, CLASS, LANG, DIR, TITLE, STYLE, ONCLICK, ONDBLCLICK, ONMOUSEDOWN, ONMOUSEUP, ONMOUSEOVER, ONMOUSEMOVE, ONMOUSEOUT, ONKEYPRESS, ONKEYDOWN, ONKEYUP, BGCOLOR, ALIGN, CHAR, CHAROFF, VALIGN.

.

O TT é usado para exibir textos com fontes fixas, como Courier New.

Exemplo:

Um texto com fonte fixa
-----

Para que serve a criação de tabelas?

A utilização de tabelas auxilia a dispor os elementos da página na posição exata que o autor desejar.


...
Espero que gostem. Dúvidas? Comente.

Mais sobre:
Share Tweet
Recomendado
Comentários
Carregar comentários
Destaquesver tudo