 |  |  |
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>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>
