Home
índice
Página anterior
Construíndo Tabelas
Para se desenvolver um site de acordo com as normas das webstandards não significa necessariamente nunca usar uma tabela. As tabelas sempre foram usadas para estruturar sites. Só que essa forma está errada porque para estruturar um site, existem as tags criadas justamente para esse fim. A tag <table> foi criada para exibir dados tabulares. (Dados em formato de tabela). Ou seja são dados organizados em linhas e colunas. Abaixo uma tabela simples, bastante conhecida:
| cinza |
verde |
DarkOrange |
| Plum |
cinza |
Silver |
- <table> Comando para se inserir uma tabela;
- <tr> Esta tag inicia uma linha;
- <td> Para uma célula ou coluna.
- </table>, </tr> e </td> são respectivamente, comandos de encerramento.
- Exemplo:tabela 3X2, ou seja de 3 colunas por 2 linhas.
Código da Tabela acima
<table>
<table border=0 cellspancing =0>
<tr>
<td width=80 bgcolor=gray>cinza</td>
<td width=50 bgcolor=green>verde</td>
<td width=550 bgcolor=DarkOrange>
;DarkOrange</td>
<td width=10 bgcolor=OliveDrab>
OliveDrab</td>
<td width=50 bgcolor=gray>cinza</td>
</tr>
<tr>
<td width=50 bgcolor=Plum>Plum</td>
<td width=80 bgcolor=gray>cinza</td>
<td width=550 bgcolor=Silver>
Silver</td>>
<td width=10 bgcolor=gray>cinza</td>
<td width=50 bgcolor=PowderBlue>
PowderBlue</td>
</tr>
</table>
No HTML:
<html>
<head>
<title>Construíndo Tabelas</títle>
</head>
<body>
<center><font color= black
size=8>Tabela</font></center>
<br>
<table border=1>/*Inicia a tabela e coloca uma borda (espessura=1)*/
<tr> /*Cria a 1ª linha da tabela*/
<td>Primeira coluna </td>
/* Aqui foi criada uma célula>*/
<td>Segunda coluna </td>
<td>Terceira coluna</td>
</tr> /*Fecha a 1ªlinha da tabela*/
<tr> /*Abre a 2ª linha da tabela*/
<td> Primeira coluna</td>
<td>Segunda coluna</td>
<td>Terceira coluna</d>
<tr>/*Encerra a 2ª linha da tabela*/
</table>/*Encerra a tabela*/
As tags <table> <tr> e <td> são muito conhecidas, mas existem outras Tags que são usadas para controlar os estilos em uma tabela.
<caption>:
Caption (título) em inglês ou cabeçalho. Com essa tag dá para inserir um título ou cabeçalho na tabela.
<th>:
Significado -Table Header- ou cabeçalho. Pode-se usar no lugar da TD. Tag para títulos de linhas ou de colunas.
<thead> <tbody> <tfoot>:
Tags para agrupar e definir as linhas de uma tabela.
<thead> indica a primeira linha da tabela
<tfoot> indica a última linha.
<tbody> indica o corpo. A seguir o código fonte de uma tabela com essas tags:
<table>/*inicia a tabela*/
<caption>Caption (título) em inglês ou cabeçalho.</caption>
<thead>
<tr>
<th></th>
<th></th>
</tr>
</thead>
<tfoot>
<tr>
<th></th>
<th></th>
</tr>
</tfoot>
<tbody>
<tr>
<th></th>
<th></th>
</tr>
<tr>
<th></th>
<th></th>
</tr>
<tr>
<th></th>
<th></th>
</tr>
</tbody>
</table>/*Encerra a tabela*/
Nas células da tabela pode-se inserir frases e até imagens. Parâmetros também podem ser acrescidos às tabelas, tais como : aumentar ou diminuir a largura de uma célula; distanciar as células uma das outras; inserir cor de fundo dentro da célula etc. Lembrete: Pelas normas das webstandards todo o estilo, cores, tamanhos etc. deve ser feito pelo CSS.
Alterando a largura da célula
Para alterar a largura de uma célula, basta acrescentar o parâmetro WIDTH dentro da tag <td>.
| largura 80 pixels |
largura=600 pixels |
Tabela sem linhas de marcação
| Treinamento | Instrutor |
| CSS | Adalgisa |
| JavaScript | Filipe |
| HTML | Dayanne |
Tabela com linhas de marcação
| Treinamento | Instrutor |
| CSS | Adalgisa |
| JavaScript | Filipe |
| HTML | Dayanne |
Espaços entre o conteúdo e a borda da célula
| Treinamento |
Instrutor | ex pan são de acor do com o tex to. Ve ja o e xem plo: |
| CSS | Adalgisa |
| JavaScript | Filipe |
| HTML | Dayanne |
Tabelas Semântica
| Treinamento |
Instrutor |
Lo rem ip sum do lor sit a met, con sec te tur adi pis cing elit. Ut ma le sua da id augue eget au ctor. Ae ne an elei fend pu rus ma gna, ma ttis sa gi ttis ex con se quat non.
Tabelas colspan |
| CSS |
Adalgisa |
| JavaScript | Filipe |
| HTML | Dayanne |
Indica o espaços entre as células
<table border= "1" cellpadding= "15" cellspacing= "15">
| Treinamento | Instrutor |
| CSS | Adalgisa |
| JavaScript | Filipe |
| HTML | Dayanne |
| esticada na horizontal |
tabela com linhas de marcação
| Treinamento | Instrutor |
| CSS | Adalgisa |
| JavaScript | Filipe |
| HTML | Dayanne |
tabela com mais células
| U | Dia | Trei | Inst |
| Br | 2 | Scrum | Aman |
| 12 | Java |
| SP | 10 | Lumis | Filipe |
| MG | 18 | HTML | Dayanne |
Para alinhar o texto:
Este atributo pode ser aplicado a <tr>, <th> e <td> ele controla
o alinhamento do texto dentro de uma célula, com relação às bordas laterais.
Os valores podem ser (left, center, right).
No Html:</table>
<html>
<head>
<title>Alinhamento</title>
</head>
<body>
<table border="1">
<tr>
<td>Primeira célula</td>
<td>Segunda célula</td>
<td>Terceira célula</td>
</tr>
<tr>
<td align=left>esquerda</td>
<td align=center>centro</td>
<td align=right>direita</td>
</tr>
</table>
</body>
</html>
Resultado:
| Primeira célula |
Segunda célula |
Terceira célula |
| esquerda |
centro |
direita |
Tabela com Efeitos de Cores
O Html da tabela a seguir está logo abaixo.
| Ônibus |
Dia |
Hora |
Plat |
| Ônibus Interestaduais |
| Cometa |
02 |
20:40 |
54 |
| Cometa |
02 |
20:40 |
23 |
| Util |
02 |
20:40 |
65 |
| Ônibus Estaduais |
| São José |
02 |
10:40 |
24 |
| Barra |
02 |
11:40 |
74 |
| Serra Dourada |
10 |
20:40 |
54 |
| Dorense |
02 |
13:40 |
33 |
| Timóteo |
02 |
20:40 |
54 |
| Paraíba |
02 |
20:40 |
54 |
| Rio Doce |
02 |
20:40 |
54 |
No Html:
<table id="onibus">
<thead>
<tr>
<th>Ônibus</th>
<th scope= "Col">Dia</th>
<th scope= "Col">Hora</th>
<th scope= "Col">Plataforma</th>
<th scope= "Col">Poltrona<</th>
</tr>
</thead>
<tbody>
<tr class="sub">
<th colspan="5">Interestaduais</th>
</tr>
<tr>
<th scope="row">Itaperim</th>
<td>02/10/13</td>
<td>20:40</td>
<td>54</td>
<td>24</td>
</tr>
<tr class="sub">
<th colspan="5">Estaduais</th>
</tr>
<tr>
<th scope="row">Cometa</th>
<td>02/10/13</td>
<td>20:40</td>
<td>23</td>
<td>29</td>
</tr>
<tr>
<th scope="row">Util</th>
<td>02/10/13</td>
<td>20:40</td>
<td>65</td>
<td>43</td>
</tr>
</table>
</tbody>
O problema com o uso de tabelas:
| Moccasin |
verde |
| DarkCyan |
DarkOrange |
Porque utilizar tabelas para layout é estupidez:
Problemas definidos, soluções oferecidas.
Tabelas existem no HTML por um motivo: Exibir dados tabulados. Mas a utilização de border="0" possibilitou
aos designers criar uma grade para exibir imagens e textos. Esta é ainda, a forma predominante de como
alguns designers projetam seus sites, porém, hoje o uso de tabelas está, de fato, interferindo na construção
de sites melhores, mais acessíveis, flexíveis e funcionais. Descubra a origem destes problemas, e encontre
soluções para criar sites transitivos, ou completamente sem tabelas (tableless).
- misturam o conteúdo da formatação:
esta mistura deixa os arquivos de seu site desnecessariamente grandes, uma vez que os usuários têm que descarregar estes dados a cada página que visitam;
- Banda de transferência (quantidade de bytes requisitados do servidor) não é grátis.
- Elas fazem o redesign de sites de conteúdo extenso ser um trabalho intenso (e caro);
- Também tornam extremamente difícil (logo caro) manter a consistência visual do site;
- Páginas baseadas em tabelas são também muito menos acessíveis para usuários com deficiências e para aqueles que usam celulares e PDAs.
Tabelas
Exemplo de uso de Tabela (Tags de Imagem)
| Tag |
Descrição |
| <img> |
Define uma imagem |
| <map> |
Define um mapa de imagem |
| <area> |
Define uma área dentro de um mapa de imagem |