lunes, 13 de marzo de 2017

Crear una tabla para las imagenes en una entrada.

Como sabéis, Blogger  solo tiene la opción de posicionar las imágenes en columnas de una en una, al menos que yo sepa. Os dejo un tutorial con el que podréis crear fácilmente una tabla en HTML, tan solo tenéis que tener nociones básicas del lenguaje y saber el significado de las siguientes nomenclaturas.

table (el contenedor principal)
tr  (representando a las filas contenedoras de las celdas)
td (representando a las celdas)
div Sirve para crear secciones o agrupar contenidos.
  • •Sus etiquetas son: <div> y </div> (ambas obligatorias).
  • •Está definido como: Elemento en bloque.
  • •Crea una caja: En bloque.
  • •Puede contener: Texto, y/o cero o más elementos en bloque o en línea.
Aqui os dejo el código que deberis insertar en la pestañana de edicion de HTML de vuestra entrada:

<table width="50%" height="50%" border="1" align="left" cellpadding="0" style="height:auto; width:auto;"><tbody>
<tr><td width="32%" height="
32%"><div class="separator" style="clear: both; text-align:center;">
<!-- insertamos ruta de la imagen entre las comillas href=""  -->
<a href=""></a></div>
</td>
<td width="32%"><div class="separator" style="clear: both; text-align: center;">
<a href=""></a></div>
</td><td width="32%"><div class="separator" style="clear: both; text-align: center;">
<a href=""></a></div>
</td></tr>
<tr><td width="32%"><div class="separator" style="clear: both; text-align: center;">
<a href=""></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
</td>
<td width="32%"><div class="separator" style="clear: both; text-align: center;"></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
</td>
<td><div class="separator" style="clear: both; text-align: center;"></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
</td></tr>
<tr><td>
<div class="separator" style="clear: both; text-align: center;"></div>
</td>
<td><div class="separator" style="clear: both; text-align: center;"></div></td><td>

<div class="separator" style="clear: both; text-align: center;">
<a href=""></a></div>
</td>
</tbody></table>

Si no teneis conocimientos de CSS os quedará un tabla sencillita pero funcional.
El resultado es el siguiente: 
Podeis ver un ejemplo en la ultima entrada de mi blog.

  ¡ANIMO Y A POR ELLO, SOLO ES CUESTION DE PRÁCTICA 😉!



No hay comentarios :

Publicar un comentario en la entrada

© Aurin Handicraft.