Drop Down MenusCSS Drop Down MenuPure CSS Dropdown Menu

Modificar propiedades del texto con HTML - Parte III

miércoles, 22 de febrero de 2017

¡Bienvenidos a la última parte! 

En esta entrada se tratará el elemento TABLE, que es, básicamente, para armar tablas. Dirán, "ah, tablas, no necesito tablas para nada" pero creanme que si. ¡Yo las utilizo todo el tiempo!

Recomendación: si querés armar una tabla, escribí el código en algo aparte para no arruinar la entrada. Yo utilizo un editor (las veces que no utilicé se me armó un lío que no se imaginan) -> Editor de HTML
¡Recuerden ver los tutoriales anteriores para informarse de los otros elementos! 

TABLE
Lo básico que necesitamos para crear una tabla es el código <table></table>

 Como todos saben, una tabla consiste en columnas y filas. Existen diferentes etiquetas, que son TR (filas), TD (columnas) y TH (títulos). Yo solamente utilizo tr y td porque se me hace más sencillo y en este tutorial les enseñaré a usarlas, porque la idea es que les muestre como hago tablas

Hacer una tabla básica

1) Vamos al Editor y empezamos a armar una tabla colocando el código principal

<table></table>

2) Ahora, por ejemplo, quiero poner dos columnas y tres filas. Primero les mostraré con una fila

Texto
Texto

Código:
<center><table><tr><td><div style="border: 1px solid black">Texto</div></td><td><div style="border: 1px solid black">Texto</div></td></tr></table></center>

Primero se debe escribir, dentro del código principal, <tr></tr> para armar la fila, dentro de los tr deben de estar los <td></td> que son las columnas (entonces, se abre el elemento td, se cierra y así dependiendo del número de columnas. Como yo quería dos, coloque dos td). Para que sea visible le agregué bordes con div, que están dentro de cada td
- Para centrar la tabla, la coloque entre <center></center>
- Si la tabla que quieren hacer consta de una sola fila, no hace falta colocar el elemento tr

3) Ya tenemos una fila, nos resta hacer dos más. Lo que deben hacer es copiar el código desde <tr> a </tr> y pegarlo dos veces más para que se formen las 3 filas

Texto
Texto
Texto
Texto
Texto
Texto

Código:
<center><table><tr><td><div style="border: 1px solid black">Texto</div></td><td><div style="border: 1px solid black">Texto</div></td></tr><tr><td><div style="border: 1px solid black">Texto</div></td><td><div style="border: 1px solid black">Texto</div></td></tr><tr><td><div style="border: 1px solid black">Texto</div></td><td><div style="border: 1px solid black">Texto</div></td></tr></table></center>


► Ejemplo aplicado
¿Recuerdan que hace no mucho les hablé de una receta de Brownies? ¡Aquí les dejo la tabla para que vean como la hice!

Receta de Osvaldo Gross
Receta de Ochikeron
150g de chocolate
100g de chocolate
150g de manteca
70g de manteca sin sal
4 huevos
3 huevos
300g de azúcar
70g de azúcar
100g de harina 0000
100g de harina 0000
15g de polvo de hornear
---
150g de nueces
60g de nueces

Código:
<center><table><tr><td><div style="text-align:center; padding: 10px; border: black 1px solid; width: 300px"><b>Receta de Osvaldo Gross</b></div></td><td><div style="text-align:center; padding: 10px; border: black 1px solid; width: 300px"><b>Receta de Ochikeron</b></div></td></tr><tr><td><div style="text-align:center; border: black 1px solid; width: 310px; padding: 5px">150g de chocolate</div></td><td><div style="text-align:center; border: black 1px solid; width: 310px; padding: 5px">100g de chocolate</div></td></tr><tr><td><div style="text-align:center; border: black 1px solid; width: 310px; padding: 5px">150g de manteca</div></td><td><div style="text-align:center; border: black 1px solid; width: 310px; padding: 5px">70g de manteca sin sal</div></td></tr><tr><td><div style="text-align:center; border: black 1px solid; width: 310px; padding: 5px">4 huevos</div></td><td><div style="text-align:center; border: black 1px solid; width: 310px; padding: 5px">3 huevos</div></td></tr><tr><td><div style="text-align:center; border: black 1px solid; width: 310px; padding: 5px">300g de azúcar</div></td><td><div style="text-align:center; border: black 1px solid; width: 310px; padding: 5px">70g de azúcar</div></td></tr><tr><td><div style="text-align:center; border: black 1px solid; width: 310px; padding: 5px">100g de harina 0000</div></td><td><div style="text-align:center; border: black 1px solid; width: 310px; padding: 5px">100g de harina 0000</div></td></tr><tr><td><div style="text-align:center; border: black 1px solid; width: 310px; padding: 5px">15g de polvo de hornear</div></td><td><div style="text-align:center; border: black 1px solid; width: 310px; padding: 5px">---</div></td></tr><tr><td><div style="text-align:center; border: black 1px solid; width: 310px; padding: 5px">150g de nueces</div></td><td><div style="text-align:center; border: black 1px solid; width: 310px; padding: 5px">60g de nueces</div></td></tr></table></center>


