Como crear tablas en HTML para Bloggers


Hoy vamos a ver como crear listas numeradas en Blogger. Ya sé que en el panel de creación de entradas Blogger nos da una manera rápida de hacerlas pero hay veces que cuando personalizamos en menú o el widget de redes sociales, nos viene genial saber un poco de qué va el tema.

Lista Sencilla: 

Estas son las predeterminadas por Blogger en su panel de creación de entradas.

a) Numerada:

Vista HTML

<ol>
<li> Primer Párrafo </li>
<li> Segundo Párrafo </li>
<li> Tercer Párrafo </li>
</ol>

Vista Redacción

  1. Primer Párrafo
  2. Segundo Párrafo
  3. Tercer Párrafo

b) Viñetas:

Vista HTML

<ul>
<li> Primer Párrafo </li>
<li> Segundo Párrafo </li>
<li> Tercer Párrafo </li>
</ul>

Vista Redacción

  • Primer Párrafo
  • Segundo Párrafo
  • Tercer Párrafo

Lista de Definiciones:

Vista HTML

<dl>
<dt> Primer Párrafo </dt>
<dd> Primera Definición </dd>
<dt> Segundo Párrafo </dt>
<dd> Segunda Definición </dd>
</dl>

Vista Redacción

Primer Párrafo
Primera Definición
Segundo Párrafo
Segunda Definición

A estas listas podemos aplicar estilos con CSS, pero eso lo veremos más adelante, hoy quiero que veáis como aplicar lo que vimos en la entrada sobre editar textos a este tipo de listas sencillas.

Ejemplo HTML
<ul>
<li><span style=”text-decoration: underline overline; color: blue”> Imprescindibles para estas Vacaciones </span></li>
</ul>

<ol>
<li> <span style=”border-bottom: 2px dotted pink;”> Toalla de playa molona</span></li>
<li> <span style=”border-bottom: 2px dotted green;”> Bikini cuqui comprado ayer</span></li>
<li> <span style=”border-bottom: 2px dotted blue;”>Mi crema <strike> antiarrugas </strike> para el sol </span></li>
</ol>

<dl>
<dt><span style=”color: black; text-shadow: black 0.1em 0.1em 0.2em;”>Nota Mental</span></dt>
<dd><marquee>El portátil se queda en casa esta vez</marquee></dd>
</dl>

Vista Redacción

  • Imprescindibles para estas Vacaciones
  1. Toalla de playa molona
  2. Bikini cuqui comprado ayer
  3. Mi crema antiarrugas para el sol

Nota Mental
El portátil se queda en casa esta vez

Y si encima añadimos una tabla como vimos en esta entrada… ¿no creéis que queda monísimo? 

Vista HTML

<table align=”left” bgcolor=”#F6CEE3″ border=”0″ bordercolor=”#58ACFA” cellpadding=”6″ cellspacing=”2″>
  <tbody>
<tr>
    <td>
<ul>
<li><span style=”text-decoration: underline overline; color: blue”> Imprescindibles para estas Vacaciones </span></li>
</ul>
</td>
    </tr>
<tr>
    <td>
<ol>
<li> <span style=”border-bottom: 2px dotted pink;”> Toalla de playa molona</span></li>
<li> <span style=”border-bottom: 2px dotted green;”> Bikini cuqui comprado ayer</span></li>
<li> <span style=”border-bottom: 2px dotted blue;”>Mi crema <strike> antiarrugas </strike> para el sol </span></li>
</ol>
</td>
</tr>
<tr>
    <td>

<dl>
<dt><span style=”color: black; text-shadow: black 0.1em 0.1em 0.2em;”>Nota Mental</span></dt>
<dd><marquee>El portátil se queda en casa esta vez</marquee></dd>
</dl>

</td>
</tr>
</tbody></table>
Vista Redacción
  • Imprescindibles para estas Vacaciones
  1. Toalla de playa molona
  2. Bikini cuqui comprado ayer
  3. Mi crema antiarrugas para el sol

Nota Mental
El portátil se queda en casa esta vez

Y no os aburro más por hoy, creo que es suficiente con este repasito a lo que llevamos visto. En la próxima entrada sobre programación básica para Bloggers os quiero hablar sobre las opciones de personalización de los videos e imágenes que podemos subir a nuestras entradas.



Suscríbete a mis entradas por email ¡para no perderte nada!

♥ Las recibirás en tu bandeja de entrada el mismo día que sean publicadas ♥

Te encantará:

The following two tabs change content below.

Celia

Diseñadora, Mentora y Formadora Online at El Perro de Papel
Mamá y emprendedora a tiempo completo. Ayudo a otras mujeres y madres soñadoras a emprender un negocio online de éxito para conciliar su vida personal y profesional.Si este artículo te ha gustado, sigue aprendiendo conmigo en mi reto gratis de 14 días para conectar con tu mejor versión CLICK AQUÍ.Y AQUÍ tienes mi curso premium para mamás emprendedoras que quieren hacer realidad su idea genial, mano a mano, conmigo.¡Que tengas un feliz día, soñadora!

Pin It on Pinterest

Share This

¿CANSADA DE TRABAJAR TANTAS HORAS SIN VER LOS RESULTADOS ESPERADOS?

Te regalo mi CURSO GRATIS DE 5 DÍAS para mamás emprendedoras que quieren conciliar su vida personal y profesional sin volverse locas ni renunciar a sus sueños.

¡Bienvenida! Ahora revisa tu correo ;)