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

O que acontece com o cérebro no exato momento em que morremos

O que passa em nossa cabeça no momento da morte? Não se sabe exatamente e, embora os cientistas tenham alguma resposta, a resposta continua sendo um grande mistério. Além de difícil solução, tentar respondê-la pode criar implicações éticas. No entanto, uma equipe de cientistas da Universidade...

Ler Notícia Completa

Operada e devolvida ao útero, menina que nasceu duas vezes hoje 'acorda sorrindo toda manhã'

Um bebê pode nascer duas vezes? Não é o caso da absoluta maioria das crianças, mas foi assim para a pequena Lynlee Boemer. Em outubro de 2015, sua mãe, Margaret Boemer, descobriu que estava grávida de gêmeos. Ela sofreu um aborto espontâneo, mas um dos bebês sobreviveu. Com dez semanas de ges...

Ler Notícia Completa

Médicos dizem estar perto de chegar a exame de sangue para todos os tipos de câncer

Cientistas dizem que estão mais perto de criar um exame de sangue universal, capaz de identificar todos os tipos de câncer. Estudo conduzido com 1.005 pacientes por uma equipe da Universidade Johns Hopkins, dos Estados Unidos, testou um método que detecta oito tipos de proteínas e 16 mutações ge...

Ler Notícia Completa