Tag <TABLE> , para criar tabelas em HTML

As tabelas são muito usadas para melhorar o layout de uma página, e são útil para organizar os dados e imagens, possibilitando um fácil alinhamento destes.

As tabelas podem conter textos, parágrafos, imagens, listas, e até mesmo outras tabelas.
Toda tabela deve ser iniciada com a tag <table>  e encerrada com </table>.
ATENÇÃO: Dessa forma a tabela vai aparecer sem bordas, mas dividindo linhas e células. 
Para que a tabela apareça com bordas simples, defina dessa forma <table border> </table>. 
Antes e depois de uma tabela, acontece sempre uma quebra de linha.

<TR> </TR>  =A tag de linha da tabela
Cada linha de uma tabela deve sempre aparecer entre as tags <tr>  e </tr>. (TR=Table Row)



<TD> </TD> =Esta é a tag que define cada célula de uma tabela. As células de uma tabela devem sempre aparecer entre as tags de linhas (<tr>  e </tr> ). 
Como padrão, o texto nas células é alinhado a esquerda.
A tag  vem do inglês table data e significa dados da tabela.
Esta tag define uma célula na tabela.
O conteúdo entre as tags  e 
 será apresentado em uma célula da tabela.

<TH> </TH>
A tag  vem do inglês table header cell e significa célula de cabeçalho da tabela. 
Desta forma são definidos os títulos de uma tabela. 
Estes podem ser posicionados em qualquer célula. 
A diferença entre a tag de célula e título de célula é que o título aparece em negrito.
Vamos ver então o exemplo de uma tabela utilizando essas Tags básicas.


Veja na sintaxe:

<table border>
<tr>
<td> Itens/Mês</td>
<th> Janeiro</th> <th> Fevereiro</th> <th> Março</th>
</tr>
<tr>
<th> Usuarios</th> <td> 80</td> <td> 93</td> <td> 120</td>
</tr> <tr>
<th> Linhas</th> <td> 3</td> <td> 3</td> <td> 5</td>
</tr> </table>

Veja isso visualizado no navegador como fica:



Aqui esta uma tabela simples com alinhamento dos textos no padrão predeterminado. Adiante vamos ver mais sobre tabela! 
Espero que tenham gostado da breve explicação.

Nenhum comentário:

Postar um comentário

Marcadores

etiqueta (29) tutorial (18) meta (16) html (15) a (10) link (10) formatar texto (3) VETOR (2) body (2) caracteres (2) id (2) p (2) vídeo (2) âncora (2) Photoshop (1) address (1) blink (1) blockquote (1) br (1) center (1) div (1) e-mail (1) font (1) frameset (1) h (1) head (1) pre (1) title (1)

paginador numerico