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.

<table border="1">
<tr>
<td>Célula</td>
<td>Célula</td>
</tr>
<tr>
<td>Célula</td>
<td>Célula</td>
</tr>
</table>

<table></table>
Determina o início e o fim de uma tabela.

<tr></tr>
Determina o início e um fim de uma linha.

<td></td>
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;

<table border="1" bordercolor="#0000FF" cellppading="10" width="50%">
<caption>Exemplo de tabela</caption>
<tr><th>Texto 1</th><th> Texto 2</th><th> Texto 3</th>
</tr>
<td><td>Continuação do texto 1</td>
<td> Continuação do texto 2</td>
<td> Continuação do texto 3</td>
</tr>
<tr><td> Continuação do texto 1</td>
<td> Continuação do texto 2</td>
<td> Continuação do texto 3</td>
</tr>
<tfoot>
<tr><th colspan="4">Este é apenas um pequeno exemplo</th></tr>
</tfoot>
</table>

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.

. <tbody>

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:

<table>
<tbody>
<tr><td>Este é um exemplo</td></tr>
<tr><td>Este é outro exemplo</td></tr>
</tbody>
</table>

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.

. <td>

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:

<table>
<tr><td>Primeira célula da tabela</td><td>Segunda célula da tabela</td><td>Terceira célula da tabela</td></tr>
<tr><td colspan=3> </td>
</table>

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.

. <testarea>

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

Exemplo:

<FORM action="http://www.exemplo.com.br/cgi-bin/pegar-texto" method="post">
<P>
<TEXTAREA name="texto" rows="25" cols="60">
</TEXTAREA>
<INPUT type="submit" value="Enviar"><INPUT type="reset" value="Limpar">
</P>
</FORM>

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.

. <TFOOT>

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:

<table border="1" cellppading="10" cellspacing="0" width="50%">
<tr>
<td>Texto A</td>
<td>Texto B</td>
<td>Texto C</td>
</tr>
<tfoot>
<tr><th colspan=3>Fim da tabela</th></tr>
</tfoot>
</table>

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.

. <TH>

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:

<table border="1" BORDERCOLOR="#000000">
<tr><th>Título A</th><th>Título B</th><th>Título C</td></tr>
<tr><td>Conteúdo A...</td><td>Conteúdo B...</td><td>Conteúdo C...</td>
</table>

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.

. <THEAD>

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:

<table border="1" cellppading="10" cellspacing="0" width="50%">
<tr>
<thead>
<td>Texto A</td>
<td>Texto B</td>
<td>Texto C</td>
</thead>
</tr>
<tfoot>
<tr><th colspan=3>Fim da tabela</th></tr>
</tfoot>
</table>


. <TITLE>

É usado para identificar o título de um documento HTML. Este elemento deve sempre ser colocado no cabeçalho (HEAD) de uma página.

Exemplo:

<head>
<title>Título da Página</title>
</head>

. <tr>

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

Exemplo:

<table border="1" bordercolor="#000000">
<tr id="primeiralinha"><td>Esta é a primeira linha de uma tabela</td>
<tr id="segundalinha"><td>Esta é a segunda linha de uma tabela</td>
</TABLE>

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.

. <TT>

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

Exemplo:

<TT>Um texto com fonte fixa</TT>
-----

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.

3 Comentário(s) compartilhe