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 encerra-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 cria-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.



Algumas notícias

As memórias DDR5 estão chegando e trarão muitas melhorias

A próxima geração de memórias RAM já possui especificações definidas e promete grande melhoria em relação às atuais DDR4. E o mais importante: mesmo com desempenho bastante superior, elas consumirão menos energia. A tensão de trabalho das memórias DDR5 será de apenas 1.1V contra os 1.2V das atu...

Ler Notícia Completa

Google Chrome consumirá menos memória RAM em breve

O navegador da gigante de buscas da Internet é, sem dúvida, um dos melhores disponíveis, mas é inegável que o consumo de memória RAM por parte dele é exagerado. Este problema já se estende por anos, mas parece que em breve ele terá uma solução. Um novo recurso do Windows 10, chamado SegmentHeap...

Ler Notícia Completa
Você gostará destes vídeos!