[Personaliza tu tabla] Guía & Códigos Básicos

Aug 22, 2011 12:21

Hoy es el quinto aniversario de 30vicios y como quienes siguen 30viciossemanal ya saben, además de las dos nuevas tablas prometimos un pequeño regalo... y aquí está~

Las tablas suelen ser siempre iguales: columnas que organizan los temas de una forma bastante simple y poco original.

Editarlas para que se vean diferentes puede ser aburrido y hasta engorroso, pero... ¿no les gustaría poder hacerlo sin tener que esforzarse mucho?

Pues como regalo por apoyar 30vicios por cinco años, debajo del cut hay una guía para que puedan personalizarlas a su gusto~


Primero que todo, recuerden que las modificaciones deben hacerse posteando en html.

¿Por qué?

Porque al postear o editar algo en texto enriquecido/Rich text es común que el resultado no sea vea como debería y cada vez que hay un cambio en LJ algo suele fallar en el rich text: a veces los cuts de las entradas hechas con rich text desaparecen, otras las entradas se ven mal y otras ocurren otros problemas varios que son más complicados de arreglar de lo que parecen.

Pero no se preocupen, que al menos las modificaciones básicas se pueden hacer sin ser expertos en html ya que abajo encontrarán los códigos ya listos para que puedan hacerlo con facilidad.

  • Los cambios básicos: Columnas
Comencemos con algo básico: cambiando el número de columnas:

Ya que el número de temas de todas las tablas es el mismo, todas pueden ser editadas para que tengan 1, 2, 3, 5 o 6 columnas.

Quizás las tablas con temas de una palabra se vean mejor cinco o seis columnas, mientras las que tienen frases pueden quedar mejor con menos columnas. ¿O no? Para que les sea más fácil decidir, aquí hay algunos ejemplos:

1 Columna:

01. Inicio.02. Lluvia.03. Reglas.04. Café.

01. Todos mienten; pero no importa porque nadie escucha.02. Todas las cosas buenas de la vida son ilegales, inmorales o hacen engordar.
03. El único día que uno vendería su alma por cualquier cosa, sobran las almas.04. Cuando marca un número equivocado, nunca se obtiene la señal de ocupado.

2 Columnas:

01. Inicio.02. Lluvia.03. Reglas.04. Café.

01. Todos mienten; pero no importa porque nadie escucha.02. Todas las cosas buenas de la vida son ilegales, inmorales o hacen engordar.
03. Uno debería preferir siempre lo imposible probable que lo improbable posible.04. La manera más rápido de encontrar algo es empezar a buscar otra cosa.

3 Columnas:

01. Inicio.02. Lluvia.03. Reglas.04. Café.05. *06. Escape.

01. Todos mienten; pero no importa porque nadie escucha.02. Todas las cosas buenas de la vida son ilegales, inmorales o hacen engordar.03. El único día que uno vendería su alma por cualquier cosa, sobran las almas.
04. Cuando marca un número equivocado, nunca se obtiene la señal de ocupado.05. Uno debería preferir siempre lo imposible probable que lo improbable posible.06. La manera más rápido de encontrar algo es empezar a buscar otra cosa.

5 Columnas:

01. Inicio.02. Lluvia.03. Reglas.04. Café.05. *06. Escape.07. Celos.08. Religión.09. Piano.10. *

01. Todos mienten; pero no importa porque nadie escucha.02. Todas las cosas buenas de la vida son ilegales, inmorales o hacen engordar.03. El único día que uno vendería su alma por cualquier cosa, sobran las almas.04. Cuando marca un número equivocado, nunca se obtiene la señal de ocupado.05. Uno debería preferir siempre lo imposible probable que lo improbable posible.
06. La manera más rápido de encontrar algo es empezar a buscar otra cosa.07. No hay nada tan pequeño que no pueda estallar fuera de proporción.08. La sabiduría consiste en saber cuando evitar la perfección.09. Hay dos clases de personas, las que se preocupan de las cosas y las que se ocupan de ellas.10. Suficiente investigación respaldará cualquier teoría.

6 Columnas:

01. Inicio.02. Lluvia.03. Reglas.04. Café.05. *06. Escape.
07. Celos.08. Religión.09. Piano.10. *11. Caramelo.12. Espinas.

