Bienvenido a mi blog. Aquí encontrarás todas las cosas que he creado e ido aprendiendo con el tiempo, útiles para ti y tu sitio web.

Tablas personalizadas 【table】

10.9.12

Y he aquí otro código que estuve buscando hace mucho! щ(ಠ益ಠщ) MUCHÍSIMO! Ya sé! Ya sé! ¿Qué tiene de maravilloso una tabla (table)?

NADA SI NO ES UNA TABLE DE APPLE(?) (*≧▽≦)ノシ)) OK SORRY...LA VERDAD (y como verán) UNA TABLA DE BLOGGER NO TIENE MUCHO ESPLENDOR QUE DIGAMOS. Y SINCERAMENTE YO PENSARÍA QUE UNA TABLA NO TIENE NADA DE MARAVILLOSO. LO PENSARÍA PERO NO! PORQUE, YA HE VISTO LA LUZ!!!!!! -drama- OK ME TRANQUILIZARÉ. LOL

Hoy no haré el paso a paso ya que este código no tiene un lugar fijo. PUEDE IR EN TODAS PARTES!!! Ok no, no en todas partes, pero si puede ir tanto en una entrada (post), página (page) y/o en una columna lateral (gadget). Así que sólo les dejaré los códigos, el resto es fácil. Copiar y pegar (ヘ。ヘ)

CÓDIGOS:

Borde de puntitos:
<table border="0" style="background-color: none; border: #FE2E9A 3pt dotted; width: 320px;"><tbody><tr><td>Aquí es donde debe ir tu texto, sólo debes reemplazar este.</td></tr></tbody></table>
Resultado:
Aquí es donde debe ir tu texto, sólo debes reemplazar este.

Borde de rayitas:
<table border="0" style="background-color: = none; border: #F3F781 2pt dashed; width: 320px;"><tbody><tr><td>Aquí es donde debe ir tu texto, sólo debes reemplazar este.</td></tr></tbody></table>
Resultado:
Aquí es donde debe ir tu texto, sólo debes reemplazar este.

Borde doble raya
<table border="0" style="background-color: none; border: #01DFD7 4pt double; width: 320px;"><tbody><tr><td>Aquí es donde debe ir tu texto, sólo debes reemplazar este.</td></tr></tbody></table>
Resultado
Aquí es donde debe ir tu texto, sólo debes reemplazar este.

Borde con marco
<table border="15" cellspacing="5" style="width: 320px;"><tbody>
<tr><td>Aquí es donde debe ir tu texto, sólo debes reemplazar este.</td></tr>
</tbody></table>
Resultado
Aquí es donde debe ir tu texto, sólo debes reemplazar este.

Tabla con fondo
<table background="url de tu imagen (jpeg, png, gif)" border="1" style="width: 320px;"><tbody>
<tr><td><span style="background-color: #F4CCCC;">Aquí es donde debe ir tu texto, sólo debes reemplazar este.</span></td></tr>
</tbody></table>
Resultado
Aquí es donde debe ir tu texto, sólo debes reemplazar este.

Nota:

border: Esta es la línea del borde interno de la tabla. Si 'border' está en uno (1) aparecerá la linea, mientras mayor sea el número mayor será el grosor de esa línea. Y si fuera cero (0) obviamente no se verá.

style: En 'style' hay una serie de códigos. En 'background-color' dice none, eso quiere decir que no hay color de fondo en la tabla; pero si quieres colocar color sólo cambia el none por un código HTML de color. También está 'border' que tiene un código HTML de color (ej: #F3F781), este es el color de la línea del borde externo de la tabla. Al lado de 'border' le sigue pt, este es el grosor de la línea del borde externo de la tabla; se cambia el número del lado izquierdo de pt por uno mayor la línea sera más gruesa. Por último está 'width' que es el ancho de la tabla, mientras mayor sea el número más ancha será.

background: Ahí va el código url de la imagen que desees como fondo.

span style: Dentro está el código 'background-color', este es el color de resaltado del texto (ej. #F4CCCC). Y como con los demás colores, utiliza un código HTML de color.

BIEN! ESO ES TODO (×_×;)He terminado muerta, me esforcé muchísimo modificando códigos antiguos para adaptarlos a la nueva versión de blogger. Por favor respeten mi trabajo y si utilizas la información, favor darme los respectivos créditos. GRACIAS! \(・`(ェ)・)/

Gracias al Escaparate de Rosa y a Ciudad Blogger.

No hay comentarios:

Publicar un comentario

Home About Design My designs Contact