Apresentando dados com listas e tabelas \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 15 Horas 48 Min 48 Seg Tempo restante da oferta: 15 48 48 [Assinar →](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Explorar [ Quanto custa? ](#assinatura) [ FAQ ](https://www.treinaweb.com.br#faq) [Matricule-se](#assinatura) [ Entrar ](https://www.treinaweb.com.br/login) [ Início ](https://www.treinaweb.com.br) [ Artigos ](https://www.treinaweb.com.br/blog) Apresentando dados com listas e tabelas [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) [ HTML ](https://www.treinaweb.com.br/blog/categoria/html) # Apresentando dados com listas e tabelas Neste artigo, veremos como apresentarmos dados com listas e tabelas HTML e qual a sua importância no mundo dos desenvolvedores front-end. [ Rafael Oliveira ](https://www.treinaweb.com.br/blog/autor/rafael-oliveira) 3 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/05/listas-tabelas-HTML.jpg) Listas e tabelas são muito presentes no mundo dos Desenvolvedores Front-end, devido a sua facilidade de manipulação, objetividade e opções de estilizações. Podemos trabalhar com elas de diversas formas, neste artigo, iremos aprender como apresentar dados com listas e tabelas HTML. [ ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/06/BANNER-AULA-GRATUITA-1700x850-1.jpg) ](https://www.treinaweb.com.br/lp/aula-gratis/) ## Listas HTML Primeiramente, as listas HTML são ideais para apresentar informações em formato de itens numerados ou não numerados. Existem dois tipos de listas que podemos utilizar para o desenvolvimento do nosso projeto, sendo elas, as listas ordenadas, e as listas não ordenadas. ### Listas Ordenadas Em princípio, as listas ordenadas são representadas pela tag ``, utilizamos ela quando queremos apresentar dados sequenciais, como por exemplo, as maiores cidade do Brasil, por população. Para apresentar esses dados, iremos utilizar duas tags, a primeira como já mencionada, ``, com ela iremos indicar o uso de lista ordenada, já para a criação dos dados, utilizaremos a tag ``, que irá representar cada item da nossa lista. Vejamos o breve exemplo a seguir. [ ![HTML5 + CSS3 - Formulários](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/html5-css3.svg) Curso HTML5 + CSS3 - Formulários Conhecer o curso ](https://www.treinaweb.com.br/curso/html5-css3-formularios) ```html Document São Paulo - 12,2 milhões de habitantes. Rio de Janeiro - 6,7 milhões de habitantes. Brasília - 3 milhões de habitantes. Salvador - 2,8 milhões de habitantes. ``` Como resultado, no navegador será renderizado da seguinte forma: ![Imagem do navegador apresentando uma lista ordenada onde contém dados das maiores cidades do Brasil, em população](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/05/lista-ordenada.png) ### Opções de estilizações de listas ordenadas Além disso, existe a possibilidade de estilizarmos o modo que será representado a nossa lista ordenada, através do CSS, utilizando a propriedade `list-style`. Esta propriedade nos da algumas opções de estilização, sendo elas: - list-style: decimal - Sendo o padrão que já conhecemos, apresentando dados com os números 1, 2, 3, 4 e assim por diante. - list-style: decimal-leading-zero - Ao declararmos essa propriedade, o layout dos números da nossa lista irá acrescentar um zero antes do número representado pelo ítem, dessa forma: ![imagem de lista ordenada apresentando dados das maiores cidades do Brasil, em população](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/05/lista-ordenada-1.png) - list-style: lower-alpha - Ao declararmos essa propriedade, o layout dos números da nossa lista irá ficar com as letras do alfabeto, seguindo a sequência dos itens presentes na nossa lista: ![Imagem mostrando como fica a lista ordenada utilizando a propriedade CSS lower-alpha](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/05/lista-ordenada-2.png) - list-style: lower-greek - Ao declararmos essa propriedade, o layout dos números da nossa lista irá ficar com as letras do alfabeto Grego, seguindo a sequência dos itens presentes na nossa lista: ![Imagem mostrando como fica a lista ordenada utilizando a propriedade CSS lower-greek](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/05/lista-ordenada-3.png) - list-style: lower-roman - Ao declararmos essa propriedade, o layout dos números da nossa lista irá ficar com as letras do alfabeto Romano, seguindo a sequência dos itens presentes na nossa lista: ![Imagem mostrando como fica a lista ordenada utilizando a propriedade CSS lower-roman](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/05/lista-ordenada-4.png) [ ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/10/E-BOOK-GRATUITO-HTML.jpg) ](https://www.treinaweb.com.br/ebook/guia-HTML/) ### Listas Não Ordenadas Em segundo lugar, temos as listas não ordenadas, sendo representada pela tag ``, ela é muito útil quando queremos listar ou apresentar dados não sequenciais, como por exemplo, compras que serão feitas na feira. Vejamos o breve exemplo a seguir. ```html Document Banana Maçã Abacaxi Melancia ``` Como resultado, no navegador será renderizado da seguinte forma: ![Imagem representando uma lista não ordenada HTML](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/05/lista-nao-ordenada.png) ### Opções de estilizações de listas não ordenadas As opções que nós temos para estilizarmos nossa lista não ordenada, são as seguintes: - list-style: disc - Sendo o padrão que já conhecemos, apresentando dados com os círculos pretos. - list-style: circle - Ao declararmos essa propriedade, o layout da nossa lista não ordenada ficará dessa forma: ![Imagem mostrando como fica a lista não ordenada utilizando a propriedade CSS circle](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/05/lista-nao-ordenada-1.png) - list-style: square - Ao declararmos essa propriedade, o layout da nossa lista não ordenada ficará dessa forma: ![Imagem mostrando como fica a lista não ordenada utilizando a propriedade CSS square](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/05/lista-nao-ordenada-2.png) Por fim, nós temos a declaração de `list-style: none;`, que irá servir tanto para as listas não ordenadas, quanto para as listas ordenadas, retirando números e símbolos, deixando apenas o ítem da lista. ## Tabelas HTML As tabelas HTML são extremamente úteis para organizar dados em formato de linhas e colunas. Elas são frequentemente utilizadas para exibir informações tabulares, como calendários, horários, preços e comparações. [ ![HTML5 + CSS3 - Fundamentos](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/html5-css3.svg) Curso HTML5 + CSS3 - Fundamentos Conhecer o curso ](https://www.treinaweb.com.br/curso/html5-css3-fundamentos) ### Tags para construir uma tabela HTML Para realizarmos a construção de uma tabela HTML, iremos utilizar uma combinação de algumas tags: - table - A tag `` representa a estrura por completo da tabela HTML - thead - A tag `` irá representar o cabeçalho da nossa tabela, tudo que fizer parte do cabeçalho, ficará dentro de `` - tr - A tag `` é utilizada para definirmos uma linha dentro da tabela, cada `` irá representar uma linha. Porém, para conseguirmos criar essas linhas, devemos utilizar em conjunto a tag `` - th - A tag `` representa o título da tabela em cada coluna do cabeçalho - tbody - A tag `` define o corpo da tabela, todas as informações/dados ficarão dentro de `` - td - Para definirmos uma coluna no corpo da nossa tabela e adicionarmos informações/dados, utilizamos a tag ` ` - tfoot - A tag `` é pouco utilizada, porém, irá representar o rodapé da tabela. Só para exemplificar, vamos observar este código com a construção de uma tabela por completo, utilizando suas devidas tags. ```html Curso Instrutor HTML5 + CSS3 Amauri PHP Elton Tailwind CSS Rafael 2023 - Todos os direitos reservados ``` No navegador será renderizado dessa forma: ![imagem mostrando uma tabela HTML](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/05/tabela.png) ## Conclusão Por fim, é importante destacar a importância de testar e validar as listas e tabelas no HTML para garantir que as informações sejam apresentadas de forma clara e acessível a todos os usuários. Caso você queira se aprofundar mais neste assunto, temos aqui na nossa plataforma um curso dedicado a listas e tabelas, o [HTML5 e CSS3 - Apresentação de Dados](https://www.treinaweb.com.br/curso/html5-e-css3-apresentacao-de-dados "Apresentação de Dados"). Caso prefira, temos um vídeo aberto no Youtube que abordam vários conceitos citados neste artigo. - [ #Desenvolvimento ](https://www.treinaweb.com.br/blog/tag/desenvolvimento) - [ #HTML5 ](https://www.treinaweb.com.br/blog/tag/html5) Autor ![Rafael Oliveira](//secure.gravatar.com/avatar/3dea81057f4d44ce6041d633799ba1a2?d=mm) ## Rafael Oliveira Estudante de programação, atualmente me especializando no Front End. Faço curso de Desenvolvimento de Sistemas na Escola Tecnica Estadual Doutora Ruth Cardoso e o meu principal objetivo é me tornar um Full Stack. Nas horas vagas costumo cozinhar, pois sou apaixonado pela área da culinária. [Todos os artigos](https://www.treinaweb.com.br/blog/autor/rafael-oliveira) ## Continue estudando Transforme leitura em prática com os cursos e formações da TreinaWeb. [Ver cursos](https://www.treinaweb.com.br/cursos) Continue lendo ## Artigos relacionados - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/algoritmos-400x280.jpg) [ Algoritmos ](https://www.treinaweb.com.br/blog/categoria/algoritmos) 10 anos atrás ## [ Conheça os principais algoritmos de ordenação ](https://www.treinaweb.com.br/blog/conheca-os-principais-algoritmos-de-ordenacao) A ordenação de registros consiste em organizar os dados em ordem crescente ou decrescente. Veja os principais métodos de ordenação e a teoria por trás deles. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2017/11/06103205/orm-lite-400x280.jpg) [ C# ](https://www.treinaweb.com.br/blog/categoria/csharp) 9 anos atrás ## [ Utilizando o Micro ORM ServiceStack.OrmLite em uma aplicação ASP.NET Core ](https://www.treinaweb.com.br/blog/utilizando-o-micro-orm-servicestack-ormlite-em-uma-aplicacao-asp-net-core) Aprenda na prática como fazer uso do micro framework ORM ServiceStack.OrmLite em uma aplicação ASP.NET Core. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/08/30114919/MYSQL-PRIMEIROS-PASSOS-400x280.png) [ Bancos de Dados ](https://www.treinaweb.com.br/blog/categoria/bancos-de-dados) 7 anos atrás ## [ Primeiros passos com MySQL ](https://www.treinaweb.com.br/blog/primeiros-passos-com-mysql) Veja neste artigo como dar os primeiros passos utilizando o MySQL. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/08/javascript-comandos-do-console-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 6 anos atrás ## [ JavaScript - Comandos do Console ](https://www.treinaweb.com.br/blog/javascript-comandos-do-console) Conheça os comandos do console do navegador e domine essa ferramenta para melhorar seus testes ou caça aos bugs do seu JavaScript! Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/06/XSLT-400x280.png) [ Tecnologia ](https://www.treinaweb.com.br/blog/categoria/tecnologia) 6 anos atrás ## [ O que é XSLT? ](https://www.treinaweb.com.br/blog/o-que-e-xslt) Veja neste artigo o que é XSLT. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/06/MVC-400x280.png) [ Desenvolvimento ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento) 7 anos atrás ## [ O que é MVC? ](https://www.treinaweb.com.br/blog/o-que-e-mvc) Em meio ao desenvolvimento de software, você pode ter visto em algum momento a sigla “MVC”. Confira neste artigo o que vem a ser o MVC – ou Model-View-Controller. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/03/ARRAYS-OBJETOS-JAVASCRIPT-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 6 anos atrás ## [ Trabalhando com arrays e objetos no JavaScript ](https://www.treinaweb.com.br/blog/trabalhando-com-arrays-e-objetos-no-javascript) Confira neste artigo como trabalhar com Arrays e Objetos no JavaScript. Vamos aprender a declarar e manipular Arrays e Objetos com exemplos. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/05/GUIA-HTML-400x280.jpg) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 4 anos atrás ## [ Guia da linguagem HTML ](https://www.treinaweb.com.br/blog/guia-da-linguagem-html) Esse guia é perfeito pra você que está começando ou quer entender melhor como podemos trabalhar com a linguagem HTML . Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/01/introducao-ao-maven-aprenda-como-criar-e-gerenciar-projetos-java-400x280.png) [ Java ](https://www.treinaweb.com.br/blog/categoria/java) 6 anos atrás ## [ Introdução ao Maven, aprenda como criar e gerenciar projetos Java ](https://www.treinaweb.com.br/blog/introducao-ao-maven-aprenda-como-criar-e-gerenciar-projetos-java) Neste artigo veremos como instalar o Maven e como podemos utilizá-lo para nos auxiliar na criação e no gerenciamento de dependência de um projeto Java. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/06/GUIA-CSS-400x280.jpg) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 3 anos atrás ## [ Guia da linguagem CSS ](https://www.treinaweb.com.br/blog/guia-da-linguagem-css) Nesse guia completo veremos como funciona e quais as formas de criar estilizações com CSS, necessário para qualquer desenvolvedor front-end Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/04/23151422/ARQUITETURA-FLUX-400x280.png) [ Arquitetura de Software ](https://www.treinaweb.com.br/blog/categoria/arquitetura-de-software) 8 anos atrás ## [ Flux - descubra o motivo do sucesso dessa arquitetura em grandes empresas ](https://www.treinaweb.com.br/blog/flux-descubra-o-motivo-do-sucesso-dessa-arquitetura-em-grandes-empresas) Conheça a Arquitetura Flux e entenda o motivo dela estar se tornando cada vez mais requisitada no mercado de trabalho ao se desenvolver sistemas. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/01/atributos-html-400x280.jpg) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 4 anos atrás ## [ Entendendo os atributos HTML ](https://www.treinaweb.com.br/blog/entendendo-os-atributos-html) No artigo de hoje, veremos algo que está muito presente no mundo da programação, atributos. Por que são tão importantes para o Front-End? Ler artigo ## Um ano de acesso total para você viver de programação. Todos os cursos e formações da TreinaWeb numa única assinatura, com professores que atuam no mercado, suporte direto e certificados. Do primeiro `console.log` ao mercado de trabalho. - **1 ano** de acesso a **todos os cursos** - Cursos novos **toda semana** - Suporte **direto com professores** - Plano de carreira **personalizado** - **Certificados digitais** inclusos - **Aplicativos** para Android e iOS, com **acesso offline** **Garantia incondicional de satisfação** Teste por 7 dias e, se não fizer sentido para você, devolvemos seu dinheiro. ### Acesso completo a todos os cursos e dezenas de Formações. 12 meses Economize R$ 840,00 54% OFF de 12x R$ 129,00 por apenas 12x R$ 59,00 sem juros no cartão de crédito ou R$ 599,00 à vista Oferta termina em **15h 48min 48s** - Acesso imediato e ilimitado durante 1 ano. - Plano de carreira personalizado. - Suporte direto com professores. - E muito mais! [Matricule-se agora](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Escola online de programação, tecnologia e IA. - [ ](https://www.facebook.com/TreinaWeb/) - [ ](https://www.instagram.com/treinaweb/) - [ ](https://www.youtube.com/user/TreinaWeb) - [ ](https://twitter.com/treinaweb) - [ ](https://www.linkedin.com/company/treinaweb) - [ ](https://github.com/treinaweb) ## Inscreva-se em nossa newsletter Receba lançamentos, promoções e novidades. Seu nome Seu WhatsApp Seu melhor e-mail Inscrever-se ## Cursos - [ Base para Devs ](https://www.treinaweb.com.br/categoria/base-para-devs) - [ Front-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-front-end) - [ Back-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-back-end) - [ Mobile ](https://www.treinaweb.com.br/categoria/desenvolvimento-mobile) - [ Bancos de Dados ](https://www.treinaweb.com.br/categoria/bancos-de-dados) - [ Cloud ](https://www.treinaweb.com.br/categoria/cloud-computing) - [ IA ](https://www.treinaweb.com.br/categoria/ia) - [ E mais ](https://www.treinaweb.com.br/categoria/e-mais) - [ Ver todos os cursos ](https://www.treinaweb.com.br/cursos) ## Conteúdo - [ Formações ](https://www.treinaweb.com.br/formacoes) - [ Projetos práticos ](https://www.treinaweb.com.br/projetos-praticos) - [ Direto ao ponto ](https://www.treinaweb.com.br/direto-ao-ponto) - [ Planos ](https://www.treinaweb.com.br#assinatura) - [ Depoimentos ](https://www.treinaweb.com.br#depoimentos) - [ Comunidade ](https://www.treinaweb.com.br#comunidade) - [ Corpo docente ](https://www.treinaweb.com.br#docente) ## A empresa - [ Sobre a TreinaWeb ](https://www.treinaweb.com.br#sobre) - [ Perguntas frequentes ](https://www.treinaweb.com.br#faq) - [ Vantagens de estudar na TreinaWeb ](https://www.treinaweb.com.br/vantagens-de-estudar-na-treinaweb) - [ Cursos para empresas ](https://www.treinaweb.com.br/empresas) - [ Sugira um novo curso ](https://www.treinaweb.com.br/sugerir-curso) - [ Trabalhe conosco ](https://www.treinaweb.com.br/trabalhe-conosco) - [ Artigos ](https://www.treinaweb.com.br/blog) - [ Desenvolvedores e agentes ](https://www.treinaweb.com.br/developers) - [ Contato ](https://www.treinaweb.com.br/contato) - [ Política de privacidade ](https://www.treinaweb.com.br/politica-de-privacidade) - [ Termos de uso ](https://www.treinaweb.com.br/termos-de-uso) ## Baixe nosso aplicativo [ Disponível na **App Store** ](https://apps.apple.com/us/app/treinaweb/id1322729447) [ Disponível no **Google Play** ](https://play.google.com/store/apps/details?id=br.com.treinaweb.mobile) Av. Paulista, 1765, Conj 71 e 72 · Bela Vista · São Paulo · SP · 01311-200 © 2004 – 2026 TreinaWeb Tecnologia LTDA · CNPJ 06.156.637/0001-58