Definición de tablas en un post

[Teruteru314]

Siempre que sea necesario presentar cualquier grupo de datos en forma tabular (como en este post), es conveniente crear una Tabla como parte del texto del mensaje.

Inicialmente parece complejo, pero si tenemos los datos ya ordenados, es muuucho más fácil de lo que aparenta.
El problema que tenemos es que como el editor de los mensajes es puro ASCII, definir una tabla es VISUALMENTE descorazonador. PEro si se hace poco a poco no hay problemas.

Las etiquetas que definen la tabla se pueden escribir, pero hay 3 botones en la barra de herramientas que está justo encima de los emoticonos que nos facilitan mucho la tarea.

Son estos:



La organización de una tabla debe ser siempre la misma:

Inicio de Tabla
     Inicio de Fila
           Inicio de Celda
                 Contenido de la celda con todos sus atributos
           Fin de Celda
     Fin de Fila
     .....
     Inicio de Fila
           Inicio de Celda
                 Contenido de la celda con todos sus atributos
           Fin de Celda
     Fin de Fila
Fin de Tabla

Estos inicios y fin de cada entidad se "marcan" (de alli lo de "markup language" del HTML) con etiquetas en puro texto ASCII, y lo que hacen los botones de arriba es insertar un par de dichas etiquetas.
Las etiquetas son:  
    [ T a b l e ]  [ / T a b l e ]           para inicio y fin de tabla
    [ t r ]           [ / t r ]                    para inicio y fin de fila
    [ t d ]          [ / t d ]                   para inicio y fin de celda
 
(los espacios intermedios en las etiquetas los puse para que NO fueran interpretadas por el editor)

Las etiquetas siempre deben ir por parejas, y siempre balanceadas. Funcionan en forma similar a los paréntesis en las fórmulas matemáticas.

Hay dos formas ordenadas para hacernos la vida más fácil al crear una tabla: de afuera hacia adentro, o de adentro hacia afuera. Es cuestión de gusto personal, pero yo creo que la más fácil es de afuera hacia adentro.

La diferencia está en que, cuando lo hacemos de afuera hacia adentro, comenzamos con la definición más externa, o sea, la de la tabla. A la que le agregamos la primera fila, y luego a ésta le ponemos todas las celdas que la componen. Y así sucesivamente, adicionando una nueva fila después de haber terminado con todas las celdas de la fila anterior.

En el caso de adentro hacia afuera, comenzamos con una estructura básica de como quedará la tabla final, poniendo prmero el contenido de todas las celdas y filas en su lugar, y luego vamos insertando las etiquetas "alrededor" de cada celda. Esto se hace fácil al seleccionar el contenido correspondiente y pulsando el botón del caso, el editor automáticamente "rodea" lo seleccionado con las etiquetas. Este sistema, si bien es teóricamente más simple, una vez que empezamos a marcar, las cosas se salen de la estructura visual inicial y hay que prestar muuucha atención para no liarse.

Este tipo de definición


Produce esta tabla:

celda 1	Celda 2	Celda 3
celda 4		Celda 6
celda 7	Celda 8	Celda 9

Notad la inclusión de atributos para las celdas 2 y 9 y cómo dejar una celda vacía. Si no ponéis el par de etiquetas correspondiente, la Celda 6 sería puesta y alineada debajo de la Celda 2, sin dejar hueco ninguno.

Haciendo una definición muy similar, pero más fácil de visualizar y/o editar como esta:


... conseguimos esta tabla:

Celda 1	Celda 2	Celda 3
Celda 4	Celda 5	Celda 6

Como véis, el órden en que van las etiquetas es exactamente el mismo; el efecto final también. Pero el segundo "estilo" es mucho más amigable a la hora de editar o corregir la tabla.

Evidentemente hay mucho más que decir acerca de las tablas en HTML, pero esto es un primer acercamiento que os permitirá experimentar y sufrir en carne propia todas las peculiaridades del intérprete HTML específico al que apuntéis.

Por cierto, hay algunos detalles que vale la pena mencionar:

