Tabelas em postagens

Conforme foi dito na postagem anterior, o uso de tabelas pode facilitar a diagramação de fotos numa postagem. As tabelas são um elemento HTML que foi estudado, junto com essa linguagem de formatação, no Módulo Informática, no ciclo Básico, do Mídias na Educação.

Você não precisa necessariamente criar a tabela "no braço". Existem vários geradores de tabelas na internet (p.ex., aqui e aqui), que são úteis para o que queremos: criar tabelas em que possamos inserir imagens nas células, para que as imagens fiquem separadas e em certa posição.

No entanto, é importante entender a lógica do código da tabela, já que você colará o código da imagem dentro da mesma, no espaço de edição HTML da postagem.

Abaixo, o caso das imagens acima (uma tabela com uma única linha e três colunas) é exemplificado.

<table border="0" cellpadding="2" cellspacing="2" style="height: 68px; text-align: center; width: 400px;"><tbody>
<tr> <td align="left" valign="undefined"><img class="expa" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPdVFhsZqLL-8i4-PLDQMisK1jFEqbdBnqXOCkBzlXqnu4195M47dB8QwyEY9pXWay6pkBmwbQtqlbJLGJQUvPkpThfy8Q5o7PTHLtdDjWSKE1UFjpwMDdOYvbyZEVdUGpEwjNiQG5eotS/s1600/PN+HM.jpg" width="450px" title="Foto do World Press Photo 2012"/>
<style>
img.expa {
cursor: pointer;
max-width: 120px;
}
img.expa:hover {
max-width: none;
}
</style></td> <td align="center" valign="undefined"><img class="expa" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6sW6Jjx-a9sAEriQg7OLPqeCTagSafUTWwmpQaNbwHJokKkyPfBru7QChOxURhB5qEs_6HgShwNSca-2DWpoGq7lE7f7fRD5bF0ndSasK_jBtbKe40i1psKhBtJx_JdmPKattvFC5scEd/s1600/PN1_1.JPG" width="450px/" title="Foto vencedora do World Press Photo 2012"/>
<style>
img.expa {
cursor: pointer;
max-width: 120px;
}
img.expa:hover {
max-width: none;
}
</style></td> <td align="right" valign="undefined"><img class="expa" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpZaYFME-S1r_tQtdbJ8ZKm16riXIW4zcqMtzZaBLZ_AxilkH_oJ4s_co3S6IMEIZM78lJKCGqocig3geFAUbOfHPYMSSr5xapAlZzgaWNsv8g0ws-zaCoZoshxJS10DHOftcHrfH7HA_o/s1600/PN_DL3.jpg" width="280px" title="Foto do World Press Photo 2012"/>
<style>
img.expa {
cursor: pointer;
max-width: 120px;
}
img.expa:hover {
max-width: none;
}
</style></td> </tr>Em relação ao código da postagem anterior houve uma pequena mudança. Note (em azul) que dentro do campo de cada imagem há um atributo (esse é o nome técnico) chamado "title", e eles têm uma caracterização (o que vem depois do sinal de igual). Perceba que quando você coloca o mouse sobre a imagem (deixe o cursor parado) aparece o texto definido no atributo. Esse é um meio para, por exemplo, creditar imagens ou dar mais informações sobre elas. Porém, é interessante que o texto seja curto, pois não há quebra de linha nesse método.

Concluindo a postagem, mais uma dica, que será aproveitada se você entendeu bem os princípios de tabelas: colocar um fundo colorido nas imagens, como abaixo (a tabela acima não tem nenhuma cor de fundo).


O código abaixo (simplificado para o que interessa) é o seguinte (repare no trecho em azul, que indica a cor do fundo):

<table border="0" cellpadding="2" cellspacing="2" style="background-color: #f2661c;"><tbody>
<tr> <td align="left" valign="undefined"><img class="expa" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPdVFhsZqLL-8i4-PLDQMisK1jFEqbdBnqXOCkBzlXqnu4195M47dB8QwyEY9pXWay6pkBmwbQtqlbJLGJQUvPkpThfy8Q5o7PTHLtdDjWSKE1UFjpwMDdOYvbyZEVdUGpEwjNiQG5eotS/s1600/PN+HM.jpg" width="450px" title="Foto do World Press Photo 2012"/>
<style>
img.expa {
cursor: pointer;
max-width: 120px;
}
.....
}
img.expa:hover {
max-width: none;
}
</style></td> </tr>