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 utilizado 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ático 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 um arranjo lógico de 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 arcanos para fazê-lo. Aqui está o HTML para uma tabela que contém um título, títulos, e duas fileiras de conteúdo.

Esta é uma Tabela
Video: Site em HTML - aula 11 - Como criar TABELAS em site HTML
Título 1
Título 2
Título 3
Linha 1 Coluna 1


Linha 1 Coluna 2
Linha 1 Coluna 3
Row 2 Coluna 1
Row 2 Coluna 2
Row 2 Coluna 3

Note-se que cada nível é definida utilizando um nome facilmente reconhecido, tais como Tabela, 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 vai 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 crucial 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 utilizando uma borda simples. A figura a seguir mostra como a tabela vai aparecer quando você vê-lo em um navegador.

Video: Curso de HTML Básico #3 - imagens e tabela