01. Todos mienten; pero no importa porque nadie escucha.02. Todas las cosas buenas de la vida son ilegales, inmorales o hacen engordar.03. El único día que uno vendería su alma por cualquier cosa, sobran las almas.04. Cuando marca un número equivocado, nunca se obtiene la señal de ocupado.05. Uno debería preferir siempre lo imposible probable que lo improbable posible.06. La manera más rápido de encontrar algo es empezar a buscar otra cosa.
07. No hay nada tan pequeño que no pueda estallar fuera de proporción.08. La sabiduría consiste en saber cuando evitar la perfección.09. Hay dos clases de personas, las que se preocupan de las cosas y las que se ocupan de ellas.10. Suficiente investigación respaldará cualquier teoría.11. Nadie le escuchará hasta que cometa un error.12. La experiencia es algo que no se obtiene sino hasta después que se necesita.

Pero hay otros cambios simples que pueden modificar la tabla por completo, como separar el número del tema y el tema mismo:

Versión 1 (la usual):

01. Inicio.02. Lluvia.03. Reglas.04. Café.05. *06. Escape.07. Celos.08. Religión.09. Piano.10. *

01. Todos mienten; pero no importa porque nadie escucha.02. Todas las cosas buenas de la vida son ilegales, inmorales o hacen engordar.03. El único día que uno vendería su alma por cualquier cosa, sobran las almas.06. Cuando marca un número equivocado, nunca se obtiene la señal de ocupado.07. Uno debería preferir siempre lo imposible probable que lo improbable posible.08. La manera más rápido de encontrar algo es empezar a buscar otra cosa.

Versión 2:

01.Inicio.02.Lluvia.03.Reglas.04.Café.05.*
06.Escape.07.Celos.08.Religión.09.Piano.10.*

01.Todos mienten; pero no importa porque nadie escucha.02.Todas las cosas buenas de la vida son ilegales, inmorales o hacen engordar.03.El único día que uno vendería su alma por cualquier cosa, sobran las almas.
06.Cuando marca un número equivocado, nunca se obtiene la señal de ocupado.07.Uno debería preferir siempre lo imposible probable que lo improbable posible.08.La manera más rápido de encontrar algo es empezar a buscar otra cosa.

Versión 3:

01.02.03.04.05.Inicio.Lluvia.Reglas.Café.*
06.07.08.09.10.Escape.Celos.Religión.Piano.*

01.02.03.Todos mienten; pero no importa porque nadie escucha.Todas las cosas buenas de la vida son ilegales, inmorales o hacen engordar.El único día que uno vendería su alma por cualquier cosa, sobran las almas.
06.07.08.Cuando marca un número equivocado, nunca se obtiene la señal de ocupado.Uno debería preferir siempre lo imposible probable que lo improbable posible.La manera más rápida de encontrar algo es empezar a buscar otra cosa.

  • Códigos
¿Ya se decidieron por el número de columnas y el estilo que quieren? Entonces aquí están los códigos para que puedan usarlo fácilmente~

Aunque los ejemplos fueron hechos usando algunos temas de la tabla Básica y la tabla Leyes de Murphy, los códigos están en blanco para que añadan el tema que corresponde según la tabla que hayan pedido y quieren modificar.

1 Columna (versión 1)































01. Tema.
02. Tema.
03. Tema.
04. Tema.
05. Tema
06. Tema.
07. Tema.
08. Tema.
09. Tema.
10. Tema
11. Tema.
12. Tema.
13. Tema.
14. Tema.
15. Tema
16. Tema.
17. Tema.
18. Tema.
19. Tema.
20. Tema
21. Tema.
22. Tema.
23. Tema.
24. Tema.
25. Tema
26. Tema.
27. Tema.
28. Tema.
29. Tema.
30. Tema


1 Columna (versión 2)































01.Tema.
02.Tema.
03.Tema.
04.Tema.
05.Tema
06.Tema.
07.Tema.
08.Tema.
09.Tema.
10.Tema
11.Tema.
12.Tema.
13.Tema.
14.Tema.
15. Tema
16.Tema.
17.Tema.
18.Tema.
19.Tema.
20. Tema
21.Tema.
22.Tema.
23.Tema.
24.Tema.
25. Tema
26.Tema.
27.Tema.
28.Tema.
29.Tema.
30. Tema


1 Columna (versión 3)





























































