Comece com HTML: tabelas

HTML, abreviação de HyperText Markup Language. É um padrão que serve de referência para o desenvolvimento de páginas web em suas diferentes versões, define uma estrutura básica e um código (denominado código HTML) para definir o conteúdo de uma página web, como textos, imagens, vídeos, entre outros. Para começar a entender como se define a estrutura dessa linguagem, neste tutorial começaremos por conhecer os rótulos com os quais as tabelas são tratadas, os quais são muito úteis na construção das estruturas de newsletters e principalmente de mailings.
O objetivo deste tutorial é dar uma explicação que ajude os designers gráficos a entender da forma mais simples possível, a estrutura e lógica dos documentos HTML para obter os conhecimentos básicos que lhes permitirão gerar arquivos neste idioma.

Requisitos

- Tenha um editor de código como Dreamweaver CS6, Notepad ++, Sublime Text entre outros disponíveis na Internet.
- Ter um navegador da web instalado, como Chrome, Firefox, Opera, Safari, Edge ou Internet Explorer.
Etapa 1: conhecer os rótulos para criar tabelas
com este rótulo definimos o início da tabela na estrutura HTML.
permite a criação de uma linha para a tabela
representam o cabeçalho das colunas, essas colunas são compostas por células.
<>> é a representação das células que estarão localizadas nas linhas da tabela.
Esses são todos os rótulos que precisaremos para criar as tabelas, na próxima etapa aprenderemos como eles são declarados dentro do código e sua ordem.
Etapa 2: Declaração lógica das etiquetas.
É importante saber que em HTML a grande maioria das tags deve ser aberta, que é justamente quando as declaramos e também devem ser fechadas, o exemplo a seguir ilustra este conceito:

Como você pode ver, cada rótulo deve ter sua abertura e fechamento. Eles diferem principalmente pela barra "/" com a qual o rótulo fecha. Cada vez que uma tag é criada, é obrigatório declarar seu fechamento da mesma forma.
Etapa 3: Declaração hierárquica de rótulos.
A etiqueta É o primeiro que se declara para indicar a criação de uma tabela, conseqüentemente para começar a criar as células que conterão as informações a serem exibidas.
As tabelas são compostas por colunas e linhas.

Cuidando da ordem hierárquica que cada rótulo deve ter, criaremos a tabela e apresentaremos as linhas que precisaremos para a tabela na imagem abaixo:

O código da tabela deve ser assim:

Embora as linhas da tabela já estejam definidas, é necessário criar as células que compõem as colunas da tabela. A imagem abaixo ilustra esse conceito:

O código da tabela deve ser assim:

Etapa 4: Adicionar conteúdo às células
Cada tag [color = # 7030a0] [/ color] é equivalente a uma célula em nossa tabela, então é aqui que as informações podem ser adicionadas. Vamos mudar no primeiro rótulo [color = # 44546a] [/ color] declarou toda a linha [color = # 7030a0] [/ color] por tags de cabeçalho [color = # 002060][/Cor]. Na [color = # 7030a0][/ color] do resto das linhas, adicionamos conteúdo de amostra. O código HTML Deve ser assim:

 
 
 
Item
 
Nome
 
Sobrenome
 

 
 
1
 
Pedro
 
Rosas
 

 
 
2
 
John
 
Origens
 

Etapa 5: Salve o documento em HTML e ver o arquivo
No programa de edição de código, vamos para o menu Arquivo / Salvar enquanto salvamos o documento no formato .html

Posteriormente abrimos o documento no navegador de nossa preferência:

A tabela que criamos deve ser semelhante à imagem abaixo.

Até agora, aprendemos o nome e a função dos rótulos HTML para construir tabelas, sua ordem hierárquica, seu arranjo lógico e adicionar conteúdo a eles. Agora estamos prontos para adicionar atributos gráficos às tabelas.Gostou e ajudou este tutorial?Você pode recompensar o autor pressionando este botão para dar a ele um ponto positivo