Hacer una tabla sencilla

Cuando hago la ficha de Personajes en las reseñas generalmente utilizo tabla. Les explicaré como la hago a continuación

1) Ir al Editor y armar dos columnas. No hace falta usar el código "tr" ya que solo será una fila
2) Colocarle ancho y alto deseados
3) Colocarle padding al que contenga texto, para que no quede pegado en el borde (OJO que el padding aumenta de tamaño al elemento que tratamos)

Imagen aquí
Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto

Código:
<center><table><td><div style="width: 100px; height: 100px; border: solid 1px black">Imagen aquí</div></td><td><div style="width: 300px; height: 80px; border: solid 1px black; padding: 10px">Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto</div></td></table></center>

4) Personalizarlo a gusto (colores, formas, colocarle una imagen, etc)


► Ejemplo aplicado
De la reseña de The Flash - Temporada 2
Jay Garrick. Viene de Tierra 2. Posee una historia similar a la de Barry ya que fue afectado por el acelerador de partículas que también se creó en su tierra. Aparece en muy pocos capítulos, aunque le dio un consejo fundamental a Flash: utilizar la electricidad de la energía que genera cuando corre para vencer a un villano. Desde el comienzo se ve que tiene cierta química con Caitlin



Código:
<center><table><td><div style="background-image: url(&quot;https://imgur.com/XbB5CV8.png&quot;); border-radius: 100%; height: 150px; width: 150px;"></div></td><td><div style="height: 130px; padding: 30px; text-align: justify; width: 350px;"><b>Jay Garrick</b>. Viene de Tierra 2. Posee una historia similar a la de Barry ya que fue afectado por el acelerador de partículas que también se creó en su tierra.&nbsp;Aparece en muy pocos capítulos, aunque le dio un consejo fundamental a Flash: utilizar la electricidad de la energía que genera cuando corre para vencer a un villano. Desde el comienzo se ve que tiene cierta química con Caitlin</div></td></table></center>



Hacer una tabla para bordear elementos

Lo hice para la entrada de ¿Cómo me organizo?. Mari me preguntó como hice esos cuadros y aquí les revelaré la verdad (?) ¡Es super sencillo! Iremos al ejemplo directamente


Datos de la agenda
Nombre: Agenda 2017 Mía
Editora: V&R
Tipo de agenda: Pocket
Precio: $84*
*en el precio hubo un descuento, contaré esto más abajo
Contenido
Datos personales
Calendarios 2017 y 2018
Calendario femenino
Planificación anual
Agenda diaria
Balance anual
Proyectos
Notas
Índice telefónico

Código:
<center><table><td><div style="border: pink 1px solid; height: 200px; padding: 15px; text-align: center; width: 300px;"><u><br /></u><b><span style="color: #e06666; font-family: &quot;georgia&quot; , &quot;times new roman&quot; , serif;"><u>Datos de la agenda</u></span></b><br /><b>Nombre</b>: Agenda 2017 Mía<br /><b>Editora</b>: V&amp;R<br /><b>Tipo de agenda</b>: Pocket<br /><b>Precio</b>: $84<b><span style="color: #6aa84f;">*</span></b><br /><span style="font-size: x-small;"><b><span style="color: #6aa84f;">*</span></b>en el precio hubo un descuento, contaré esto más abajo</span></div></td><td><div style="border: pink 1px solid; height: 200px; padding: 15px; text-align: center; width: 300px;"><b><span style="color: #e06666; font-family: &quot;georgia&quot; , &quot;times new roman&quot; , serif;"><u>Contenido</u></span></b><br /><div style="height: 180px; overflow: auto;">Datos personales<br />Calendarios 2017 y 2018<br />Calendario femenino<br />Planificación anual<br />Agenda diaria<br />Balance anual<br />Proyectos<br />Notas<br />Índice telefónico</div></div></td></table></center>


