Como usar table no HTML para criar tabelas completas
Aprenda como usar a tag table do HTML e todas as outras relacionadas para criar tabelas completas para as páginas do seu site com formatação CSS.
PUBLICADO POR AYLTON INACIO
Tutoriais e Artigos > Websites e SEO
As tables ou tabelas são elementos HTML muito utilizados em páginas web para apresentar dados de uma maneira mais clara, facilitando a leitura e entendimento.
Antigamente, até o layout das páginas eram feitos com tabelas (isso ainda pode ser feito tecnicamente), mas não é uma boa prática, pois hoje temos recursos CSS como GRID e Flexbox que são próprios para essa finalidade. Sendo assim, não faça layout com tabela, apenas apresente dados.
A tabela a seguir é um exemplo de como usar o table do HTML para criar esses elementos em suas páginas. Vamos analisar os recursos da tabela e o código-fonte.
A tabela do nosso exemplo usa vários recursos HTML como cabeçalho, rodapé, caption, mesclagem de célula, formatação de coluna e formatação de tabela com recursos CSS. Antes de analisar o código necessário para a nossa tabela completa, é fundamental entender o básico.
Como criar tabela básica com HTML
É importante que você conheça o básico para iniciar a criação de tabelas antes de partir para exemplos mais complexos. Então
abra seu editor de código favorito, crie uma estrutura básica HTML e coloque o código a seguir no corpo <body>:
<table>
<tr>
<td>conteúdo da célula</td>
<td>conteúdo da célula</td>
<td>conteúdo da célula</td>
</tr>
<tr>
<td>conteúdo da célula</td>
<td>conteúdo da célula</td>
<td>conteúdo da célula</td>
</tr>
</table>Depois coloque o código CSS a seguir dentro do cabeçalho da página <head> para fazer a formatação:
<style>
table, th, td {
border: 1px solid black;
}
</style>Salve o arquivo como tabela.html e abra no seu navegador para ver o resultado:
Lembre-se sempre que o HTML serve para você definir os elementos da página, ex: table, já o CSS serve para fazer a formatação visual desses elementos.
Analisando somente o HTML, a tag <table> cria a tabela. Já a tag <tr> abre uma linha e dentro dessa linha você
coloca as células com a tag <td>.
Uma tabela é renderizada no navegador sem bordas e outras formatações, por isso temos os códigos CSS para fazer esse trabalho, que no nosso caso aplicaram bordas pretas e sólidas com 1 pixel nos elementos HTML <table>, <th> e <td>.
Se você está iniciando em desenvolvimento web e sentir dificuldade, veja como criar sua primeira página web com HTML e CSS e depois continue neste post, pois agora vamos analisar o código final da nossa tabela completa que foi apresentada lá no começo.
Como usar table no HTML de forma avançada
Agora que você já conhece o básico na criação de tabelas com HTML, chegou a hora de analisar o código necessário para criar uma tabela mais completa.
Segue o código completo sobre como usar table no HTML para criar nossa tabela de exemplo:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Como usar table no HTML</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
<style>
* {box-sizing: border-box;}
body {font-family: Arial, Helvetica, sans-serif;}
.header,.main,.footer{max-width:1200px;margin:auto}
.header {background-color: #f1f1f1;padding: 30px;text-align: center;font-size: 35px;}
.footer {background-color: #f1f1f1;padding: 10px;text-align: center;}
table{width:100% }
table, th, td, caption{
border:1px solid #c0c0c0;
border-collapse:collapse;padding:5px
}
table caption{
background-color:#d9d9d9;
font-weight:bold
}
tbody tr:nth-child(odd) {
background-color: #f2f2f2;
}
td:nth-child(3),tfoot td:nth-child(2) {
text-align:right;
font-weight:bold
}
td:nth-child(3){
width:30%
}
@media (max-width: 600px) { table caption{display:none; }}
</style>
</head>
<body>
<header class="header">
<h1>Tabelas</h1>
</header>
<main class="main">
<table>
<caption>Vendas do Mês</caption>
<colgroup>
<col span="2">
<col span="1" style="background-color:#f2f2f2">
</colgroup>
<thead>
<tr>
<th colspan="2">Nome</th>
<th>Vendas</th>
</tr>
</thead>
<tbody>
<tr>
<td>José</td>
<td>Silva</td>
<td>R$ 4.000,00</td>
</tr>
<tr>
<td>Pedro</td>
<td>Gomes</td>
<td>R$ 4.500,00</td>
</tr>
<tr>
<td>Maria</td>
<td>Ferreira</td>
<td>R$ 2.500,00</td>
</tr>
<tr>
<td>Ana</td>
<td>Pereira</td>
<td>R$ 1.500,00</td>
</tr>
<tr>
<td>Manoel</td>
<td>Matos</td>
<td>R$ 6.000,00</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td>Total</td>
<td>R$ 18.500,00</td>
</tr>
</tfoot>
</table>
</main>
<footer class="footer">
<p>Rodapé</p>
</footer>
</body>
</html>A tag HTML <caption> é opcional e cria uma linha de cabeçalho na tabela. Se estiver presente,
deve ser o primeiro elemento dentro de <table>.
As tags HTML <thead>, <tbody> e <tfoot> servem
para organizar os elementos da tabela em cabeçalho, corpo e rodapé, respectivamente.
A tag HTML <th> funciona como a <td>, ou seja, cria uma célula,
mas ela representa os títulos das colunas, então recebe por padrão o alinhamento centralizado e negrito.
Os atributos colspan e rowspan podem ser usados para mesclar células. No nosso exemplo foi aplicado o colspan="2" na célula com o título nome, assim ela representa duas colunas e se adapta.
A tag HTML <colgroup> pode ser usada para formatar colunas inteiras da tabela junto
com regras CSS. No nosso exemplo, usamos <col span="2"> para selecionar as
duas primeiras colunas, mas deixamos sem formatação. Depois usamos <col span="1">
para selecionar a próxima coluna e formatamos com cor de fundo cinza (background-color:#f2f2f2).
Atualmente o colgroup só aceita os códigos CSS background, border, width e visibility.
Por fim, temos toda a formatação visual da nossa tabela com os códigos CSS dentro do cabeçalho
da página <head>. Basicamente são formatações de bordas, larguras, cores e alinhamentos. Você
pode consultar este guia de seletores CSS para entender todas as seleções. Por exemplo, o código
CSS a seguir seleciona o terceiro elemento <td> e coloca uma largura de 30%, aplicando
assim para a coluna toda.
td:nth-child(3){
width:30%
}Então é isso, eu espero que você tenha gostado desta publicação. Fique à vontade para compartilhar nas suas redes sociais para ajudar na divulgação e crescimento do site.
Aproveite para se inscrever no meu canal do YouTube e também na News do site pra ficar por dentro das novidades em artigos, tutoriais e cursos online.
Abraço e até a próxima!
