Oficina da Net Logo

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:
Comentários
Carregar comentários
Siga o nosso Instagram!

Estamos lá também: @oficinadanetoficial

Seguir o Instagram do Oficina da Net