Usando a tag div para criar tabelas

Criando tabelas pode ser propenso a erros e difícil usar as tags HTML mais antigos. Além disso, eles provam inflexíveis, às vezes. É possível criar tabelas usando uma outra técnica. Tudo que você precisa é uma série de cascata tags para executar a tarefa.

Muitos desenvolvedores têm usado tabelas para todos os tipos de tarefas no passado. É claro, há o uso de tabelas para exibir dados. No entanto, os arranjos tabulares também são úteis para a criação de formas para garantir que os vários elementos alinhar de uma maneira previsível. Este segundo uso de tabelas é problemática porque confunde alguns softwares como leitores de tela. O problema torna-se uma das definir uma página bem organizada, sem criar problemas para as pessoas vendo isso.

A utilização de etiquetas para criar uma tabela torna possível para os telespectadores para ver uma tabela ou uma organização lógica dos controles com a mesma facilidade. Esta técnica também tem a vantagem de não confundir os leitores de tela e outros softwares.

Definindo o HTML para uma mesa parece um pouco como a criação de uma tabela usando as tags mais velhos, exceto que você não precisa se preocupar com arranjos ímpares de etiquetas arcanas para fazê-lo. Aqui está o HTML para uma tabela que contém um título, títulos, e duas linhas de conteúdo.

 
Esta é uma Tabela
 
Título 1
Título 2
Título 3
 
Linha 1, coluna 1
Fila 1 Coluna 2
Fila Coluna 1 3
 
Row 2 Coluna 1
Row 2 Coluna 2
Row 2 Coluna 3

Observe que cada nível é definido usando um nome facilmente reconhecido, como mesa, Título, Título, Row, e celular. Usando este método de nomeação torna muito mais fácil de descobrir o que cada nível da tabela é suposto fazer. Você pode encontrar muitas alternativas diferentes para esta abordagem on-line, mas esta abordagem básica irá atendê-lo bem.

O CSS para esta tabela usa algumas propriedades especiais e um pouco de formatação inteligente. Aqui está o CSS usado para fazer este exemplo funcional.

Observe o uso da propriedade display. Esta é a propriedade fundamental para a sua mesa, porque diz ao navegador como exibir um elemento particular. Caso contrário, não há nada de estranho de fora do normal, sobre estes estilos. Você define os atributos de texto que ajuda os telespectadores diferenciar entre vários elementos da tabela. As células são separadas uma da outra usando uma borda simples. A figura a seguir mostra como a tabela aparece quando você vê-lo em um navegador.