Este tutorial estaba en borradores desde los inicios del blog (se darán cuenta porque no lleva firma), no puedo creer que dejara que pasara tanto tiempo para hacer el tutorial. Espero que les sirva para armar cosas bonitas, que es ilimitada la imaginación 

Les mando un abrazo, que tengan una linda semana ♥

12 comentarios:

  1. ¡Hola! Yo estaba pensando en hacer tablas para mis índices, que los veo un poco desordenados, pero la verdad, es que estos días he andado con la cabeza en otras cosas para ponerme a hacer códigos —de hecho, ya estaba por usar uno que tengo guardado de mis foros de rol—.

    Muy bueno el tuto <3

    ¡Un abrazo!

    ResponderEliminar
    Respuestas
    1. ¡Hola! Si necesitas ayuda te puedo dar una mano con el HTML ^^
      ¿Foros de rol? Ohhh, vaya, ¡yo también he tenido foros de ese tipo! Que lindos tiempos ♥
      Gracias a ti por comentar, ¡besotes!

      Eliminar
  2. Hola Yuuki :3
    Vale, la verdad nunca había pensado que llevar tablas fuera algo realmente importante. Creo que es porque hasta el momento no las he necesitado. Pero se me ocurren unas cuantas cosas que podría hacer con ellas y te doy la razón, nunca está de más ir un pasito más allá y estar prevenidos por si acaso las necesitamos. Yo me llevo todo esto apuntando.
    Gracias por la entrada. Nos estamos leyendo,
    ¡Un beso! :)

    ResponderEliminar
    Respuestas
    1. ¡Ale! Ohhh, que genial que lo veas de esa manera ♥
      Es verdad que no es 100% necesario pero puede ayudar a muchas cosas, a mejorar la apariencia de entradas y demás
      Gracias por tener todo en cuenta, me hace muy feliz ^^
      Espero te sea útil
      Un abrazo enorme

      Eliminar
  3. Una entrada bastante interesante, me la guardo por lo que pueda pasar en un futuro XD gracias por dedicarle tiempony hacer esto para nosotras ^^ un saludo!!

    Interpretadoras de letras
    Desireé

    ResponderEliminar
    Respuestas
    1. ¡Gracias Desireé! A ti por haberte pasado a leer la entrada y por tenerla en cuenta
      Beso enorme

      Eliminar
  4. ¡Hola! ^^
    Pues no es algo que suela usar en mis entradas, pero te agradezco la información igualmente. Este tipo de entradas informativas están muy bien para las personas que somos un poco negadas para estas cosas xD
    De todas formas no estoy muy por la labor de toquetear los códigos html, no sea que vaya a estropear algo sin querer, jaja.

    Besos!

    ResponderEliminar
    Respuestas
    1. ¡Hola! Si, lo sé jejeje
      Depende de cada uno y el tipo de uso que tienen en el blog. Muchos no necesitarán nunca tablas, pero bueno, nunca está de más xD
      Un beso

      Eliminar
  5. Hola Yuuki!!!

    Aproveche y en la entrada de hoy puse en practica esta idea del uso de las tablas y de paso te aviso que te he nominado al reto de 3 días - 3 citas jijiji.

    Besos y gracias por la explicación que a mi me vino muy bien.

    ResponderEliminar
    Respuestas
    1. ¡Hola Yani! No se si me fije si lo usaste o no xD Ahora me paso para ver que tal
      ¡Gracias por nominarme! Ya lo hice hace nada, así que lo dejaré para más adelante
      Besotes enormes

      Eliminar
  6. ¡Holi! ¡SANTA MADRE DE HARRY POTTER! Es precioso todo esto de las tablas *-* Así que guardo tu enlace como resource para futuras aplicaciones. Y de paso, me quedo a vagabundear en tu chulísimo blog.
    Besitos *3*

    ResponderEliminar
    Respuestas
    1. ¡HOla Ana! Me hizo mucha gracia tu comentario jajajaja me hiciste el día
      Espero te sirva el tutorial, las tablas reinarán y construirán un imperio (?)
      ¡Un beso!

      Eliminar

¡Comenta! Tus opiniones y sugerencias son cosas que ayudan a crecer al blog ♥
Recuerda que si deseas que nos sigamos mutuamente, está la entrada de Seamos Seguidores para ello