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>

Código Fonte do Cronograma

O código fonte do Cronograma do Módulo Introdutório pode ser visto aqui, junto com a própria tabela.

Pensei que ficaria melhor como imagem, mas não ficou (deu muita serrilha na fonte). Assim, vai ser melhor copiar esse código (não colei aqui, pois o Blogger "lê" o texto como tabela) na Agenda.

O caminho é o seguinte AGENDA >> MANUTENÇÃO >> INCLUIR.

Na tela de "Incluir", deve-se clicar em "HTML" (um botaozinho que fica na barra de ferramentas). Na tela que entrará é só colar o código que está na página mencionada. Por favor, cole apenas o TEXTO que está abaixo da tabela.