HTML tabelas: criando tabela html e estilizando com CSS

Indicação
HTML tabelas. Imagem ilustrutiva de uma mulher criando tabela html e estilizando com CSS em seu computador.

Este é o sexto post da nossa série de tutoriais que vai te ajudar a criar sua primeira página web de forma profissional com HTML e CSS. Neste artigo iremos abordar o que são HTML tabelas, além disso, mostraremos como criar e estilizar as suas próprias tabelas para sua página.

No entanto, se você ainda não tem nenhuma noção sobre as tecnologias HTML e CSS, recomendamos que siga o guia “O que é HTML” e depois volte aqui, pois assim ira absorver melhor todo esse conteúdo.

Conteúdo

O que são tabelas HTML

As tabelas HTML são elementos de marcação utilizados para exibir dados em formato de tabela, com linhas e colunas. Isso permite uma melhor organização e visualização de informações, como, por exemplo, em calendários, lista de pessoas, lista de preços, resultados financeiros entre outros.

Então já sabemos sobre a utilidade e para que serve, assim podemos prosseguir e mostrar criando tabela HTML de forma correta com a tag <table>.

HTML tabelas: Criando tabela HTML

Como disse antes, para criar uma tabela HTML é usado a tag <table> com o atributo border=”1″, para as definir as bordas e, além disso, mais outras séries de tags para a estruturação. 

Então de forma bem básica o elemento <table> ira definir a tabela, enquanto <tr> definira uma linha. Dentro das linhas, você pode usar <th> para definir cabeçalhos de coluna e <td> para definir os dados da coluna.

Bem simples, não é mesmo? Mas agora vamos aprofundar mais em seu conteúdo estrutural, e ainda iremos falar como você pode estilizar a sua tabela HTML.

Estrutura básica de uma tabela HTML

Assim como a estrutura do HTML, também deve ser definido uma tag especifica para o cabeçalho <thead>, corpo <tbody> e rodapé <tfoot> de uma HTML tabela. Tudo isso ainda pode estar meio confuso, por isso siga agora um bom exemplo de uma estrutura básica:
				
					<table>
    <thead>
        <tr>
            <th>Esse é o cabeçalho</th>
            <th>Cabeçalho</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Esses são os dados</td>
            <td>Dados</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Aqui vai o rodapé</td>
            <td>Rodapé</td>
        </tr>
    </tfoot>
</table>
				
			

Todas as tags para tabelas HTML

Aqui está uma lista das principais tags HTML usadas para criar tabelas:

  • <table>: Define a tabela.
  • <tr>: Define uma linha na tabela.
  • <th>: Define o cabeçalho de uma coluna na tabela.
  • <td>: Define o conteúdo de uma célula na tabela.
  • <thead>: Grupo de cabeçalhos de coluna.
  • <tbody>: Grupo de corpo da tabela.
  • <tfoot>: Grupo de rodapé da tabela.
  • <colgroup>: Grupo de colunas na tabela para aplicar estilo a todas as colunas de uma só vez.
  • <col>: Define uma coluna na tabela para aplicar estilo a uma coluna específica.
  • <caption>: Define o título ou legenda da tabela.

Atributos importantes para tabelas

Aqui está uma lista de alguns dos principais atributos HTML que eram usados nas tags de tabela (*É importante notar que parte destes atributos para estilizar está atualmente depreciada e por isso não devem ser utilizados. Em vez disso, deve-se usar propriedades equivalentes no css):

  • *border: Define a largura do contorno da tabela.
  • colspan: Define o número de colunas que uma célula deve ocupar.
  • rowspan: Define o número de linhas que uma célula deve ocupar.
  • width: Define a largura da tabela.
  • height: Define a altura da tabela.
  • *align: Alinha a tabela à esquerda, ao centro ou à direita.
  • valign: Alinha o conteúdo de uma célula na parte superior, no meio ou na parte inferior.

Alembrando que é uma boa prática seguir toda a parte estrutural e de conteúdo contido no HTML, e toda a estilização no CSS.

Como estilizar uma tabela HTML com CSS

Para estilizar sua tabela com CSS você pode simplesmente selecionando elementos da tabela e aplicando estilos como cores, bordas, fontes, etc. Além disso, também pode utilizar as tags <colgroup> e <col> para agrupar e estilizar mais elementos de uma só vez.