01.
Tema.
02.
Tema.
03.
Tema.
04.
Tema.
05.
Tema
06.
Tema.
07.
Tema.
08.
Tema.
09.
Tema.
10.
Tema
11.
Tema.
12.
Tema.
13.
Tema.
14.
Tema.
15.Tema
Tema
16.
Tema.
17.
Tema.
18.
Tema.
19.
Tema.
20.
Tema
21.
Tema.
22.
Tema.
23.
Tema.
24.
Tema.
25.
Tema
26.
Tema.
27.
Tema.
28.
Tema.
29.
Tema.
30.
Tema


2 Columnas (versión 1)













































01. Tema.02. Tema.
03. Tema.04. Tema.
05. Tema06. Tema.
07. Tema.08. Tema.
09. Tema.10. Tema
11. Tema.12. Tema.
13. Tema.14. Tema.
15. Tema16. Tema.
17. Tema.18. Tema.
19. Tema.20. Tema
21. Tema.22. Tema.
23. Tema.24. Tema.
25. Tema26. Tema.
27. Tema.28. Tema.
29. Tema.30. Tema


2 Columnas (versión 2)













































01.Tema.02.Tema.
03.Tema.04.Tema.
05.Tema06.Tema.
07.Tema.08.Tema.
09.Tema.10.Tema
11.Tema.12.Tema.
13.Tema.14.Tema.
15.Tema16.Tema.
17.Tema.18.Tema.
19.Tema.20.Tema
21.Tema.22.Tema.
23.Tema.24.Tema.
25.Tema26.Tema.
27.Tema.28.Tema.
29.Tema.30.Tema


2 Columnas (versión 3)

























































































01.02.
Tema.Tema.
03.04.
Tema.Tema.
05.06.
TemaTema.
07.08.
Tema.Tema.
09.10.
Tema.Tema
11.12.
Tema.Tema.
13.14.
Tema.Tema.
15.16.
TemaTema.
17.18.
Tema.Tema.
19.20.
Tema.Tema
21.22.
Tema.Tema.
23.24.
Tema.Tema.
25.26.
TemaTema.
27.28.
Tema.Tema.
29.30.
Tema.Tema


3 Columnas (versión 1)








































01. Tema.02. Tema.03. Tema.
04. Tema.05. Tema06. Tema.
07. Tema.08. Tema.09. Tema.
10. Tema11. Tema.12. Tema.
13. Tema.14. Tema.15. Tema
16. Tema.17. Tema.18. Tema.
19. Tema.20. Tema21. Tema.
22. Tema.23. Tema.24. Tema.
25. Tema26. Tema.27. Tema.
28. Tema.29. Tema.30. Tema


3 Columnas (versión 2)








































01.Tema.02.Tema.03.Tema.
04.Tema.05.Tema06.Tema.
07.Tema.08.Tema.09.Tema.
10.Tema11.Tema.12.Tema.
13.Tema.14.Tema.15.Tema
16.Tema.17.Tema.18.Tema.
19.Tema.20.Tema21.Tema.
22.Tema.23.Tema.24.Tema.
25.Tema26.Tema.27.Tema.
28.Tema.29.Tema.30.Tema


3 Columnas (versión 3)

















































































01.02.03.
Tema.Tema.Tema.
04.05.06.
Tema.TemaTema.
07.08.09.
Tema.Tema.Tema.
10.11.12.
TemaTema.Tema.
13.14.15.
Tema.Tema.Tema
16.17.18.
Tema.Tema.Tema.
19.20.21.
Tema.TemaTema.
22.23.24.
Tema.Tema.Tema.
25.26.27.
TemaTema.Tema.
28.29.30.
Tema.Tema.Tema


5 Columnas (versión 1)




































01. Tema.02. Tema.03. Tema.04. Tema.05. Tema
06. Tema.07. Tema.08. Tema.09. Tema.10. Tema
11. Tema.12. Tema.13. Tema.14. Tema.15. Tema
16. Tema.17. Tema.18. Tema.19. Tema.20. Tema
21. Tema.22. Tema.23. Tema.24. Tema.25. Tema
26. Tema.27. Tema.28. Tema.29. Tema.30. Tema


5 Columnas (versión 2)




