- el tratamiento de los espacio en blanco por el intérprete HTML del foro es cuando menos ... ingenioso, ocurrente e imprevisible.
- para solventar la "peculiaridad" anterior, no olvidéis el botón "Previsualizar" que está en el borde inferior del editor; es quizás el mejor invento del editor del SMF
- como el trabajo de crear un post es a veces lento, trabajoso y /o lleva mucho tiempo, si el post va a ser largo (como este) os recomiendo tener siempre abierto a mano el Block de Notas (o Notepad), con una copia cortada y pegada de lo que llevamos hecho hasta el momento, y volver a cortar y pegar cada 3 o 5 minutos o justo antes de Previsualizar o Guardar. No sería la primera vez que por un error de conexión, o un error al probar se nos fuera todo al garete y habría que empezar de nuevo. Otro gran invento ese del block de notas!  

Achetemeleados saludos

[jfz62]

  OK!!    

  Pero es muy duro para quien no se maneje en html, que creo que sera la mayoría..., yo estoy acostumbrado a tratar la tablas en la Web pero creía que seria mas fácil.

 El programa en que se basa este foro (SMF) le falta poco para sacar una V2 final en donde los mensajes serán "lo que veo escribiendo es lo que saldrá", y supongo que de alguna manera sera mas fácil el tema de las tablas.

  
  Y por cierto, ya hace tiempo que las ultimas tendencias en creación Web (con CCS2 y 3) destierran completamente el uso de las tablas para evitar las continuas llamadas servidor-cliente y acelerar la carga de las paginas

  - como el trabajo de crear un post es a veces lento, trabajoso y /o lleva mucho tiempo, si el post va a ser largo (como este) os recomiendo tener siempre abierto a mano el Block de Notas (o Notepad), con una copia cortada y pegada de lo que llevamos hecho hasta el momento, y volver a cortar y pegar cada 3 o 5 minutos o justo antes de Previsualizar o Guardar. No sería la primera vez que por un error de conexión, o un error al probar se nos fuera todo al garete y habría que empezar de nuevo

  Je, je..  Profesionale!!!!  ya me ha pasado alguna vez..., y tengo siempre desde las primeras versiones del "ventanas" un enlace directo al bloc de notas


  Escarmentados Saludos

[AHMS]

Hola (Alvaro + Jorge)         

Me ha gustado mucho el asunto y como lo ha desarrollado Alvaro         
y por supuesto, ubicado en el lugar adecuado...
 
"Tutoriales de uso del Portal/Foro"
 
Pués ya sabemos como confeccionar una tabla, cuando lo necesitemos.
Saludos
Antonio

[gma]

hola Teru²
   gracias por el curso  magistral 

parece complejo... 

conclusión : evitar 'presentar datos en forma tubular' y si hace falta añadir un documento Excel 

excellentisimos saludos
Gonzalo

[Victory2K]

Bien el tutorial de HTML!!! ya llegará el caso de hacer la prueba. Sin embargo ....

conclusión : evitar 'presentar datos en forma tubular' y si hace falta añadir un documento Excel 

... La naturaleza siempre se abre paso ! 

Esperemos la nueva versión del Foro !  a ver que lindas novedades trae.

WorkAroundicos saludos !

[Teruteru314]

conclusión : evitar 'presentar datos en forma tubular' y si hace falta añadir un documento Excel

Lo de "forma TUBULAR" viene por aquello de "datos por un tubo" ?

 

[gma]

conclusión : evitar 'presentar datos en forma tubular' y si hace falta añadir un documento Excel

Lo de "forma TUBULAR" viene por aquello de "datos por un tubo" ?
 

lapsus calami habemus....     ¡dixit tabular!

[AHMS]

Hola Gonzalo:         

Estaba perfectamente claro, lo que querías decir, pero, el "individúo" que no quiero nombrar, solo te adjunto su fotografía, cuando anda (fijate en su andar, va en plan vacilón), mirando de izquierda a derecha, de forma muy rápida y al menor movimiento ¡zas! lanza su "pico" y se lo come.
 
Saludos
Antonio



p. d.
fijate como lo observo, no debemos quitarle el ojo de encima.