 |
| Fonte img : Freepik |
Mas você sabe como criar uma tabela em HTML 5?
Obviamente se você usa WordPress então não precisa lidar com esse tipo de codificação pois o CMS Já vem com a opção de inserir tabelas semi prontas.
Porém para aqueles que usam o blogger e ainda não sabem criar tabelas HTML 5 vamos aprender neste post , também já forneceremos o
código pronto para que você já possa começar a usar.
Primeiro vamos apresentar o código HTML da tabela.
<table>
<tbody>
<tr>
<th>elemento 1 </th>
<td>dados </td>
</tr>
<tr>
<th>elemento 2 </th>
<td>dados </td>
</tr>
<tr>
<th>elementos 3</th>
<td>dados </td>
</tr>
<tr>
<th>elemento 4 </th>
<td>dados </td>
</tr>
<tr>
<th>elemento 5 </th>
<td>dados </td>
</tr>
</tbody>
</table>
Abaixo veja com fica o código já inserido corretamente na postagem.
| elemento 1 | dados |
|---|---|
| elemento 2 | dados |
| elementos 3 | dados |
| elemento 4 | dados |
| elemento 5 | dados |
Explicação das Tags:
<table>: Define o início e o fim da tabela.
<tr>: Define uma linha na tabela.
<th>: Define uma célula de cabeçalho na tabela (normalmente em negrito e centralizada).
<td>: Define uma célula de dados na tabela.
No exemplo acima usamos uma tabela vertical porém caso sua necessidade seja
uma tabela horizontal, basta fazermos alguns ajustes no código confira:
<table> <tbody> <tr> <td>Coluna 1</td>
<td>Coluna 2</td> <td>Coluna 3</td> </tr>
<tr> <td>Dados 1</td> <td>Dados 2</td>
<td>Dados 3</td> </tr> <tr> <td>Dados
4</td> <td>Dados 5</td> <td>Dados 6</td>
</tr> </tbody> </table>
Outro exemplo do código formatado na vertical em pronto para uso seria.
<table>
<tbody>
<tr>
<td>Coluna 1</td>
<td>Coluna 2</td>
<td>Coluna 3</td>
</tr>
<tr>
<td>Dados 1</td>
<td>Dados 2</td>
<td>Dados 3</td>
</tr>
<tr>
<td>Dados 4</td>
<td>Dados 5</td>
<td>Dados 6</td>
</tr>
</tbody>
</table>
Confira como fica na visualização do blogger abaixo.
| Coluna 1 | Coluna 2 | Coluna 3 |
|---|---|---|
| Dados 1 | Dados 2 | Dados 3 |
| Dados 4 | Dados 5 | Dados 6 |
Quais são as principais diferenças?
Diferenças no Código
Estrutura das Linhas e Colunas:
Tabela Horizontal: Cada linha (<tr>) contém várias células (<td>), formando colunas horizontais.
Tabela Vertical: Cada linha (<tr>) contém duas células: uma célula de cabeçalho
(<th>) e uma célula de dados (<td>), formando colunas
verticais.
As tabelas também podem ser personalizadas usando ícones disponíveis na
galeria do blogger conforme for sua precisão
<table>
<tbody>
<tr>
<th>👤elemento 1 </th>
<td>dados </td>
</tr>
<tr>
<th>👥elemento 2 </th>
<td>dados </td>
</tr>
<tr>
<th>💾elementos 3</th>
<td>dados </td>
</tr>
<tr>
<th>📁elemento 4 </th>
<td>dados </td>
</tr>
<tr>
<th>💽elemento 5 </th>
<td>dados </td>
</tr>
</tbody>
</table>
Confira na visualização abaixo como fica;
| 👤elemento 1 | dados |
|---|---|
| 👥elemento 2 | dados |
| 💾elementos 3 | dados |
| 📁elemento 4 | dados |
| 💽elemento 5 | dados |
Algo que também podemos fazer entre várias outras coisas interessantes é usar um pouco de CSS básico para melhorar a tabela.
Confira abaixo o código HTML:
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
}
th {
background-color: #f2f2f2;
text-align: left;
}
tr:nth-child(even) {
background-color: #f9f9f9;
}
</style>
<table>
<tbody>
<tr>
<th>👤elemento 1</th>
<td>dados</td>
</tr>
<tr>
<th>👥elemento 2</th>
<td>dados</td>
</tr>
<tr>
<th>💾elemento 3</th>
<td>dados</td>
</tr>
<tr>
<th>📁elemento 4</th>
<td>dados</td>
</tr>
<tr>
<th>💽elemento 5</th>
<td>dados</td>
</tr>
</tbody>
</table>
Para ver como fica na visualização use o editor visual de código disponível aqui no blog.
Explicação do CSS:
table: Define a largura da tabela para 100% do contêiner e remove os espaços entre as bordas das células.
th, td: Adiciona uma borda de 1 pixel sólida e um preenchimento de 8 pixels às células da tabela.
th: Define a cor de fundo das células de cabeçalho para um cinza claro e alinha o texto à esquerda.
tr:nth-child(even): Aplica uma cor de fundo diferente (cinza muito claro) para as linhas pares, facilitando a leitura.
Também é possível fazer diversas outras personalizações usando o css , apenas lembre-se que o css afeta diretamente as outras postagens do seu blogger então use com cuidado.
Para usar as tabelas no seu blog sempre use o editor de HTML da página em " Visualização em HTML" disponível no ícone de lápis ✏️