01.Tema.02.Tema.03.Tema.04.Tema.05.Tema
06.Tema.07.Tema.08.Tema.09.Tema.10.Tema
11.Tema.12.Tema.13.Tema.14.Tema.15.Tema
16.Tema.17.Tema.18.Tema.19.Tema.20.Tema
21.Tema.22.Tema.23.Tema.24.Tema.25.Tema
26.Tema.27.Tema.28.Tema.29.Tema.30.Tema


5 Columnas (versión 3)








































































01.02.03.04.05.
Tema.Tema.Tema.Tema.Tema
06.07.08.09.10.
Tema.Tema.Tema.Tema.Tema
11.12.13.14.15.
Tema.Tema.Tema.Tema. Tema
16.17.18.19.20.
Tema.Tema.Tema.Tema.Tema
21.22.23.24.25.
Tema.Tema.Tema.Tema.Tema
26.27.28.29.30.
Tema.Tema.Tema.Tema.Tema


6 Columnas (versión 1)



































01. Tema.02. Tema.03. Tema.04. Tema.05. Tema06. Tema.
07. Tema.08. Tema.09. Tema.10. Tema11. Tema.12. Tema.
13. Tema.14. Tema.15. Tema16. Tema.17. Tema.18. Tema.
19. Tema.20. Tema21. Tema.22. Tema.23. Tema.24. Tema.
25. Tema26. Tema.27. Tema.28. Tema.29. Tema.30. Tema


6 Columnas (versión 2)




































01.Tema.02.Tema.03.Tema.04.Tema.05.Tema06.Tema.
07.Tema.08.Tema.09.Tema.10.Tema11.Tema.12.Tema.
13.Tema.14.Tema.15.Tema16.Tema.17.Tema.18.Tema.
19.Tema.20.Tema21.Tema.22.Tema.23.Tema.24.Tema.
25.Tema26.Tema.27.Tema.28.Tema.29.Tema.30.Tema


6 Columnas (versión 3)






































































01.02.03.04.05.06.
Tema.Tema.Tema.Tema.TemaTema.
07.08.09.10.11.12.
Tema.Tema.Tema.TemaTema.Tema.
13.14.15.16.17.18.
Tema.Tema.TemaTema.Tema.Tema.
19.20.21.22.23.24.
Tema.TemaTema.Tema.Tema.Tema.
25.26.27.28.29.30.
TemaTema.Tema.Tema.Tema.Tema


  • Otro cambio: los bordes
Tal vez eso no les parece suficiente, pero hay algo sencillo que también puede modificar apariencia de las tablas por completo: los bordes.

Para cambiarlos deben fijarse en el comienzo de los códigos de la tabla y modificar el número que aparecen en border=1

Con 0 obtenemos esto:

01. Inicio.02. Lluvia.03. Reglas.04. Café.05. *06. Escape.

Y con 2 esto:

01. Inicio.02. Lluvia.03. Reglas.04. Café.05. *06. Escape.

Y con 3 esto:

01. Inicio.02. Lluvia.03. Reglas.04. Café.05. *06. Escape.

Hay otros cambios un poco más avanzados, como ampliar las celdas de cada columna y obtener algo como esto:

01. Inicio.02. Lluvia.03. Reglas.04. Café.05. *06. Escape.
Para esto, lo que hicimos fue añadir al código: cellpadding="4px" y quedó así:


Y también podemos aumentar el espacio entre los bordes y quedar con algo así:

01. Inicio.02. Lluvia.03. Reglas.04. Café.05. *06. Escape.
Para esto añadimos al código: cellspacing="3"


Y si los mezclamos obtenemos esto:

01. Inicio.02. Lluvia.03. Reglas.04. Café.05. *06. Escape.


Modificando los números podemos obtener diferentes resultados, así que pueden probar cambiándolos hasta que quede como prefieren~

  • Otros cambios visuales
Quizás para algunos todo lo anterior sigue sin ser suficiente, así que aquí hay otros detalles que pueden ser modificados tanto en la tabla misma como en el texto de esta~

  • Lo básico: negrillas, subrayado y cursivas
01. Inicio.02. Lluvia.03. Reglas.04. Café.

Para escribir en negrilla
Para escribir en negrilla

Para escribir subrayado
Para escribir subrayado

Para escribir en cursiva
Para escribir en cursiva

