As tabelas desempenham um papel significativo quando se trata de apresentar dados em um formato organizado. Neste tutorial, você aprenderá como criar tabelas básicas em HTML e usar as tags essenciais para o layout e a estrutura.
Instruções passo a passo
Vamos começar criando sua primeira tabela! Primeiro, você precisa saber que a tag base para uma tabela é. Esta tag envolve toda a tabela.
Agora vamos adicionar uma linha. Cada linha é definida pela tag, que significa "linha da tabela". Nesta linha, ainda não há dados, por isso ela permanece vazia por enquanto. Você pode imaginar que cada linha pode oferecer espaço para várias colunas.
Agora é hora de inserir alguns dados na tabela. Para isso, usamos a tag e adicionamos os valores correspondentes. Vamos supor que o primeiro nome seja “Jan”, o e-mail “support@programmierenlern.info” e a data de nascimento seja 23.06.1982. Sua linha deve então parecer assim:
Certifique-se de que a tabela agora está com uma aparência melhor. Você pode adicionar quantas linhas quiser, simplesmente usando mais tags e. Vamos adicionar mais um funcionário. Vamos chamá-lo de “Joe Average” e seu e-mail poderia ser “joe@average.com”.
Quando recarregarmos a tabela agora, perceberemos que ela está crescendo e todos os dados inseridos estão visíveis. A estrutura é importante, pois lhe proporciona uma visão clara das informações.
E se você quiser adicionar um rodapé no final da tabela, por exemplo, para um copyright? Aqui entra em cena o colspan. Com o colspan, você pode especificar quantas colunas uma célula deve ocupar. Para colocar um copyright sobre as três colunas, você escreveria: Copyright 2015 coding-geeks.de.
Após adicionar esse rodapé, você deve verificar a apresentação. A ideia é que o rodapé seja posicionado abaixo das colunas e apresente os dados de forma organizada. Nesse caso, o rodapé não tem sua própria coluna e deve, portanto, se sobrepor às outras três colunas.
Agora, se você reduzir o colspan para um valor de dois, pode também adicionar uma segunda nota. Suponhamos que você queira exibir “Coding Geeks” em uma nova coluna. Para isso, use a tag novamente, aplicando o colspan corretamente.
Se você seguiu todos esses passos, aprendeu como criar tabelas básicas em HTML. No entanto, o design visual deve sempre ser feito com CSS, a fim de melhorar o layout e a usabilidade. Isso inclui projetar separadamente o conteúdo e o layout, de modo que você tenha mais flexibilidade ao projetar suas páginas da web mais tarde.
Resumo - Criando fundamentos de tabelas HTML
Você aprendeu a estrutura e o uso de tabelas HTML, desde a construção até a colocação de dados e o rodapé. Agora você pode apresentar dados tabulares simples em sua página da web.
Perguntas frequentes
Quais são as tags básicas para tabelas HTML?As tags básicas são,, para cabeçalhos e para células de dados.
Posso criar um número ilimitado de linhas e colunas em uma tabela?Sim, teoricamente você pode adicionar muitas linhas e colunas, mas é importante manter a legibilidade em mente.
Como devo estilizar as tabelas?Use CSS para o design, em vez de atributos HTML diretos como border.
O que significa colspan?O atributo colspan permite que uma célula se estenda por várias colunas.
Por que o CSS é mais adequado para o layout do que atributos HTML?O CSS separa o conteúdo de seu estilo, oferecendo assim mais flexibilidade e opções para o design.
