• Comunicação Visual

domingo, 8 de fevereiro de 2009

Tableless e tabelas

"Tableless é uma forma de desenvolvimento de sites que não utiliza tabelas para disposição de conteúdo na página, pois defende que os códigos HTML deveriam ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados tabulares." Wikipedia

Ou seja, tableless não é ausência total de tabelas. Devemos usar cada tag para o que esta foi criada. Se tenho dados tabulares, devemos usar tabela. E a página será validada pelo padrões W3C, sim.

Detalhe importante: O título da tabela deve ficar na tag capition. Infelizmente, é raro vermos isso. Geralmente está em uma tag p ou span ou mesmo como um subtítulo. E ainda que esteja na primeira linha da tabela, este não é o lugar correto. Sempre imagine que um cego gostaria de ter acesso a seu site através de softwares que lêem o conteúdo das páginas em voz alta. Se o título da tabela não estiver na tag capition, não será lido como título da tabela, e o cego ficará confuso.


<!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>
<title>Exemplo de tabela </title>

<style>
table {
background-color:#F9ECD0;
font:12px Arial, Helvetica, sans-serif;
color:#310000;
border:double 3px;
text-align:center;
}

caption {
font-size:14px;
text-align:left;
}

th {
background-color:#E4CAAF;
font-weight:bold;
border:none;
border-bottom:#660000 solid 1px;
width:120px;
height:25px;
vertical-align:middle;
}

td {
border:none;
border-bottom:#660000 dotted 1px;
height:20px;
}
</style>
</head>

<body>

<table>
<caption>
- Título da tabela
</caption>

<tr>
<th>Título da coluna A </th>
<th>Título da coluna B </th>
<th>Título da coluna C </th>
</tr>
<tr>
<td>A1 </td>
<td>B1 </td>
<td>C1 </td>
</tr>
<tr>
<td>A2 </td>
<td>B2 </td>
<td>C2 </td>
</tr>
<tr>
<td>A3 </td>
<td>B3 </td>
<td>C3 </td>
</tr>
</table>

</body>
</html>



Para saber mais sobre tabelas visite o Maujor.

Um comentário:

  1. Olá! Vi seu link no Imasters e percebi que falta algo em sua seu código, como tbody.

    Legal o blog! Continue a escrever posts assim que cada vez mais os desenvolvedores irão se aperfeiçoar.

    ResponderExcluir