Existen varias técnicas avanzadas de formato de tablas para mejorar la visualización o edición de las wikitablas en Wikipedia. La mayoría de los consejos implican el uso de editores de texto estándar. Si bien existen algunos paquetes de software especiales que permiten realizar ediciones personalizadas, normalmente no están disponibles cuando se viaja a otras computadoras para editar wikis.
Algunas técnicas aquí van más allá de los conceptos básicos descritos en la página de ayuda de Wikipedia " Ayuda:Tabla ", que explica casi todas las opciones básicas de formato de tabla y también muestra ejemplos de cada una.
La forma más rápida de crear varias columnas de texto es la siguiente:
{| relleno de celda = 5 | AA || BB || CC |- | DD || EE.UU. || FF |} Sin embargo, los lectores suelen preferir una lista de datos vertical, en cada columna.
Se puede agregar un borde con style="border:1px solid #BBB":
{| cellpadding = 5 style = "border:1px solid #BBB" | AA || CC || EE |- | BB || DD || FF |} Tenga en cuenta que el color de fondo predeterminado es más claro, por lo que se puede especificar un tono de azul verdoso claro en cada fila, utilizando el código de color hexadecimal "#fafeff" (o "#FAFEFF" ), aunque el color puede no importar en listas grandes:
{| cellpadding = 5 style = "border:1px solid #BBB" |- bgcolor = "#fafeff" | AA || CC || EE |- bgcolor = "#fafeff" | BB || DD || FF |} El wikitexto de cualquier fila se puede comprimir en una sola línea uniendo las columnas con barras dobles "||" entre ellas y terminando cada fila con " <tr>".
:: Ejemplo de fila 1: | ''fmtspec'' |AA|| ''fmtspec'' |CC|| ''fmtspec'' |EE < tr > :: Ejemplo de fila 2: | ''fmtspec'' |BB|| ''fmtspec'' |DD|| ''fmtspec'' |FF < tr >Esto se hace a veces porque puede ser más fácil reorganizar o previsualizar filas que están codificadas como líneas de texto separadas. Varias columnas se unen mediante barras dobles "||" entre ellas, mientras que cada barra simple "|" a lo largo de una línea permite un especificador de formato antes de cada elemento de datos que termina en una barra doble. Sin embargo, el código de la wikitable para una nueva fila, barra-guión ("|-"), debe omitirse agregando " <tr>" al final de la fila anterior que está encima. La fila final no necesita un " <tr>" final.
Una tabla puede utilizarse para envolver una imagen, de modo que la tabla pueda flotar hacia el centro de la página (por ejemplo, utilizando: style="float: right;"). Sin embargo, los márgenes, el borde y el tamaño de fuente de la tabla deben configurarse con precisión para que coincidan con la visualización de una imagen típica. El parámetro de especificación de imagen "thumb|" (aunque la miniatura se convierte automáticamente en el ancho que prefiera el usuario) fuerza un margen izquierdo amplio que comprime el texto cercano, por lo que se puede agregar el parámetro "center|" para suprimir el relleno del margen izquierdo. Sin embargo, "center" a veces empuja el título a una segunda línea (debajo de un cuadro centrado "[]"), por lo que se puede omitir "thumb|" y simplemente codificar el tamaño de la imagen, agregando un borde gris (#BBB). Usando parámetros precisos para que coincidan con otras imágenes, una tabla de imágenes flotantes se puede codificar de la siguiente manera:
{| style = "float:right; border:1px solid #BBB;margin:.46em 0 0 .2em" |- style = "font-size:86%" | style = "vertical-align:top" |[[ Archivo : DuraEuropos-TempleOfBel.jpg | 180px ]] <!-- --> < br /> Templo de [[ Bel (mitología) | Bel ]] (flotante). |} El texto dentro de la tabla flotante tiene un tamaño de estilo="font-size:86%" (similar al de los títulos de las imágenes normales). Esa tabla de imágenes flotantes hace flotar un cuadro de imagen típico, pero también permite ajustar el margen izquierdo de la imagen (ver el ejemplo de templo flotante a continuación).
El texto del título se puede omitir o simplemente quitar el parámetro "thumb|" para que el título quede oculto hasta que se muestre al pasar el ratón por encima. Lamentablemente, el parámetro "thumb|" (usado para mostrar el título) también controla la visualización automática de las miniaturas para cambiar el tamaño de las imágenes según las preferencias del usuario (el tamaño predeterminado de las miniaturas era 180 px, luego, a partir de 2009, pasó a ser 220 px). En marzo de 2010, no era posible tener un tamaño automático de las miniaturas y ocultar el título al mismo tiempo: en su lugar, el parámetro "thumb|" activa ambas acciones y obliga a que el título se muestre debajo de la imagen.
Un conjunto de imágenes con el parámetro "left|" obtendrá un amplio margen en el lado derecho (margen opuesto del parámetro "right|"), por lo que flotar hacia la izquierda requeriría una imagen configurada como "center|" dentro de una tabla con estilo="float:left; margin:0.46em 0.2em".
Recuerde que, fuera de una tabla de imágenes, el parámetro "right|" hace que una imagen se alinee (ya sea) por encima o por debajo de un cuadro de información, pero no flotará junto a este. Por ese motivo, muchas imágenes junto a un cuadro de información suelen configurarse como "left|" para alinearse a lo largo del margen izquierdo, en lugar de flotar en el centro de la página.
Tenga en cuenta el orden de precedencia desde el margen derecho: primero, vienen los cuadros de información o imágenes que usan "right|", luego vienen las tablas flotantes y, por último, se ajustará cualquier texto que aún pueda caber. Si la primera palabra de texto es demasiado larga, no cabrá texto para completar el lado izquierdo, así que tenga cuidado de no crear un "margen izquierdo irregular" cuando no quede suficiente espacio para que el texto quepa junto a las tablas flotantes.
Si se apilan varias tablas de imágenes individuales, flotarán para alinearse a lo largo de la página, según el ancho de la misma. El texto se comprimirá para permitir que quepan tantas tablas flotantes como sea posible, ya que se alineará automáticamente y, luego, se ajustará el texto (que aún pueda caber) en el lado izquierdo.
Esta función de alineación automática se puede utilizar para crear una "galería flotante" de imágenes: un conjunto de 20 tablas flotantes se ajustará (hacia atrás, de derecha a izquierda) como si cada tabla fuera una palabra de texto que se ajustará a lo largo y ancho de la página. Para ajustar en la dirección típica (ajustando de izquierda a derecha), defina todas esas tablas flotantes como tablas del lado izquierdo utilizando el parámetro superior style="float:left; margin:0.46em 0.2em". Las imágenes flotantes múltiples permiten una composición tipográfica más flexible de imágenes alrededor del texto.
Las imágenes dentro de una wikitable se pueden desplazar insertando espacios indivisibles ( ) antes o después del código de la imagen (por ejemplo, [[File:...]]) . Sin embargo, el centrado automático simplemente requiere el uso del |centerparámetro (consulte WP:Sintaxis de imagen extendida#Ubicación ).
En el siguiente ejemplo, observe cómo Col2 usa |center, pero Col3 usa :
{|clase="wikitabla" |- |<!--Col1-->[[Archivo:Domtoren vanaf Brigittenstraat.jpg|299x125px]] |<!--Col2-->[[Archivo:Utrecht 003.jpg|299x125px| centro ]] |<!--Col3--> [[Archivo:Uitzicht--Domtoren.jpg|299x125px]] |- |<!--Col1-->Torre Dom desde Brigittenstraat |<!--Col2-->Patio del claustro de la iglesia de Utrecht |<!--Col3--> <small>Vista desde el campanario</small> |}La codificación anterior genera la tabla a continuación: observe que la imagen del jardín del medio está centrada (pero no la imagen de la izquierda) y la imagen de la derecha tiene 2 espacios antes de "Ver...", para dar una aproximación del centrado:
Tenga en cuenta también que la etiqueta <small>...</small>ha reducido el tamaño del texto del título. Las fuentes también se pueden dimensionar por porcentaje ( style="font-size: 87%;"), donde el tamaño porcentual exacto que se muestra depende de los distintos tamaños permitidos para una fuente en particular; el navegador se aproximará al tamaño más cercano posible.
| style="font-size: 87%;" | Vista desde el campanario
El atributo de columna, arriba, se utiliza style=para establecer el tamaño de fuente para el título, después del segundo símbolo de barra vertical.
A font-size: 65%;es excesivamente pequeño, mientras que font-size: 87%;es una fuente de tamaño mediano, ligeramente más grande que la producida por la etiqueta <small>.
Nota: Este ejemplo no es accesible y se debe evitar en la medida de lo posible. Por ejemplo, las tablas anidadas (tablas dentro de tablas) se deben separar en tablas distintas cuando sea posible.
A continuación se muestra un ejemplo más avanzado, que muestra algunas opciones más disponibles para crear tablas.
Los usuarios pueden jugar con estas configuraciones en sus propias tablas para ver qué efecto tienen. No todas estas técnicas pueden ser apropiadas en todos los casos; el hecho de que se puedan agregar fondos de colores, por ejemplo, no significa que siempre sea una buena idea. Intente mantener el marcado en las tablas relativamente simple; recuerde que otras personas también editarán el artículo. Sin embargo, este ejemplo debería darle una idea de lo que es posible.
Wikitexto:
Texto antes de la tabla centrada...{| style = "border: 1px negro sólido; espacio entre bordes: 0; margen: 1em automático;" |+ '''Una tabla de ejemplo'''|-! style = "border: 1px solid black; padding: 5px; background: #efefef;" | Primer encabezado ! colspan = "2" style = "border: 1px solid black; padding: 5px; background: #ffdead;" | Segundo encabezado |-| estilo = "borde: 1px negro sólido; relleno: 5px;" | Superior izquierda | estilo = "borde: 1px negro sólido; relleno: 5px;" | Parte media superior | rowspan = "2" style = "borde: 1px negro sólido; borde inferior: 3px gris sólido; relleno: 5px; alineación vertical: superior;" | Lado derecho|-| estilo = "borde: 1px negro sólido; borde inferior: 3px gris sólido; relleno: 5px;" | Abajo a la izquierda | estilo = "borde: 1px negro sólido; borde inferior: 3px gris sólido; relleno: 5px;" | Parte inferior central |-| colspan = "3" style = "borde: 1px negro sólido; alineación del texto: centro;" | Texto antes de una tabla anidada...{||+ ''Una mesa dentro de una mesa''|-| estilo = "text-align: center; ancho: 150px;" | [[ Archivo : Wiki.png ]] | estilo = "text-align: center; ancho: 150px;" | [[ Archivo : Wiki.png ]] |-| colspan="2" style="text-align:center; border-top: 1px rojo sólido; <!-- --> borde derecho: 1px rojo sólido; borde inferior: 2px rojo sólido; <!-- --> borde izquierdo: 1px rojo sólido;" |Dos logotipos de Wikipedia|}...texto después de una tabla anidada|}...texto después de la tabla centradaTal como aparece en un navegador:
Texto antes de la tabla centrada...
...texto después de la tabla centrada
Una tabla puede utilizarse para envolver una imagen, de modo que la tabla pueda flotar hacia el centro de la página (como se hace con: style="float: right;"). Sin embargo, los márgenes, el borde y el tamaño de fuente de la tabla deben configurarse con precisión para que coincidan con la visualización de una imagen típica. El parámetro File-spec |thumb(aunque la miniatura se muestra automáticamente según el ancho que prefiera el usuario) fuerza un margen izquierdo amplio que comprime el texto cercano, por lo que el parámetro |centerpuede agregarse para suprimir el relleno del margen izquierdo. Sin embargo, |centera veces empuja el título a una segunda línea (debajo de un cuadro centrado "[]"), por lo que |thumbse puede omitir y simplemente codificar el tamaño de la imagen, agregando un borde gris (#BBB). Usando parámetros precisos para que coincidan con otras imágenes, una tabla de imágenes flotantes se puede codificar de la siguiente manera:
{| style = "float: right; border: 1px solid #BBB; margin: .46em 0 0 .2em;" |- style = "font-size: 86%;" | style = "vertical-align: top;" |[[ Archivo : DuraEuropos-TempleOfBel.jpg | 180px ]] <!-- --> < br > Templo de [[ Bel (mitología) | Bel ]] (flotante) |} El texto dentro de la tabla flotante tiene un tamaño de style="font-size: 86%;". Esa tabla de imágenes flotantes hace flotar un cuadro de imagen típico, pero permite ajustar el margen izquierdo de la imagen (ver el ejemplo de templo flotante a continuación).
El texto del título se puede omitir o eliminar el parámetro "thumb|" para que el título quede oculto hasta que se "muestre con el mouse". Lamentablemente, el parámetro |thumb(usado para mostrar el título) también controla la miniatura automática para cambiar el tamaño de las imágenes según las preferencias del usuario. Para tener un tamaño de miniatura automático y ocultar el título, use |frameless|righten lugar de |thumb.
Un conjunto de imágenes con parámetro |lefttiene un margen derecho amplio (margen opuesto del parámetro |right), por lo que se puede lograr una flotación hacia la izquierda con un conjunto de imágenes como |centerdentro de una tabla con estilo="float:left; margin:0.46em 0.2em;".
Recuerde que, fuera de una tabla de imágenes, el parámetro |righthace que una imagen se alinee (ya sea) encima o debajo de un cuadro de información, pero no flotará junto al cuadro de información.
Tenga en cuenta el orden de precedencia : primero vienen los cuadros de información o las imágenes que utilizan |right, luego vienen las tablas flotantes y, por último, cualquier texto que pueda caber. Si la primera palabra del texto es demasiado larga, no cabrá texto para completar el lado izquierdo, así que tenga cuidado de no crear un "margen izquierdo irregular" cuando no quede suficiente espacio para que el texto quepa junto a las tablas flotantes.
Si se apilan varias tablas con una sola imagen, flotan para alinearse en toda la página, según el ancho de la misma. El texto se comprime para permitir que quepan tantas tablas flotantes como sea posible, como alineación automática, y luego ajusta el texto que aún quepa en el lado izquierdo.
Esa función de alineación automática se puede utilizar para crear una "galería flotante" de imágenes: un conjunto de 20 tablas flotantes se ajustan (hacia atrás, de derecha a izquierda), como si cada tabla fuera una palabra de texto que se ajusta a lo largo y ancho de la página. Para ajustar en la dirección típica (de izquierda a derecha), defina todas esas tablas flotantes como tablas del lado izquierdo utilizando el parámetro top style="float:left; margin:0.46em 0.2em;". Las imágenes flotantes múltiples permiten una composición tipográfica más flexible de imágenes alrededor del texto.
Durante más de 30 años, el software de composición tipográfica real ha tenido directivas simples para activar alineaciones como izquierda, derecha, centro o sin sangría (más allá de la línea del margen izquierdo). Sin embargo, durante décadas, HTML solo ha tenido opciones limitadas para una alineación sencilla (una: <center>, que ahora está obsoleta). Un método para anular la sangría de la primera palabra de un párrafo es colocar el párrafo en una tabla de texto, donde la primera palabra (o sílaba) está (sola) en la columna 1, mientras que el resto del texto está en la columna 2.
< tabla cellspacing = 0 cellpadding = 0 >< tr >< td valign = top > Abeja < td > thoven compuso la [[ Sonata Claro de Luna ]]< br /> mientras estaba perdiendo la audición. </ table > Nótese el uso de ambos " cellspacing=0 cellpadding=0" para no separar el espacio entre la primera sílaba "Bee" y "thoven".
Se puede utilizar una tercera columna para encerrar texto entre corchetes externos, colocando luego el corchete de cierre "]" en la columna 3, de la siguiente manera:
< table >< tr >< td valign = top > [ < td > Esta es la línea 1. < br /> Línea 2. < td > ] </ table > Durante años, en HTML, una tabla siempre ha forzado un ajuste de línea implícito (o salto de línea ). Por lo tanto, para mantener una tabla dentro de una línea, la solución alternativa es poner toda la línea en una tabla y luego incrustar una tabla dentro de otra tabla, utilizando la tabla externa para forzar que toda la línea permanezca unida. Considere los siguientes ejemplos:
* Esta es una tabla de prueba aquí < table style = "border:1px solid black" >< tr >< td > HOLA MUNDO </ table > seguida de este texto después.* < table style = "background-color:#fafeff" >< tr >< td > Esta es una tabla de prueba aquí < td >< table height = 11px >< tr >< td style = "border:1px solid black; font-size:60%" > HOLA MUNDO </ table ></ td >< td > seguido de este texto después. </ table > Esta línea es más texto después de la tabla externa.Utilice style="font-size:60%" para reducir el tamaño del texto dentro del cuadro. Sin embargo, el texto pequeño se puede reemplazar con imágenes pequeñas (alineadas dentro de la tabla interna). La tabla externa es para una sola línea, por lo que para que una segunda línea aparezca pareja, se debe determinar previamente la longitud exacta de la línea 1 para que coincida con la longitud de las otras líneas.
A veces, es necesario que las columnas de datos se ordenen de forma diferente, como por ejemplo, que la segunda columna incluya contenidos diferentes. Sin embargo, como una wikitable está codificada en lenguaje de marcado, las columnas no se pueden arrastrar por la pantalla como en un editor orientado a columnas. En cambio, la dura realidad es que, a menudo, se requiere la tediosa edición manual de cada celda de una fila como la solución más rápida a largo plazo.
Sin embargo, algunos editores de texto permiten definir un bucle de repetición para localizar y desplazar cada séptima línea o algo similar, como un patrón repetido que podría reorganizar las columnas en una tabla grande. En otro método que se utiliza a veces, cada elemento de datos se prefija primero con un código alfabético, codificado a mano para la secuencia final, luego se ordenan esas líneas y después se eliminan todos los prefijos de texto iniciales. La ordenación se puede realizar en archivos separados, como mediante un comando de indicador de DOS: SORT myfile.DAT > myfile2.DAT, o bien utilizar un editor de texto como NoteTab, que tiene una opción de modificación de líneas de ordenación. Los trucos de edición son más útiles cuando se deben cambiar varias tablas, entonces el tiempo necesario para desarrollar patrones de edición complejos se puede aplicar a cada tabla. Para cada tabla, inserte un prefijo alfa en cada columna (haciendo que cada token de fila "|-" se ordene como columna cero, como el prefijo "Row124col00"), luego ordene en un nuevo archivo y luego elimine el prefijo de las entradas de la columna.
Nuevamente, tenga en cuenta que la tediosa edición manual de los elementos en cada fila suele ser más rápida que la posible demora de las ediciones automáticas que no funcionan correctamente. Si solo se intercambian 2 columnas dentro de una tabla, la edición de cortar y pegar (de esas entradas de columna) suele ser más rápida que la prefijación, ordenación y eliminación de prefijos de columnas.
Otra alternativa es copiar la tabla completa de la página mostrada, pegar el texto en una hoja de cálculo, mover las columnas como desee y luego reconstruir las líneas de la tabla con una fórmula. Esta fórmula maneja una tabla de tres columnas y reconstruye una sola línea. Los editores pueden copiar la línea para cada línea de la tabla y luego copiar las filas de la fórmula nuevamente en la página de edición.
=A1&" || "&A2&" || "&A3&"<tr>"
Si utiliza tablas para gráficos bidimensionales, es posible que descubra una "característica" en HTML que favorece la aparición de canas. Puede afectar tanto a las filas como a las columnas, según el uso de rowspan o colspan .
En esta tabla de 7 filas, tres celdas tienen una altura de 3 filas, pero el total es de 6 filas. ¿Dónde está la fila 4? ¡Hay una fila 5-4!
La respuesta es que cuando la tabla tiene una fila sin contener ninguna celda rowspan=1, esta fila se "comprime" hacia arriba y desaparece.
Solución : divida una de las celdas altas de modo que la fila tenga una celda rowspan=1 (y no se preocupe por la eventual pérdida del centrado del texto). Luego elimine el borde entre ellas. No olvide rellenar la celda con nada ( ). Esta es la única solución que conserva correctamente la altura de la celda, coincidiendo con la de la tabla de referencia de siete filas.{{zwsp}}
O bien, en este caso, puede simplemente agregar la tercera línea de texto (llenando las 3 filas de espacio disponibles) a la celda "fila dos/3 filas", conservando al mismo tiempo la disponibilidad de centrado de texto:
Es posible eliminar los bordes entre celdas adyacentes en las tablas, por ejemplo, cuando desea una supercelda no rectangular.
En esta tabla, las celdas amarillas están configuradas precisamente para eso. Pero, ¿por qué hay bordes?
Si elimina class=wikitable es posible ver que la tabla está configurada correctamente:
La clase wikitable exige que el borde entre dos celdas SÓLO desaparezca cuando las celdas comiencen en la MISMA fila (o columna para efecto vertical).
Solución : ¡córtelos en pedazos! Y olvídese de centrar el texto. No olvide rellenar las celdas nuevas con nada (nbsp). Aquí con amarillo más oscuro:
{| cellpadding = 5 style = "border:1px solid #AA6633" |- bgcolor = "#fafeff" | Este es un cuadro de notas para mostrar el color del borde.|}Aunque la codificación puede parecer un poco complicada, los resultados se controlan fácilmente en cuanto a espaciado y alineación. El ancho de la tabla, de forma predeterminada, permanecerá igual para ventanas más anchas o más estrechas, y conservará la alineación con el texto del lado izquierdo (o títulos de sección) fuera de la tabla.
Edición de Wikitexto/Tablas en WikilibrosEdición de wikitexto/tablas listas para usar en Wikilibros