Cambiar el color, el estilo y tamaño de la letra también es posible, pero no es algo recomendable ni en tablas ni en entradas.
¿Por qué?
Porque en el caso de que cambien el estilo de su LJ esos cambios que en el momento se veían bien, después pueden quedar imposibles de leer.

Por ejemplo: Si usasen letra azul y en algún momento cambiasen el estilo de su LJ por uno cuyo fondo es de un azul similar, lo que escribieron con ese azul ya no será legible.

  • Algo más avanzado: alineación de la letra
01. Todos mienten; pero no importa porque nadie escucha.02. Todas las cosas buenas de la vida son ilegales, inmorales o hacen engordar.
03. El único día que uno vendería su alma por cualquier cosa, sobran las almas.04. Cuando marca un número equivocado, nunca se obtiene la señal de ocupado.
Centrada



01. Todos mienten; pero no importa porque nadie escucha.02. Todas las cosas buenas de la vida son ilegales, inmorales o hacen engordar.
03. El único día que uno vendería su alma por cualquier cosa, sobran las almas.04. Cuando marca un número equivocado, nunca se obtiene la señal de ocupado.


A la derecha



01. Todos mienten; pero no importa porque nadie escucha.02. Todas las cosas buenas de la vida son ilegales, inmorales o hacen engordar.
03. El único día que uno vendería su alma por cualquier cosa, sobran las almas.04. Cuando marca un número equivocado, nunca se obtiene la señal de ocupado.

En este caso podemos especificar para toda una línea (tr align="right"o tr align="center") o en cada celda cómo queremos que esté alineada la letra (usando td align="center" o td align="right"), por lo que incluso podemos entremezclarlo.

01. Todos mienten; pero no importa porque nadie escucha.
02. Todas las cosas buenas de la vida son ilegales, inmorales o hacen engordar.
03. El único día que uno vendería su alma por cualquier cosa, sobran las almas.
04. Cuando marca un número equivocado, nunca se obtiene la señal de ocupado.



01. Todos mienten; pero no importa porque nadie escucha.02. Todas las cosas buenas de la vida son ilegales, inmorales o hacen engordar.
03. El único día que uno vendería su alma por cualquier cosa, sobran las almas.04. Cuando marca un número equivocado, nunca se obtiene la señal de ocupado.


  • Otro cambio avanzado: el ancho de las celdas
01. Inicio.02. Lluvia.03. Reglas.04. Café.05. *06. Escape.






01. Inicio.02. Lluvia.03. Reglas.
04. Café.05. *06. Escape.

Normalmente el ancho de las celdas depende de lo que hay en ellas, pero con esto podemos hacer que éste se mantenga del tamaño que queramos.

Como pueden ver sólo es necesario añadir width=100 (un número diferente hace que el tamaño varíe) a las celdas de la parte superior, las demás copian el tamaño de éstas.

  • Algo que requiere más html: cambiando el color de fondo de las celdas
01. Inicio.02. Lluvia.03. Reglas.04. Café.05. *06. Escape.






01. Inicio.02. Lluvia.03. Reglas.
04. Café.05. *06. Escape.

Como pueden ver sólo lo único que hay que hacer para añadir el color de fondo es incluir en el código de la celda bgcolor="(aquí va el código del color elegido)"

Como el color puede ser especificado en cada celda también es posible mezclarlos:
01.02.03.Inicio.Lluvia.Reglas.04.05.06.Café.*Escape.














01.02.03.
Inicio.Lluvia.Reglas.
04.05.06.
Café.*Escape.


Al cambiar el color de fondo de una celda éste no cambiará así editen el estilo de su LJ, pero recuerden que el color de la letra sí está sujeto al estilo que tienen (es decir: si la letra del estilo de su LJ es negra se verá negra, pero si lo cambian por uno con letra blanca ésta se verá blanca).

Por eso en este caso si puede ser buena idea cambiar también el color de la letra para que ésta siempre quede legible en el color de la celda.

Para que la letra siempre sea negra.
Para que la letra siempre sea negra.

Usando esta página pueden conseguir el código del color que quieran usar para la letra o el fondo~

Y eso es todo por ahora~

¿Tienen alguna duda? ¿Intentaron personalizar su tabla, algo quedó mal y necesitan ayuda para arreglarlo?
No duden en preguntar aquí~

!admin: tutorial

Previous post Next post
Up