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
<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?
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