No entanto, se você ainda não tem nenhuma noção sobre as tecnologias CSS, recomendamos fortemente que siga o guia “O que é CSS“.

Veja um exemplo de CSS abaixo:

				
					<table class="tabela">
    <thead>
        <tr>
            <th></th>
            <th>Preços</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Produto</td>
            <td>10R$</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Total</td>
            <td>25R$</td>
        </tr>
    </tfoot>
</table>
				
			
				
					.tabela, th, td{
    border-collapse: collapse; /*define a separação entre as bordar*/
    padding: 10px;
    text-align: left;
    border: 1px solid rgb(160 160 160);
}
th{
    background-color: lightgray;
}
				
			

Exemplos de código para aprender como criar HTML tabelas e estilizá-las com CSS

Em resumo, as tabelas HTML são uma ferramenta importante para exibir dados em uma forma estruturada e organizada. E com a ajuda do CSS, é possível estilizar a tabela conforme as suas necessidades, tornando-a mais legível e atrativa para os usuários.

No entanto, é importante ter cuidado ao usar tabelas, pois elas podem tornar o código HTML mais complexo e difícil de manter. Ao usar tabelas, é importante considerar o propósito da tabela e seu conteúdo para garantir que ela seja útil e acessível para todos.

Veja abaixo alguns exemplos de tabela para poder aprofundar e praticar os seus conhecimentos adquiridos com esse artigo:

				
					<table class="tabela">
    <thead>
        <tr>
            <th>Produtos</th>
            <th>Preços</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Maça</td>
            <td>10R$</td>
        </tr>
        <tr>
            <td>Banana</td>
            <td>10R$</td>
        </tr>
        <tr>
            <td>Uva</td>
            <td>5R$</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>Total</th>
            <td>25R$</td>
        </tr>
    </tfoot>
</table>

<style>
    .tabela, th, td{
        border-collapse:collapse;
        padding: 10px;
        text-align: left;
        border: 1px solid rgb(160 160 160);
    }
</style>
				
			
Produtos Preços
Maça 10R$
Banana 10R$
Uva 5R$
Total 25R$

Dúvidas frequentes

As tabelas HTML são elementos de marcação usados para exibir dados em formato tabular em uma página web. Elas consistem em linhas e colunas que organizam e apresentam informações de maneira organizada e estruturada.

Para criar uma tabela HTML, é necessário usar as tags de tabela, linha e célula. A tag de tabela é <table>, a tag de linha é <tr> e a tag de célula é <td>. O código básico para criar uma tabela simples é o seguinte:

<table>
  <tr>
    <td>Célula 1</td>
    <td>Célula 2</td>
  </tr>
  <tr>
    <td>Célula 3</td>
    <td>Célula 4</td>
  </tr>
</table>

Neste exemplo, a tabela tem duas linhas e duas colunas, com cada célula contendo um valor de texto. É possível adicionar mais colunas ou linhas à tabela, bem como formatar o texto e adicionar bordas. As tags de tabela também suportam recursos avançados, como mesclar células e adicionar cabeçalhos.

As principais tags para se fazer tabelas no HTML são: <table> para definir a tabela, <tr> para definir a linha, <th> para definir o cabeçalho da coluna, e <td> para definir as células.

Como se tornar um desenvolvedor Web?

Não é necessário ter um certificado ou formação específica para ser um desenvolvedor web. Porque o importante é obter conhecimentos teóricos e práticos sobre programação, e assim irá adquirir experiência para entrar no mercado de programação web.

Certamente deve estar animado para começar a sua jornada, saiba que estou focado para fazer conteúdos excepcionais que irão te ajudar! Então não perca tempo e cadastre-se logo abaixo para não perder nenhuma novidade e ficar sempre por dentro

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Pratique, acesse o editor HTML
mokup phone
Aprenda a desenvolver para a web de graça!

Cadastrar agora

*Não enviamos spam, ao enviar você aceita nossas políticas de privacidade.

Pesquisa
*A busca não retorna histórias,
para isso visite a página histórias
Digite aqui para obter os resultados da pesquisa!
Ebook Criar com HTML e CSS - Mukup

Cadastrar agora

Aprenda a desenvolver para a web de graça! Mais ebook de bônus.

*Não enviamos spam, ao enviar você aceita nossas políticas de privacidade.