Tabelas em postagens com HTML - parte 2 de 3

Já vimos que o atributo "width" indica a largura da tabela ou colunas, o artibuto height, por sua vez, faz isso com as linhas, e deve ser indicado em pixels.

Duas marcações não obrigatórias são <caption> ... </caption>, que define um título para a tabela e <th> ... </th>, que define um cabeçalho para colunas ou linhas, estando dentro de linhas (<tr>...</tr>). Essas marcações não são obrigatórias, pois você pode simplesmente colocar uma formatação no cabeçalho (o efeito da tag <th> ou então escrever algo que sirva como título, sem usar a marcação sugerida (<caption>).

Outros dois pontos interessantes são a possibilidade de definir a borda com "0" de espaço e com uma cor qualquer. No primeiro caso, basta atribuir zero a border, e para o segundo você deve usar o atributo bordercolor e colocar a cor (por exemplo: bordercolor="red").

De qualquer modo, para mostrar o que se ensinou, vamos ver outra estrutura de tabela e exemplo de como mostra o navegador:

<table border="1" bordercolor="blue" cellpadding="0" cellspacing="0" style="height: 200px; width: 600px;"> - Indica a abertura da tabela
<tbody> - Idem
<caption> Exemplo do título de tabela </caption>
    <tr> - Indica abertura de uma linha (do cabeçalho)
<th>cabeçalho 1</th>
<th>cabeçalho 2</th>
    </tr> - Indica fechamento de uma linha (do cabeçalho)
     <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
  <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

Exemplo do título de tabela

Cabeçalho 1	Cabeçalho 2
célula 1	célula 2
célula 3	célula 4

Se você é observador, deve ter notado que coloquei na tabela outros dois atributos que ainda não comentei: cellpadding e cellspacing, definidos ambos com zero. Cellspacing é o espaço que poderá existir entre células (na tabela acima é zero). E cellpadding é o espaço (definido tanto na vertical quanto na horizontal) que o conteúdo que está numa célula ficará distante das linhas da mesma. No caso, acima, note que está encostado, justamente pelo cellpadding ter ficado em zero.

Você pode observar, ainda, que o cabeçalho está centralizado, diferentemente do conteúdo das outras células. Isto é o padrão com o uso da marcação <th>. Porém, o atributo align permite mudar o alinhamento horizontal do conteúdo (com parâmetros como "left" -- esquerda --, "right" -- direita -- e "center" -- centro). Já o atributo valign define o local na vertical do conteúdo (com valores "top", "middle" e "bottom" -- respectivamente, em cima, no meio e na parte de baixo da célula).

Para exemplificar esses atributos, seguem abaixo um código e visualização de tabela:

<table border="1" bordercolor="blue" cellpadding="2" cellspacing="2" style="height: 50px; width: 600px;">
<caption> Exemplo do título de tabela com formatações</caption>
<tbody>
<tr>
<th>Cabeçalho 1</th>
<th>Cabeçalho 2</th>
</tr>
<tr>
<td align="center" valign="middle">célula 1</td>
<td align="left" valign="top">célula 2 </td>
</tr>
<tr>
<td align="right" valign="bottom">célula 3      </td>
<td align="center" valign="middle">célula 4       </td>
</tr>
</tbody>
</table>

Exemplo do título de tabela com formatações

Cabeçalho 1	Cabeçalho 2
célula 1	célula 2
célula 3	célula 4

Antes de finalizar esta postagem, foi ensinar mais um aspecto interessante do uso de tabelas: a possibilidade de escrever dentro de imagens. É algo relativamente simples, a imagem deve estar em algum que será copiado para o campo/atributo background, como se vê abaixo (o endereço da imagem, que deve ser a do usuário está em vermelho).

<table background="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkVE0S_BMPeF6QAM0HK4hIlSFlXqXJceWZNWu248BYbVhjJlr-hMytIZd47FNHkKIZg6oPJhG30-VhTyCcRU1MfBhRNfkA4ApJgOlQg0iIQh8Q9gmUX7hab3GoCupuu-gTKbGW5gXb/s1600/upload_video.jpg" border="1" bordercolor="blue" cellpadding="5" cellspacing="0" style="height: 335px; width: 600px;">
<tbody>
<tr>
<td align="left" valign="center"><span style="font-size: large;">
<b>   Estou escrevendo dentro <br>
da imagem</b></span>
</td>
</tr>
</tbody>  </table>

Estou escrevendo dentro da imagem

Repare que, no código e na visualização, coloquei o texto em verde, para chamar a atenção. Inseri também uma quebra de linha (<br>), para ajustar melhor o texto.

Na próxima postagem, falo sobre mais alguns aspectos da formatação de tabelas em HTML.