EDUCAÇÃO / TECNOLOGIA / UTILIDADE PÚBLICA

Tabelas em HTML: dados tabulares

Tabelas para dados tabulares. Tags table, td, tr e th. HTML

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).

[QUEBRA]

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.

 

Veja também

Comentários

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. Julio Zarnitz // Chapecó/SC
otimo formulario, agora como consigo que ele vá parar no meu email? onde é que tem a parte de enviar?? juana // jaboatão
© 2008-2017 | LUIS.BLOG.BR | Política de Privacidade | Em Jesus Cristo eu confio