Minicursos - HTML

Tabelas


Criar tabelas em HTML pode parecer complicado à primeira vista, mas depois que se entende a estrutura básica das tabelas, fica tudo muito simples.
A tag que determina o início de uma tabela é <table> e seu par de encerramento é </table>
No entanto, para criarmos as colunas e linhas existem outras tags que devem estar dentro da tag <table> .
Para criar uma linha utilizamos <tr> e para encerrá-la </tr>.

As colunas são criadas com <td> e </td>. Se quisermos, por exemplo, criar uma tabela com 3 linhas e 2 colunas, nosso código ficará assim:

<table>
<tr><td> Linha 1, Coluna 1 </td><td> Linha 1, Coluna 2 </td></tr>
<tr><td> Linha 2, Coluna 1 </td><td> Linha 2, Coluna 2 </td></tr>
<tr><td> Linha 3, Coluna 1 </td><td> Linha 3, Coluna 2 </td></tr>
</table>

Isso geraria a seguinte página:

Tag HTML <Table>

As tags <tr> e </tr> determinaram o início e o fim da linha da tabela, enquanto a dupla <td> e </td> ficaram responsáveis por cada célula da tabela. Para delimitar claramente onde uma célula começa, podemos adicionar borda a nossa tabela, bastando inserir o parâmetro border="1" na tag <table>, da seguinte forma:

<table border="1">
<tr><td> Linha 1, Coluna 1 </td><td> Linha 1, Coluna 2 </td></tr>
<tr><td> Linha 2, Coluna 1 </td><td> Linha 2, Coluna 2 </td></tr>
<tr><td> Linha 3, Coluna 1 </td><td> Linha 3, Coluna 2 </td></tr>
</table>

Tag HTML <Table>

Dessa forma fica mais claro distinguir uma célula de outra, bem como as linhas da tabela.
O valor definido na propriedade border determinará, em pixels, a espessura da borda da tabela. Segue um exemplo com valor border=”10”:

Tag HTML <Table>

Outro parâmetro interessante para ser usado nas tabelas é o rowspan, que pode unir linhas de uma mesma coluna, conforme a página abaixo:

Tag HTML <Table>

Para criá-la utilizei o seguinte código:

<table border="2">
<tr><td rowspan="4"> Coluna 1, Célula 1 </td>
<td> Coluna 2, Célula 1 </td>
</tr>
<tr>
<td> Coluna 2, Célula 2 </td>
</tr>
<tr>
<td> Coluna 2, Célula 3 </td>
</tr>
<tr>
<td> Coluna 2, Célula 4 </td>
</tr>
</table>

Percebam que defini, no parâmetro rowspan, dentro da primeira coluna, a quantidade de linhas que gostaria de unir. Então, nas linhas seguintes criei apenas uma coluna.

Bem, essas são as tags responsáveis pela criação de tabelas. Lembre-se que <tr> inicia uma linha e <td> uma célula. É possível, inclusive, criar tabelas aninhadas, ou seja, uma tabela dentro de outra. É só verificar sua necessidade e implementar o código.



Notícias - Games

Atari VCS é finalmente lançado e surpreende

O Atari VCS foi lançado recentemente e trouxe suporte a praticamente todos os serviços de streaming de jogos já disponíveis. A única exceção foi por conta do Playstation Now, cujo suporte nativo não é oferecido, mas ele pode ser acessado através do modo PC do VCS, já que o console possui Googl...

Ler Notícia Completa

The King of Fighters XV já tem data para chegar

A SNK finalmente definiu uma data para lançamento do tão esperando The King Of Fighters XV. Segundo comunicado recente, o game de luta deve chegar em 17 de fevereiro de 2022 para os consoles Playstation 4, Playstation 5, Xbox Series X e S, além de PCs. O título contará com 39 personagens e mante...

Ler Notícia Completa
Ajude o Contém Bits com um cafezinho!

Se você gostou do artigo, se ele lhe foi útil de alguma maneira e você quiser ajudar o Contém Bits, saiba que é simples, fácil e rápido. Basta clicar na imagem do PayPal (ou no cafezinho) e seguir as instruções, em ambiente seguro e com o respaldo do Paypal. Eu agradeço muito! :)


Você gostará destes vídeos!