Home » Tecnologia
Tabelas em HTML: dados tabulares
Tabelas para dados tabulares. Tags table, td, tr e th. HTML
Gostou? Recomende:
Tabelas são usadas para a apresentação de dados tabulares na página. As tabelas já foram usadas também para definir o layout de uma página, mas atualmente esta prática é desaconselhada, sendo substituída pelo tableless (conceito de layout sem tabelas).
Para estruturação e formatação de layout, veja também Listas ordenadas, não ordenadas e de definição e ainda o post: Layout sem tabela e layout centralizado.
Exemplo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Tabelas para dados tabulares</title>
<link href="estilo_tabelas.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>Tabelas para dados tabulares</h1>
<table width="400" border="0" cellpadding="1" cellspacing="1">
<tr>
<th>Cidade</th>
<th>Estado</th>
<th>link</th>
</tr>
<tr>
<td>Limeira</td>
<td>SP</td>
<td>limeira.sp.gov.br</td>
</tr>
<tr>
<td>Santos</td>
<td>SP</td>
<td>santos.sp.gov.br</td>
</tr>
<tr>
<td>Campinas</td>
<td>SP</td>
<td>campinas.sp.gov.br</td>
</tr>
</table>
</body>
</html>
As tags usadas para construir a tabela acima foram:
table: Tag principal da tabela. Esta tag usa alguns atributos.
- width="400" - aqui definimos a largura da tabela
- border="0" - Tiramos a tradicional borda da tabela. Se quiser ver a borda, basta colocar o valor 1
- cellpadding="1" - Esta propriedade define o espaçamento interno da célula. (similar ao padding do CSS).
- cellspacing="1" - Esta propriedade define o espaçamento externo da célula, neste caso este espaçamento é o mesmo que o intervalo entre células. (similar ao margin do CSS).
tr: Esta propriedade define uma linha da tabela.
th: Esta tag define a linha cabeçalho da tabela, toda célula estruturada com th terá o valor em negrito e centralizado.
Apesar de ter sido usado na primeira linha, o th poderá ser usado na primeira coluna também.
td: Esta propriedade defina as colunas da tabela
Formatação da tabela
A tabela vem com a formatação padrão do HTML, para mudar a formatação precisamos recorrer ao CSS, para isto crie um arquivo com o nome estilo_tabelas.css e salve na mesma pasta que o exemplo acima. Abaixo o código do arquivo estilo_tabelas.css
body {
font: 12px Verdana, Arial, Helvetica, sans-serif;
color: #333333;
}
table {
background: #CCCCCC;
}
th {
background: #E9E9E9;
padding: 5px;
}
td {
padding: 5px;
background-color: #FFFFFF;
}
Analisando o código acima:
Todas as propriedades usadas acima já são conhecidas, porém, é importante observarmos o contexto que são usadas.
Observe que atribuímos um valor cinza escuro para a propriedade background-color do seletor table, com isto, o fundo da tabela ficará com um cinza escuro.
Já no seletor td que corresponde às células, usamos a cor branco. Mas não irá a cor das células sobrepor a cor da tabela?
Isto vai acontecer, mas se analisarmos o código HTML da tabela veremos o uso do cellspacing="1", isto significa que entre as células haverá 1px de espaço e este espaço irá gerar uma espécie de borda nas células.
A tag th também recebeu uma cor especial, exatamente para destacar o cabeçalho da tabela.
Uma outra estratégia interessante foi o uso do padding nos seletores th e td, com isto há um espaçamento interno nas células, deixando o texto desgrudado das bordas.
Participe do Simulado de HTML
Veja também:
Compartilhe com seus amigos:
// Comentários
Julio Zarnitz // Chapecó/SC // 21/10/2009 16:54:00
Muito bom seu artigo Luis, mas ao comentar sobre a formatação da tabela via CSS você esqueceu de mencionar o estilo CSS no código HTML da tabela.
juana // jaboatão // 15/03/2010 18:13:00
otimo formulario, agora como consigo que ele vá parar no meu email? onde é que tem a parte de enviar??