Ir para o conteúdo

Trabalhando Com Tabelas


Criado por Giovani, Out 26 2010 20:26

Não há respostas para este tópico
  • Por favor, faça o login para responder

#1 Giovani

Giovani
  • Giovani
  • Colaborador
  • 44 Revisões

Revisou 26 outubro 2010 - 20:26

Trabalhando corretamente com tabelas

Objetivo:
Explicarei como trabalhar corretamente com as tabelas, montando-as de uma maneira que a maioria possa entender.

Nível de dificuldade:
Básico

Conceitos:
É preciso saber, inicialmente, que tabelas não devem ser usadas para desenvolver layouts inteiros de páginas, devem ser utilizadas quando tratamos de dados tabulares. Inclusive nosso amigo Paulo já escreveu tutorias explicando com deve ser construído um layout correto.


Por que uma tabela não deve ser utilizada para a construção da estrutura de uma página?

  • Dificulta a visualização do site em sites de busca;
  • Misturam todo o conteúdo da formatação, isso deixa os arquivos enormes, sem contar o fato de que toda vez que o usuário entra no site todos os dados serão recarregados;
  • Refazer, ou reconstruir, o layout do site fica difícil;
  • Páginas construídas com tabelas são pouco acessíveis para deficientes;
  • Os custos de hospedagem podem ser reduzidos.
Tabelas = Dados Tabulares. Mas o que são dados tabulares?
São dados que devem ser mostrados/dispostos em linhas e colunas, onde cada linha ou cada coluna pertence a um mesmo grupo. Um exemplo, uma tabela de notas de alunos.

Ainda existem muitos profissionais que utilizam as tabelas para desenvolver o site todo, colocam um border="0" e pronto. Existem também aqueles que aboliram completamente as tabelas da sua vida, acham que desenvolver um site com as css significa expurgar as tabelas para longe.

Mas não é assim que funciona, as tabelas têm seu lugar cativo no desenvolvimento de projetos web. Devemos lembrar, apenas, que não foram feitas para criar/desenhar o layout do seu site.
Utilize com moderação e quando realmente for necessário.

Iniciando a construção da tabela:
A estrutura da tabela deve conter o seguinte:

<table>

	<caption>Desafio WS 2007</caption>

	<thead>
		<tr>
			<th>Autor</th>
			<th>Pedro</th>
			<th>Vinicius</th>
			<th>Jo&amp;atilde;o Vitor</th>
		</tr>
	</thead>

	<tfoot>
		<tr>
			<th>Média</th>
			<td>7,0</td>
			<td>7,0</td>
			<td>7,0</td>
		</tr>
	</tfoot>

	<tbody>
		<tr>
			<th>Nota 01</th>
			<td>7,0</td>
			<td>7,0</td>
			<td>7,0</td>
		</tr>
		<tr>
			<th>Nota 02</th>
			<td>7,0</td>
			<td>7,0</td>
			<td>7,0</td>
		</tr>
		<tr>
			<th>Nota 03</th>
			<td>7,0</td>
			<td>7,0</td>
			<td>7,0</td>
		</tr>
	</tbody>

</table>

Vamos a uma explicação sobre o código acima:

<table></table> - define a tabela

<caption></caption> - Define o título da tabela
<thead></ thead > - Define a primeira linha (ou cabeçalho) da tabela
<tfoot></tfoot> - Define a última linha (ou rodapé) da tabela
<tbody></tbody> - Define o "corpo" da tabela

<tr></tr> (table row) - São as linhas de uma tabela
<td></td> (table data) - São as colunas de uma tabela

<th></th> (table header) Pode ser usada no lugar da <td></td>, para títulos de linhas ou colunas.


Agora vamos aos estilos aplicados:

table {
	background-color: #fff;
	font: 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
}
caption {
	background-color: #06c;
	border: 1px solid #ccc;
	color: #fff;
	font-size: 14px;
	font-weight: bold;
	text-transform: uppercase;
}

Estilos do <thead>
thead th {
	background-color: #09C;
	color: #fff;
	padding: 2px;
	width: 100px;
}

Estilos do <tfoot> (ou rodapé)
tfoot th {
	background-color: #eee;
	color: #666;
	padding: 2px; 
	font-size: 12px;
}
tfoot td {
	background-color: #fafafa;
	color: #666;
	font-weight: bold;
	font-size: 12px;
	padding: 0 5px;
	text-align: right;
}

Estilos do <tbody> (ou corpo)
tbody td {
	background-color: #fff;
	color: #999;
	text-align: center;
}
tbody th {
	background-color: #fafafa;
	color: #666;
	padding: 2px;
	text-align: center;
}

Resultado final do nosso trabalho


Considerações finais:
O exemplo acima é muito simples, mas não se deixe enganar, ele pode, e deve, ser aplicado a qualquer tabela que venha a ser feita.
No fim das contas é até legal trabalhar com as tabelas, quando elas realmente são necessárias.

Espero que tenham gostado!

Testado nos navegadores:
:seta: Firefox 2
:seta: Opera 9
:seta: Safari (for Mac)
:seta: IE6

Referências:
HTML Tables
CSS Table
CSS Table Gallery

-----
Autor: Giovani




1 usuário(s) está(ão) lendo este código

1 membro(s), 0 visitante(s) e 0 membros anônimo(s)