Ao clicar em "Recursos", no menu acima, você irá para uma página que está dividida em três colunas com informações. Essa divisão foi feita com o uso de uma tabela, e exemplifica um tipo de utilidade que esse recurso pode ter.
É possível construir tabelas usando o HTML "puro" -- no modo de postagem desse tipo -- no blog ou então usando algum editor, como NVU.
Construir tabelas no HTML é um pouco trabalhoso, mas pode ser mais ágil quando se compreende a lógica. (Embora, adiante também procurarei mostrar como fazer isso em editor.)
A estrutura básica do código é a seguinte
<table> - Indica a abertura da tabela
<tbody> - Idem
<tr> - Indica abertura de uma linha
<td> - Indica abertura de uma coluna (célula 1)
</td> - Indica fechamento de uma coluna
<td> - Indica abertura de uma coluna (célula 2)
</td> - Indica fechamento de uma coluna
</tr> - Indica fechamento de uma linha
</tbody> - Indica o fim da tabela
</table> - Idem
Então, conforme o código acima, a tabela tem apenas uma linha e duas colunas, sendo visualizada, quando se copia o código na zona HTML da postagem, conforme abaixo
Por essa lógica, uma tabela com duas linhas e três colunas teria a seguinte codificação:
<table> - Indica a abertura da tabela
<tbody> - Idem
<tr> - Indica abertura da 1a linha
<td> - Indica abertura da 1a coluna (na 1a linha, célula 1)
</td> - Indica fechamento da 1a coluna (na 1a linha)
<td> - Indica abertura da 2a coluna (na 1a linha, célula 2)
</td> - Indica fechamento da 2a coluna (na 1a linha)
<td> - Indica abertura da 3a coluna (na 1a linha, célula 3)
</td> - Indica fechamento da 3a coluna (na 1a linha)
</tr> - Indica fechamento da 1a linha
<tr> - Indica a abertura da 2a linha
<td> - Indica abertura da 1a coluna (na 2a linha, célula 4)
</td> - Indica fechamento da 1a coluna (na 2a linha)
<td> - Indica abertura da 2a coluna (na 2a linha, célula 5)
</td> - Indica fechamento da 2a coluna (na 2a linha)
<td> - Indica abertura da 3a coluna (na 2a linha, célula 6)
</td> - Indica fechamento da 3a coluna (na 2a linha)
</tr> - Indica fechamento da 2a linha
</tbody> - Indica o fim da tabela
</table> - Idem
E será mostrada no navegador assim:
| célula 1 | célula 2 | célula 3 |
| célula 4 | célula 5 | célula 6 |
Um último exemplo, para fixar a ideia -- uma tabela com duas colunas e três linhas
<table> - Indica a abertura da tabela
<tbody> - Idem
<tr> - Indica abertura da 1a linha
<td> - Indica abertura da 1a coluna (na 1a linha, célula 1)
</td> - Indica fechamento da 1a coluna (na 1a linha)
<td> - Indica abertura da 2a coluna (na 1a linha, célula 2)
</td> - Indica fechamento da 2a coluna (na 1a linha)
</tr> - Indica o fechamento da 1a linha
<tr> - Indica abertura da 2a linha
<td> - Indica abertura da 1a coluna (na 2a linha, célula 3)
</td> - Indica fechamento da 1a coluna (na 2a linha)
<td> - Indica abertura da 2a coluna (na 2a linha, célula 4)
</td> - Indica fechamento da 2a coluna (na 2a linha)
</tr> - Indica o fechamento da 2a linha (na 2a linha)
<tr> - Indica abertura da 3a linha
<td> - Indica abertura da 1a coluna (na 3a linha, célula 5)
</td> - Indica fechamento da 1a coluna (na 3a linha)
<td> - Indica abertura da 2a coluna (na 3a linha, célula 6)
</td> - Indica fechamento da 2a coluna (na 3a linha)
</tr> - Indica o fechamento da 3a linha
</tbody> - Indica o fim da tabela
</table> - Idem
| célula 1 | célula 2 |
| célula 3 | célula 4 |
| célula 5 | célula 6 |
Antes de terminar essa introdução a tabelas em HTML, vou explicar mais três questões sobre as tabelas: o "border" -- um atributo para definir a espessura da borda -- sobre o "width", que é um atributo para estabelecer certa largura e o modo para colocarmos cor no fundo de determinada célula (atributo "bgcolor").
Bem, na estrutura (e visualização) que se segue, foi definido que a tabela teria uma borda de 5 (pixels) e largura total de 400. Mas as colunas foram definidas (via "widht") de modo diferente: uma tem a largura de 100px e a outra de 300px.
<table
border="5"
width:="400px">
<tbody>
<tr>
<td
width="100px">célula 1</td>
<td
width="300px">célula 2</td>
</tr>
<tr>
<td>célula 3</td>
<td>célula 4</td>
</tr>
</tbody> </table>
| célula 1 | célula 2 |
| célula 3 | célula 4 |
A atribuição de cor é simples, bastando, como se mostra abaixo, colocar algum atributo de cor nas células.
<table
border="1"
width:="400px">
<tbody>
<tr>
<td
width="100px"
bgcolor="red">célula 1</td>
<td
width="300px"
bgcolor="blue">célula 2</td>
</tr>
<tr>
<td
bgcolor="blue">célula 3</td>
<td
bgcolor="red">célula 4</td>
</tr>
</tbody>
</table>
| célula 1 | célula 2 |
| célula 3 | célula 4 |
Na próxima postagem, veremos mais alguns parâmetros para construir tabelas com HTML.
