Una tabla es una disposición de columnas y filas que organiza y coloca datos o imágenes. Las tablas se pueden crear en las páginas de Wikipedia usando una sintaxis especial de wikitexto , y se pueden usar muchos estilos y trucos diferentes para personalizarlas.
Las tablas se pueden usar como instrumento de formato, pero considere usar una lista de varias columnas en su lugar.
Usando la barra de herramientas
Para insertar automáticamente una tabla, haga clic en o (Insertar una tabla) en la barra de herramientas de edición . Si "Insertar una tabla" no está en la barra de herramientas, siga estas instrucciones para agregarlo.
El siguiente texto se inserta cuando se hace clic en Insertar una tabla :
{ | class = "wikitable" | + Leyenda de texto | - ! ¡ Texto del encabezado ! ¡ Texto del encabezado ! Texto del encabezado | - | Ejemplo || Ejemplo || Ejemplo | - | Ejemplo || Ejemplo || Ejemplo | - | Ejemplo || Ejemplo || Ejemplo | }
Este código produce la siguiente tabla:
Texto de cabecera | Texto de cabecera | Texto de cabecera |
---|---|---|
Ejemplo | Ejemplo | Ejemplo |
Ejemplo | Ejemplo | Ejemplo |
Ejemplo | Ejemplo | Ejemplo |
El texto de muestra ("Texto de encabezado" o "Ejemplo") está destinado a ser reemplazado con datos reales.
Resumen de marcado de tabla básico
Elemento de tabla | Wikitexto | Requerido | Notas de uso |
---|---|---|---|
Inicio de la mesa | {| | Requerido | |
Título de la tabla | |+ | Opcional | Solo entre el inicio de la tabla y la primera fila de la tabla. |
Fila de la tabla | |- | Opcional | Puede omitirse antes de la primera fila. |
Celda de encabezado de tabla | ! | Opcional | Se pueden agregar celdas de encabezado de tabla consecutivas en la misma línea separadas por marcas dobles ( !! ); o comenzar con nuevas líneas, cada una con su propia marca ( ! ). |
Celda de datos de tabla | | o || | Opcional | Las celdas de datos de la tabla consecutivas se pueden agregar en la misma línea separadas por marcas dobles ( || ) o comenzar en nuevas líneas, cada una con su propia marca única ( | ). Esta marca también se utiliza para separar los atributos HTML del contenido de la celda y el título. |
Final de la mesa | |} | Requerido |
- Las marcas anteriores deben comenzar en una nueva línea , excepto las marcas dobles (
||
y!!
) para agregar opcionalmente celdas consecutivas a una sola línea. - Los espacios en blanco al principio de una línea se ignoran.
- El contenido puede seguir su marca de celda en la misma línea (después de cualquier atributo HTML opcional); o en líneas debajo de la marca de celda (aunque tenga cuidado con los párrafos no deseados). El contenido que usa marcado wiki que necesita comenzar en una nueva línea, como listas, encabezados o tablas anidadas, debe estar en su propia línea nueva.
- Para insertar un carácter de barra vertical (
|
) en un título de tabla o celda, use el
marcado de escape.|
Atributos HTML
Cada marca, excepto table end ( |}
), acepta opcionalmente uno o más atributos . Los atributos deben estar en la misma línea que la marca.
- Las celdas y los subtítulos (
|
o||
,!
o!!
, y|+
) contienen contenido: separe cualquier atributo de su contenido con una sola barra vertical (|
), con los atributos antes del contenido. - Las marcas de tabla y fila (
{|
y|-
) no contienen contenido directamente. No , no añadir una tubería (|
) después de cualquier atributo.
Los atributos comúnmente incluidos en las tablas incluyen:, class
por ejemplo class="wikitable"
; style
, para estilo CSS ; scope
, para indicar celdas de encabezado de fila o columna; rowspan
, para extender las celdas en más de una fila; colspan
, para extender las celdas en más de una columna.
Tutorial de sintaxis de tubería
Aunque la sintaxis de la tabla HTML también funciona, se puede utilizar un código wik especial como atajo para crear una tabla. Los códigos de barra vertical o símbolo de "tubería" ( |
) funcionan exactamente igual que el marcado de la tabla HTML , por lo que el conocimiento del código de la tabla HTML ayuda a comprender el código de la tubería. Los atajos son los siguientes:
- Toda la tabla está rodeada de corchetes y un carácter de barra vertical (una tubería). Así que usa
{|
para comenzar una mesa y|}
terminarla. Cada uno debe estar en su propia línea:
{| el código de la tabla va aquí |}
- Se incluye un título de tabla opcional con una línea que comienza con una barra vertical y el signo más "
|+
" y el título que sigue:
{|| + el código de la tabla de subtítulos va aquí|}
- Para comenzar una nueva fila de la tabla , escriba una barra vertical y un guión en su propia línea: "
|-
". Los códigos de las celdas de esa fila comienzan en la línea siguiente.
{|| + Título de la mesa| - el código de fila va aquí | - el siguiente código de fila va aquí|}
{|| + Título de la mesa| -| el código de la celda va aquí| -| el siguiente código de celda de fila va aquí | el siguiente código de celda va aquí|}
- Las celdas se pueden separar con una nueva línea y una sola barra, o con una doble barra "
||
" en la misma línea. Ambos producen el mismo resultado:
Fuente wiki | Resultado renderizado | |||||||||
---|---|---|---|---|---|---|---|---|---|---|
{|| + Título de la mesa| -| Celda 1 || Celda 2 || Celda 3| -| Celda A | Celda B | Celda C| -| Celda x | Celda y || Celda z|} |
|
- Los parámetros opcionales pueden modificar la visualización y el estilo de celdas, filas o toda la tabla. La forma más sencilla de agregar estilo es establecer la clase
wikitable
CSS , que en la hoja de estilo externa de Wikipedia está definida para aplicar un esquema de color gris y bordes de celda a las tablas que lo usan:
Fuente wiki | Resultado renderizado | |||||||||
---|---|---|---|---|---|---|---|---|---|---|
{| class = "wikitable"| + Título de la mesa! Encabezado de columna 1! Encabezado de columna 2! Encabezado de columna 3| -! Encabezado de fila 1| Celda 2 || Celda 3| -! Encabezado de fila A| Celda B| Celda C|} |
|
Los parámetros de la tabla y los parámetros de la celda son los mismos que en HTML ; consulte http://www.w3.org/TR/html401/struct/tables.html#edef-TABLE y Table (HTML) . Sin embargo, el thead
, tbody
, tfoot
, colgroup
, y col
elementos Actualmente no soportados en MediaWiki , a partir de abril 2017[actualizar].
Una tabla puede ser útil incluso si ninguna de las celdas tiene contenido. Por ejemplo, los colores de fondo de las celdas se pueden cambiar con los parámetros de las celdas, convirtiendo la tabla en un diagrama, como meta: Plantilla charla: Ejemplo de pentomino cuadrado 8x8 . Una "imagen" en forma de tabla es mucho más conveniente de editar que una imagen cargada.
Cada fila debe tener el mismo número de celdas que las otras filas, de modo que el número de columnas de la tabla se mantenga constante. Para las celdas vacías, use el espacio de ancho cero
o el espacio no divisible anterior
como contenido para asegurarse de que se muestren las celdas.
Con colspan
y las rowspan
celdas pueden abarcar varias columnas o filas;
Renderizando la tubería
Cuando el contenido de la celda que contiene un carácter de barra vertical no se procesa correctamente, simplemente agregue un formato vacío para esa celda. El segundo carácter de barra vertical en una línea de no se mostrará; está reservado para agregar un formato. Wikicode entre la primera y la segunda tubería es un formato, pero como el vacío o un error se ignora, simplemente desaparece. Cuando esto suceda, agregue un formato ficticio. |cell code
Utilice un tercer carácter de barra vertical para representar su primer carácter de barra vertical.
Fuente wiki | Resultado renderizado | ||||||
---|---|---|---|---|---|---|---|
{| class = "wikitable"| -| '' formateo '' | P | i | p | e || C | e | l | l | 2 || -| '' formateo '' | P | i | p | e || '' formateo '' | C | e | l | l | 2 || -|| P | i | p | e | s || C | e | l | l | 2 ||} |
|
El tercer y los últimos caracteres de barra vertical se renderizarán, pero para mostrar dos caracteres de barra vertical adyacentes en una celda (en lugar de que actúen como la primera barra vertical al comienzo de una nueva celda), se necesitan otras opciones de representación de barras verticales. En lugar de usar un formato ficticio para renderizar una tubería, puede renderizarlo directamente por 1)
(preferido) o 2) html : |
o |
. Cada línea de código de celda en la siguiente tabla tiene una tubería wikicode.
Fuente wiki | Resultado renderizado | ||
---|---|---|---|
{| class = "wikitable"| -| |
|
Plantilla , debido al orden en que se analizan las cosas, equivale a escribir un solo | carácter de tubería. La etiqueta analizadora única no se aplica aquí. Vea cómo no escapan por la segunda tubería, como & # 124 y lo hicieron arriba:{{!}}
Fuente wiki | Resultado renderizado | ||
---|---|---|---|
{| class = "wikitable"| -| |
|
Alcance
- Una fila de encabezados de columna se identifica usando "
! scope="col" |
" en lugar de "|
". Cada celda de encabezado debe estar en una línea separada en el marcado wiki. Las celdas de encabezado generalmente se representan de manera diferente a las celdas normales, según el navegador. A menudo se representan en negrita y centrados. Elscope="col"
marcado debe usarse para los encabezados de columna en todas las tablas de datos porque asocia explícitamente el encabezado con las celdas correspondientes, lo que ayuda a garantizar una experiencia coherente para los lectores de pantalla. El Manual de estilo requiere el uso de alcance para los encabezados de columna . - Una celda de una fila (normalmente, pero no siempre la primera) se identifica como un encabezado de fila mediante el marcado "
! scope="row" |
" en lugar de "|
". Cada celda de encabezado debe estar en una línea separada en el marcado wiki. Elscope="col"
marcado debe usarse para los encabezados de columna en todas las tablas de datos porque asocia explícitamente el encabezado con las celdas correspondientes, lo que ayuda a garantizar una experiencia coherente para los lectores de pantalla. El Manual de estilo requiere el uso de alcance para los encabezados de columna . Muchos navegadores mostrarán las celdas del encabezado de fila en negrita y centradas. Si esta representación no se desea desde un punto de vista estético, la tabla se puede diseñar con la clase "plainrowheaders" que alinea a la izquierda el texto en la celda y elimina las negritas.
Un ejemplo típico se puede marcar así:
Fuente wiki | Resultado renderizado | |||||||||
---|---|---|---|---|---|---|---|---|---|---|
{ | class = "wikitable plainrowheaders" | + ¡ El título de la tabla ! alcance = "col" | Columna de cabecera 1 ! alcance = "col" | Columna de cabecera 2 ! alcance = "col" | Columna de cabecera 3 | - ! alcance = "fila" | Fila de encabezado 1 | Celda 2 || Celda 3 | - ! alcance = "fila" | Fila de encabezado A | Celda B || Cell C | } |
|
Ejemplos de
Tablas sencillas y sencillas
Mesa minimalista
Ambos generan el mismo resultado. Elija un estilo basado en la cantidad de celdas en cada fila y el texto total dentro de cada celda.
Fuente wiki | Resultado renderizado (tenga en cuenta que no hay bordes) | ||||
---|---|---|---|---|---|
{|| -| A| B| -| C| D|} {|| -| A || B| -| C || D|} |
|
Tabla de multiplicación
Tenga en cuenta que en este ejemplo class="wikitable"
se utiliza para diseñar la tabla con la hoja de estilo externa de Wikipedia para tablas. Agrega bordes, sombreado de fondo y texto de encabezado en negrita.
Fuente wiki | Resultado renderizado | ||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
{| class = "wikitable" style = "text-align: center; width: 200px; height: 200px;"| + Tabla de multiplicar| -! × ! 1 ! 2 ! 3| -! 1| 1 || 2 || 3| -! 2| 2 || 4 || 6| -! 3| 3 || 6 || 9| -! 4| 4 || 8 || 12| -! 5| 5 || 10 || 15|} |
|
Operaciones de tabla completa
Subtítulos y resúmenes
Se recomiendan títulos de tabla explícitos para las tablas de datos como una mejor práctica; el Manual de estilo de Wikipedia los considera de alta prioridad por razones de accesibilidad, ya que un título está asociado explícitamente con la tabla, a diferencia de un encabezado de wikitexto normal o una oración introductoria. Todas las tablas de datos en Wikipedia requieren subtítulos. Se proporciona un título con el |+
marcado, similar a una fila de tabla ( |-
), pero no contiene ninguna celda y no está dentro del borde de la tabla. Los subtítulos siempre se muestran, apareciendo como un título centrado (en la mayoría de los navegadores), encima de la tabla. Se puede aplicar estilo a un título (en línea, no en bloque, CSS) y puede incluir wikilinks, citas de referencia, etc.
Un resumen proporciona una descripción general de los datos de una tabla para navegadores de texto y audio, y normalmente no se muestra en navegadores gráficos. El resumen (también una alta prioridad del Manual de estilo para las tablas) es una sinopsis del contenido y no repite el texto de la leyenda; Piense en ello como análogo a la alt
descripción de una imagen . Se agrega un resumen con , en la misma línea que abrió la tabla, junto con cualquier otro parámetro para la tabla en su conjunto. El atributo es, sin embargo, obsoleta en HTML5 .summary="Summary text here."
{|
class=
summary=
Ejemplo de marcado de wiki que muestra un título alineado a la izquierda con una cita de fuente:
{| class = "wikitable"| + estilo = "text-align: left;" | Datos informados para 2014-2015, por región | -! alcance = "col" | Año !! alcance = "col" | Africa !! alcance = "col" | Américas !! alcance = "col" | Asia y Pacifico !! alcance = "col" | Europa| -! alcance = "fila" | 2014| 2,300 || 8,950 || '' 9,325 '' || 4.200| -! alcance = "fila" | 2015| 2,725 || '' 9,200 '' || 8.850 || 4.775|}
Como aparece en un navegador:
Año | África | Américas | Asia y Pacifico | Europa |
---|---|---|---|---|
2014 | 2,300 | 8,950 | 9.325 | 4.200 |
2015 | 2,725 | 9.200 | 8.850 | 4.775 |
Ancho
- Nota:
width=x
se ignora en las tablas de HTML5 en Wikipedia .
style=max-width:Xem
se puede utilizar en la línea superior del wikitexto de una tabla para especificar el ancho máximo de la tabla como un todo. Para algunas tablas, esto es todo lo que se necesita.
El siguiente extracto de la tabla es de esta versión de la Lista de países por riqueza por adulto . El objetivo es reducir las columnas de datos y hacer que los nombres de los países se extiendan en una línea cada uno. Todo esto hace que sea más fácil escanear una lista de países. Pero los nombres de los países deben ajustarse a las palabras si es necesario (en vistas de retrato estrechas en algunos teléfonos celulares, etc.). Así style=max-width:Xem
se utilizó en encabezados de columna seleccionados. Aquí está el wikitexto del encabezado correspondiente:
! País o [[ área subnacional ]] ! estilo = ancho máximo : 4em | ¡ Riqueza media por adulto ([[ USD ]]) ! estilo = ancho máximo : 4em | ¡ Riqueza media por adulto ([[ USD ]]) ! estilo = ancho máximo : 4em | Población adulta
País o área subnacional | Riqueza media por adulto ( USD ) | Riqueza media por adulto ( USD ) | Población adulta |
---|---|---|---|
República Democrática del Congo | 382 | 1.084 | 37,100,000 |
Mozambique | 352 | 880 | 13,814,000 |
Las unidades Em son buenas porque aumentan de tamaño junto con la configuración del zoom. El ancho máximo es mejor que usar saltos (
) en los encabezados, porque los cortes de encabezado molestan a las personas que usan lectores de pantalla debido a las pausas. El ancho máximo también permite que las mesas se encojan para caber en pantallas más pequeñas de tabletas y teléfonos.
style=width:Xem
no se estrecha más en ninguna circunstancia, por lo que debe evitarse su uso. Vea por qué en esta subpágina . Por la misma razón class=nowrap
debe evitarse.
Altura
Se puede especificar la altura de toda la tabla, así como la altura de una fila. La altura de la fila central a continuación se establece en style=height:7em
y la altura total de toda la tabla se establece en style=height:14em
unidades. Hacer los cálculos muestra que la altura de las filas superior e inferior es de 3,5 unidades em cada una. 3,5 + 3,5 + 7 = 14. Si hay un ajuste de palabras, la altura aumentará para adaptarse a esto.
Marcado Wiki:
{ | class = wikitable style = altura : 14 em | - ! ¡¡ Izquierda !! Centro !! Derecha | - | Celda superior izquierda || Celda central superior || Celda superior derecha | - estilo = altura : 7 cm | Celda central izquierda || Celda del centro medio || Celda del medio a la derecha | - | Celda inferior izquierda || Celda central inferior || Celda inferior derecha | }
Como aparece en un navegador:
Izquierda | Centrar | Derecha |
---|---|---|
Celda superior izquierda | Celda central superior | Celda superior derecha |
Celda central izquierda | Celda del centro medio | Celda del medio a la derecha |
Celda inferior izquierda | Celda central inferior | Celda inferior derecha |
Establecer fronteras
Agregue un borde alrededor de una tabla usando la propiedad CSS , por ejemplo . Este ejemplo utiliza un borde gris sólido (no discontinuo) de un píxel de ancho:border: thickness style color;
border:3px dashed red
Fuente wiki | Resultado renderizado | |||||||||
---|---|---|---|---|---|---|---|---|---|---|
{| style = "border-spacing: 2px; border: 1px solid darkgray;"! style = "ancho: 140px;" | Izquierda! style = "ancho: 150px;" | Centrar! style = "ancho: 130px;" | Derecha| -| [[Archivo: StarIconBronze.png | 120px | Icono de estrella de bronce]]
| [[Archivo: StarIconGold.png | 120px | Icono de estrella dorada]]
| [[Archivo: StarIconGreen.png | 120px | Icono de estrella verde]]| - style = "text-align: center;"| Estrella de bronce || Estrella de oro || Estrella verde|} |
|
Tenga en cuenta que los textos de la fila inferior están centrados style="text-align: center;"
mientras que las imágenes de estrellas no están centradas (es decir, alineadas a la izquierda).
Siempre que las File:
especificaciones omitan el parámetro |thumb
, no muestran las líneas de título en la tabla (solo durante el desplazamiento del mouse). El color del borde darkgray
coincide con las tablas o infoboxes típicos de los artículos; sin embargo, podría ser cualquier nombre de color (como en style="border: 1px solid darkgreen;"
) o usar un color hexadecimal (como:) #DDCCBB
.
- Bordes de cada celda en una tabla
Fuente wiki | Resultado renderizado | ||||||
---|---|---|---|---|---|---|---|
{ | borde = 1 | - | A || B || C | - | D || E || F | } |
|
Si todas las celdas tienen el mismo color de borde, es posible que no se deseen los bordes dobles resultantes; agregue la border-collapse: collapse;
propiedad CSS en la etiqueta de apertura de la tabla para reducirlos a uno solo ( cellspacing=...
es obsoleto ).
Además, el W3C permite el uso del border=
atributo obsoleto en la raíz de la tabla ( {|
) si su valor es "1". Esto agrega un borde de un píxel, en el color predeterminado, a la tabla y a todas sus celdas a la vez:
Usando la border-collapse
propiedad para combinar los bordes dobles, como se describe arriba:
Fuente wiki | Resultado renderizado | ||||||
---|---|---|---|---|---|---|---|
{ | border = 1 style = " border-collapse : collapse ; " | - | A || B || C | - | D || E || F | } |
|
Posicionamiento
- Puede colocar la tabla completa, el contenido de una fila y el contenido de una celda, pero no con un solo parámetro para todo el contenido de la tabla. Ver m: Charla de plantilla: demostración de mesa .
Mesas de lado a lado
Puede colocar dos o más tablas una al lado de la otra si el ancho de la ventana lo permite, pero deje que se envuelvan de otra manera para evitar el desplazamiento horizontal para los lectores con pantallas estrechas. Coloque esto antes de la primera mesa:
< div > muestra tablas una al lado de la otra cuando el ancho de la ventana lo permite -> < li style = display: inline-table >
Coloque esto entre las mesas. El espacio después de crea un espacio entre las mesas.
li > < li style = display: inline-table >
Coloque esto después de la última mesa:
li > div >
style=display:inline-table
no se puede agregar dentro del wikitexto de la tabla, porque los subtítulos largos estropearán las cosas en la vista vertical móvil u otras pantallas estrechas. Debe agregarse fuera del wikitexto de la tabla. Las tablas se ajustarán según el ancho de la pantalla. Reduzca la ventana de su navegador para ver.
Nombre | Color |
---|---|
Fred | naranja |
Beto | Verde |
Lindy | Amarillo |
Animal | Expresar |
---|---|
Mapache | Maine |
Ballena | Alaska |
Manta raya | Florida |
Aquí está el wikitexto:
< div > muestra tablas una al lado de la otra cuando el ancho de la ventana lo permite -> < li style = display: inline-table >{| class = wikitable| + Tabla 1. Título largo para probar problemas en el modo retrato móvil.| -! Nombre! Color| -| Fred| Naranja| -| Bob| Verde| -| Lindy| Amarillo|} li > < li style = display: inline-table >{| class = wikitable| + Tabla 2. Título largo para probar problemas en el modo retrato móvil.| -! Animal! Expresar| -| Mapache| Maine| -| Ballena| Alaska| -| Manta Ray| Florida|} li > div >
Imágenes y tablas lado a lado
También puede agregar imágenes a la mezcla. Agregar vertical-align:top;
para alinear un elemento en la parte superior. Consulte la propiedad CSS vertical-align para ver otras opciones. Las tablas y las imágenes se ajustarán según el ancho de la pantalla. Reduzca la ventana de su navegador para ver. Por ejemplo:
Nombre | Color |
---|---|
Fred | naranja |
Beto | Verde |
Lindy | Amarillo |
Animal | Expresar |
---|---|
Mapache | Maine |
Ballena | Alaska |
Manta raya | Florida |
Agregar vertical-align:bottom;
para alinear un elemento en la parte inferior. Puede elegir la alineación para cada elemento. Tenga en cuenta la estrella alineada en la parte inferior.
Nombre | Color |
---|---|
Fred | naranja |
Beto | Verde |
Lindy | Amarillo |
Animal | Expresar |
---|---|
Mapache | Maine |
Ballena | Alaska |
Manta raya | Florida |
Mesa flotante
Dos clases de tabla floatleft
y floatright
(distingue entre mayúsculas y minúsculas) ayudan a hacer flotar la tabla y ajustar los márgenes de la tabla para que no se peguen al texto. floatleft
flota la tabla a la izquierda y ajusta el margen derecho. floatright
hace lo contrario. Ejemplo:
Este párrafo está antes de la mesa. El texto de la columna 2 abarca ambas filas debido al especificador de formato "rowspan = 2", por lo que no hay codificación para "Col 2" en la segunda fila, solo Col 1 y Col 3.{| class = "wikitable floatright"| Col 1, fila 1| rowpan = "2" | Col 2, fila 1 (y 2)| Col 3, fila 1| -| Col 1, fila 2| Col 3, fila 2|}{| class = "wikitable floatleft"| Col 1, fila 1| rowpan = "2" | Col 2, fila 1 (y 2)| Col 3, fila 1| -| Col 1, fila 2| Col 3, fila 2|}Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit amet, consectetur, sedipisci no velit numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur?
Como aparece en un navegador:
Este párrafo está antes de la mesa. El texto de la columna 2 abarca ambas filas debido al especificador de formato "rowspan = 2", por lo que no hay codificación para "Col 2" en la segunda fila, solo Col 1 y Col 3.
Col 1, fila 1 | Col 2, fila 1 (y 2) | Col 3, fila 1 |
Col 1, fila 2 | Col 3, fila 2 |
Col 1, fila 1 | Col 2, fila 1 (y 2) | Col 3, fila 1 |
Col 1, fila 2 | Col 3, fila 2 |
Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit amet, consectetur, sedipisci no velit numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur?
Tenga en cuenta que, aunque hay otras formas de hacer flotar una tabla, como style="float:left;"
, style="float:right;"
los únicos parámetros que le permiten colocar la tabla debajo de un objeto multimedia flotante son floatleft
y floatright
. Por ejemplo:
Alinear la mesa con floatleft
produce:
Col 1, fila 1 | Col 2, fila 1 (y 2) | Col 3, fila 1 |
Col 1, fila 2 | Col 3, fila 2 |
Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit amet, consectetur, sedipisci no velit numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur?
Pero alinearlo con style="float:left;"
produce:
Col 1, fila 1 | Col 2, fila 1 (y 2) | Col 3, fila 1 |
Col 1, fila 2 | Col 3, fila 2 |
Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit amet, consectetur, sedipisci no velit numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur?
Mesas de centrado
align="center"
está obsoleto en HTML5 y no funciona bien en el software Mediawiki. Por ejemplo; no anulará la alineación izquierda de las tablas a través de class=wikitable
.
Se pueden lograr tablas centradas, pero no "flotan"; es decir, no aparece ningún texto a ninguno de los lados. El truco es {| style="margin-left: auto; margin-right: auto; border: none;"
[nota 1]
Marcado Wiki:
Texto antes de la mesa ...{| class = "wikitable" style = "margin-left: auto; margin-right: auto; border: none;"| + Celdas alineadas a la izquierda, centradas en la tabla| -! alcance = "col" | Duis! alcance = "col" | aute! alcance = "col" | Irure| -| dolor || in reprehenderit || en voluptate velit| -| esse cillum dolore || eu fugiat nulla || pariatur.|}... texto tras mesa
Como aparece en un navegador:
Texto antes de la mesa ...
Duis | aute | Irure |
---|---|---|
dolor | en reprehenderit | en voluptate velit |
esse cillum dolore | eu fugiat nulla | pariatur. |
... texto tras mesa.
Mesas anidadas
P.ej | ||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Wikitexto:
{{Collapse | 1 = < nowiki />
* Por qué < syntaxhighlight lang = "moin" inline > < nowiki /> syntaxhighlight > . de arriba para ver. ->
{{tq2 | 1 = < nowiki /> {{tq2 | {{tq2 | 1 = < nowiki /> Texto antes de la tabla ... Verifique también: [[Plantilla: tq2 # Advertencias]]. ->{{{!}} class = "wikitable" style = "color de fondo: # eaf8f4; color: # 008560" ! A !! B !!{{{!}} class = "wikitable" style = "color de fondo: # f8f4ea"! A !! B{{!}} -{{!}}{{{!}} class = "wikitable"! a0 !! b0{{!}} -{{!}}AUTOMÓVIL CLUB BRITÁNICO{{!}}} xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx{{!}}{{{!}} class = "wikitable"! a1 !! b1{{!}} -{{!}}CAMA Y DESAYUNO{{!}}}{{!}}}{{!}} -{{!}}{{{!}} class = "wikitable" style = "color: # ff4242"! a0 !! b0{{!}} -{{!}}AUTOMÓVIL CLUB BRITÁNICO{{!}}} xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx{{!}}{{{!}} class = "wikitable"! a1 !! b1{{!}} -{{!}}CAMA Y DESAYUNO{{!}}}{{!}} {{Collapse | 1 = < span style = "color: # ff4242" > La prueba todo en uno ... span > | 2 = X}}{{!}}} ... texto después de la tabla. | source = '' ' < span style = "background-color: # ffff00" > Tabla span > en la tabla' '' ...}}...y...}}'' 'Cita [[tren | < span style = "color: # ff0000" > entrenar span > ]] < span style = "background-color: # ffff00; color: # ff0000" > ! span > '' '[https://en.wikipedia.org/wiki/Help:Link#External_links Enlace externo] ( < span class = "plainlinks" > [https://en.wikipedia.org/wiki/Help:External_link_icons#Hiding_link_icons icono oculto ] span > )}} | 2 = Por ejemplo | expandir = y}}
- Ayuda: etiquetas de comentario
- Plantilla: tq2 # Advertencias
Se muestran siete tablas diferentes (azules) anidadas dentro de las celdas de una tabla. Automáticamente, las dos tablas | A | y | B | B | están alineados verticalmente en lugar de los habituales caracteres de texto uno al lado del otro en una celda. Y float
se usa para arreglar cada una de las tablas | C | y | D | a su propia posición dentro de una celda de la tabla. Esto se puede usar para gráficos y esquemas, aunque, como se indicó anteriormente, está en desuso. Las tablas anidadas deben comenzar en una nueva línea.
α | celda2
| la mesa original otra vez |
|
|
Wikitexto:
{| style = "border: 1px solid black;"| style = "border: 1px solid black;" | &alfa| style = "border: 1px solid black; text-align: center;" | celda2{| style = "borde: 2px negro sólido; fondo: #ffffcc;" | style = "border: 2px solid darkgray;" | ANIDADO| -| style = "border: 2px solid darkgray;" | MESA|}| style = "border: 1px solid black; vertical-align: bottom;" | la mesa original otra vez| style = "borde: 1px negro sólido; ancho: 100px" |{| style = "borde: 2px negro sólido; fondo: #ffffcc"| style = "border: 2px solid darkgray;" | A|}{| style = "borde: 2px negro sólido; fondo: #ffffcc"| style = "border: 2px solid darkgray;" | B| style = "border: 2px solid darkgray;" | B|}| style = "borde: 1px negro sólido; ancho: 50px" |{| style = "border: 2px solid black; background: #ffffcc; float: left"| style = "border: 2px solid darkgray;" | C|}{| style = "border: 2px solid black; background: #ffffcc; float: right"| style = "border: 2px solid darkgray;" | D|}|}
Desplazamiento
La tabla completa se puede colocar dentro de una lista de desplazamiento para que aparezcan nuevas líneas de tabla en la pantalla a medida que desaparecen las líneas de tabla antiguas. Aunque MOS: SCROLL no favorece el desplazamiento de tablas en el espacio de artículos porque el contenido del artículo debe ser accesible en una variedad de dispositivos, mientras que una tabla de desplazamiento oculta algo de texto, una tabla de desplazamiento puede usarse en otros espacios de nombres de Wikipedia . Hay varias tablas de desplazamiento muy avanzadas (con encabezados que permanecen visibles y fijos mientras se desplaza) en la pandemia de COVID-19 por país y territorio : Plantilla: datos de la pandemia de COVID-19 , Plantilla: tasas de muerte por pandemia de COVID-19 y Plantilla: Mensual acumulativo Total de muertes por COVID-19 por país . La clasificación de filas también puede volverse pegajosa. Vea aquí y aquí . Consulte la tabla de desplazamiento más abajo: # Enlace de sección o enlace de mapa a un ancla de fila . Consulte también: Plantilla: Ventana de desplazamiento .
Marcado Wiki:
< div style = "width: 75%; height: 10em; overflow: auto; border: 2px solid red;" > { | clase = "wikitable" | - | abc || def || ghi | - style = " altura : 100 px ; " | jkl || style = " ancho : 200 px ; " | mno || pqr | - | stu || vwx || yz | } div >
Como aparece en un navegador:
a B C | def | ghi |
jkl | mno | pqr |
Stu | vwx | yz |
Color; alcance de los parámetros
Dos formas de especificar el color del texto y el fondo de una sola celda son las siguientes:
Fuente wiki | Resultado renderizado | ||||
---|---|---|---|---|---|
{|| -| style = "fondo: rojo; color: blanco;" | a B C| def| estilo = "fondo: rojo;" | < span style = "color: white;" > ghi span >| jkl|} |
|
Al igual que otros parámetros, los colores también se pueden especificar para una fila completa o para toda la tabla; los parámetros de una fila anulan el valor de la tabla, y los de una celda anulan los de una fila. class = mw-datatable anula el color de fondo de una fila, pero no el color de fondo de una celda.
style = background-color: funciona en celdas de encabezado ordenables. estilo = fondo: no. Rompe la clasificación en esa celda. Consulte Ayuda: Clasificación .
No existe una manera fácil de especificar un color para una columna completa: cada celda de la columna debe especificarse individualmente. Las herramientas pueden facilitarlo.
Marcado Wiki:
Fuente wiki | Resultado renderizado | |||||||||
---|---|---|---|---|---|---|---|---|---|---|
{ | style = " fondo : amarillo ; color : verde ; " | - | stu || style = " background : silver ; " | vwx || yz | - style = " fondo : rojo ; color : blanco ; " | stu || style = " background : silver ; " | vwx || yz | - | stu || style = " background : silver ; " | vwx || yz | } |
|
Para hacer que la mesa se mezcle con el fondo, use style="background: none;"
o style="background: transparent;"
. (Advertencia: style="background: inherit;"
no funciona con algunos navegadores más antiguos, incluido IE6, así que asegúrese de que la tabla sea inteligible si falla la preferencia de color).
Para forzar que una celda coincida con uno de los colores predeterminados de la class="wikitable"
plantilla , usestyle="background:#EAECF0;"
para el encabezado más oscuro, y style="background:#F8F9FA;"
para el cuerpo más ligero. # A2A9B1 es el color del borde de wikitables.
Operaciones celulares
Configuración de los parámetros de la celda
Al comienzo de una celda, agregue su parámetro seguido de una sola tubería. Por ejemplo, style="width: 300px"|
establece esa celda en un ancho de 300 píxeles. Para configurar más de un parámetro, deje un espacio entre cada uno.
Fuente wiki | Resultado renderizado | |||
---|---|---|---|---|
{ | estilo = " color : blanco ; " | - | estilo = " fondo : rojo ; " | celda1 || style = " ancho : 300 px ; fondo : azul ; " | celda2 | style = " fondo : verde ; " | celda3 | } |
|
Alineación vertical en celdas
De forma predeterminada, el texto se alinea con el centro vertical de la celda:
Encabezado de fila | Un texto más largo. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud ejercicio ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. | Texto corto |
---|---|---|
Encabezado de fila | Excepteur sint Ocecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Imagínese a alguien desplazándose hacia abajo en la página, viendo la parte superior de las columnas "vacías" y preguntándose por qué están vacías. | Texto corto |
Para alinear el texto con la parte superior de la celda, aplique el style="vertical-align: top;"
CSS a las filas (desafortunadamente, parece ser necesario aplicar esto individualmente a cada fila). El valign=...
atributo está obsoleto y no debe utilizarse.
Fuente wiki | Resultado renderizado | ||||||
---|---|---|---|---|---|---|---|
{ | class = "wikitable" style = " width : 400 px ; " | - style = " vertical-align : top ; " ! alcance = "fila" estilo = " ancho : 10 % ; " | Fila de encabezado | style = " ancho : 70 % ; " | A más largo trozo de texto. Lorem ipsum ... | style = " ancho : 20 % ; " | Texto corto | - style = " vertical-align : top ; " ! alcance = "fila" | Fila de encabezado | Excepteur sint Ocecat ... | Texto breve | } |
|
Sangría y relleno del contenido de la celda
El contenido de una celda se puede sangrar usando un estilo CSS de padding-left
.
Marcado Wiki:
{| class = "wikitable"| -| Contenido de la celda que no tiene sangría ni relleno| -| style = "padding-left: 2em;" | style = "padding-left: 2em;"| -| style = "text-align: right; padding-right: 2em;" | style = "padding-right: 2em;"| -| style = "padding-top: 2em;" | style = "padding-top: 2em;"| -| style = "padding-bottom: 2em;" | style = "padding-bottom: 2em;"| -| style = "relleno: 3em 5%;" | style = "relleno: 3em 5%;" {{espacio | 4}} Superior e inferior 3em, izquierda y derecha 5%| -| style = "relleno: 3em 4em 5%;" | style = "relleno: 3em 4em 5%;" {{espacio | 4}} Top 3em, 4em izquierdo y derecho, 5% inferior| -| style = "padding: 3%;" | style = "padding: 3%;" {{espacio | 4}} Arriba, derecha, abajo e izquierda todo el 3%| -| style = "relleno: 1em 20px 8% 9em;" | style = "relleno: 1em 20px 8% 9em;" {{espacio | 4}} Top 1em, Right 20px, Bottom 8%, Left 9em|}
Contenido de la celda que no tiene sangría ni relleno |
style = "padding-left: 2em;" |
style = "padding-right: 2em;" |
style = "padding-top: 2em;" |
style = "padding-bottom: 2em;" |
style = "relleno: 3em 5%;" Superior e inferior 3em, izquierda y derecha 5% |
style = "relleno: 3em 4em 5%;" Top 3em, 4em izquierdo y derecho, 5% inferior |
style = "padding: 3%;" Arriba, derecha, abajo e izquierda todo el 3% |
style = "relleno: 1em 20px 8% 9em;" 1em superior, 20 px derecho, 8% inferior e izquierdo 9em |
- Patrón de argumentos
Los argumentos a style="padding: "
pueden verse como ordenados por un reloj de 12 horas , comenzando al mediodía y yendo en el sentido de las agujas del reloj , en el siguiente sentido: "arriba" se asocia con el mediodía (es decir, 12 en punto, la parte superior de un reloj ), " a la derecha "son las 3 en punto," abajo "son las 6 en punto y" izquierda "son las 9 en punto. Los argumentos se ordenan en el sentido de las agujas del reloj a partir del mediodía: arriba → derecha → abajo → izquierda (consulte esta nota al pie [nota 2] para ver un ejemplo con una explicación).
Este mismo orden también se usa en otros lugares, como cuando se especifican los bordes de una celda con border-style:
.
Bordes de celdas individuales
El mismo CSS que se usa para las tablas se puede usar en el especificador de formato de una celda (encerrado en |
... |
) para poner un borde alrededor de cada celda:
Fuente wiki | Resultado renderizado | |||||||||
---|---|---|---|---|---|---|---|---|---|---|
{ | style = " border-spacing : 2 px ; border : 1 px solid darkgray ; " ! style = " ancho : 140 px ; " | ¡A la izquierda ! style = " ancho : 150 px ; " | Centro ! style = " ancho : 130 px ; " | Derecha | - style = " text-align : center ; " | style = " borde : 1 px azul sólido ; " | [[ Archivo : StarIconBronze . png | 120 px | Icono de estrella de bronce ]] | style = "borde: 1px sólido # 777777;" | [[ Archivo : StarIconGold . png | 120 px | Icono de estrella de oro ]] | style = "borde: 1px sólido # 22AA55;" | borde verdoso -> [[ Archivo : StarIconGreen . png | 120 px | Icono de estrella verde ]] | - style = "text-align: center;" | Estrella de bronce || Estrella de oro || Estrella verde | } |
|
Tenga en cuenta que solo las celdas de la imagen, aquí, tienen bordes individuales, no el texto. Los colores hexadecimales inferiores (como #616161
:) están más cerca del negro. Normalmente, todos los bordes de una tabla serían de un color específico.
- Bordes superior, derecho, inferior e izquierdo de una celda
Para establecer el borde izquierdo, derecho, inferior o superior de una sola celda, se puede usar style='border-style:'
que toma 4 argumentos, cada uno de los cuales es solid
o none
. Estos argumentos están ordenados según el patrón que se describe aquí . Por ejemplo, style='border-style: solid none solid none;'
donde los cuatro parámetros corresponden respectivamente a la
'border-style: top right bottom left;'
bordes de la celda. Por las razones descritas después de este ejemplo, hay muchas formas de cambiar el código siguiente que no producirían cambios en la tabla que se muestra realmente .
Fuente wiki | Resultado renderizado | |||||||||
---|---|---|---|---|---|---|---|---|---|---|
{ | clase = "wikitable" | - | Top_Left ' border-style : arriba a la derecha abajo a la izquierda ; ' -> | style = 'estilo de borde : sólido sólido ninguno ninguno ; ' | Top_Center | Top_Right | - | style = ' border-style : ninguno ninguno sólido sólido ; ' | Middle_Left | style = ' border-style : ninguno ninguno ninguno ninguno ; ' | Middle_Center | style = 'estilo de borde : sólido sólido ninguno ninguno ; ' | Middle_Right | - | Bottom_Left | style = ' border-style : ninguno ninguno sólido sólido ; ' | Bottom_Center | Bottom_Right | } |
|
Sin embargo, tenga en cuenta que en la siguiente tabla, ninguno de los Middle_Center
bordes de la celda central (es decir ) se elimina a pesar del código style='border-style: none none none none;'
:
Fuente wiki | Resultado renderizado | |||||||||
---|---|---|---|---|---|---|---|---|---|---|
{ | clase = "wikitable" | - | Top_Left || Top_Center || Top_Right | - | Middle_Left | style = ' border-style : ninguno ninguno ninguno ninguno ; ' | Middle_Center | Middle_Right | - | Bottom_Left || Bottom_Center || Bottom_Right | } |
|
Esto sucede porque el código class="wikitable"
coloca un borde (superior, derecho, inferior e izquierdo) alrededor de cada celda de la tabla de modo que, por ejemplo, en realidad hay dos bordes entre las celdas "Middle_Center" y "Middle_Right". Entonces, para eliminar el borde entre las celdas "Middle_Center" y "Middle_Right", es necesario eliminar tanto el borde derecho de "Middle_Center" como el borde izquierdo de "Middle_Right":
Fuente wiki | Resultado renderizado | |||||||||
---|---|---|---|---|---|---|---|---|---|---|
{ | clase = "wikitable" | - | Top_Left || Top_Center || Top_Right | - | Middle_Left ' border-style : arriba a la derecha abajo a la izquierda ; ' -> | style = ' border-style : ninguno ninguno ninguno ninguno ; ' | Middle_Center | style = ' border-style : ninguno ninguno ninguno ninguno ; ' | Middle_Right En la anterior línea, las tres más a la izquierda "ninguno" argumentos puede ser reemplazado con "sólidos" (o más válidos los argumentos) y no podría haber ningún cambio a la tabla que se muestra. Sólo el cuarto argumento, el cual es de Middle_Right izquierda frontera, necesita para ser "ninguno". Por ejemplo, la línea de arriba podría ser reemplazado con : | style = ' estilo de borde: sólido sólido sólido ninguno;' | Middle_Right -> | - | Bottom_Left || Bottom_Center || Bottom_Right | } |
|
Tenga en cuenta que reemplazar {| class="wikitable"
con
{| style="border-collapse: collapse;"
tiene el efecto de eliminar todos los bordes de celda que de otro modo aparecerían de forma predeterminada alrededor de cada celda de la tabla. Con este cambio, debe insertar un solo borde de celda entre dos celdas adyacentes en lugar de eliminar dos bordes de celda.
Operaciones de fila
Altura
Frontera
Alineación
Indexación
Operaciones de columna
Establecer anchos de columna
Para forzar el ancho de las columnas a requisitos específicos, en lugar de aceptar el ancho del elemento de texto más ancho en las celdas de una columna, siga este ejemplo. Tenga en cuenta que se fuerza el ajuste del texto .
Fuente wiki | Resultado renderizado | |||||||||
---|---|---|---|---|---|---|---|---|---|---|
{ | class = "wikitable" | - ! alcance = "col" estilo = " ancho : 50 px ; " | Nombre ! alcance = "col" estilo = " ancho : 250 px ; " | ¡ Efecto ! alcance = "col" style = " ancho mínimo : 225 px ; ancho máximo : 300 px ; " | Juegos encontrados en | - | Poké Ball || Poké Ball normal || Todas las versiones | - | Gran pelota || Mejor que una Poké Ball || Todas las versiones | } |
|
Para establecer el ancho de columna en una tabla sin encabezados, especifique el ancho en la primera celda de cada columna.
Marcado Wiki:
{| class = "wikitable"| -| style = "ancho: 100pt;" | Esta columna tiene 100 puntos de ancho| style = "ancho: 200pt;" | Esta columna tiene 200 puntos de ancho| style = "ancho: 300pt;" | Esta columna tiene 300 puntos de ancho| -| bla || blih || azul|}
Esta columna tiene 100 puntos de ancho | Esta columna tiene 200 puntos de ancho | Esta columna tiene 300 puntos de ancho |
paja | blih | azul |
También puede usar porcentajes, como para igualar los anchos de una tabla de dos columnas estableciendo una de ellas en style="width: 50%;"
.
Una aplicación de la configuración de los anchos es alinear columnas de tablas consecutivas. Las siguientes son tablas independientes, con columnas configuradas en 350px y 225px. Advertencia: la configuración de tamaños de píxeles específicos está en desuso, ya que interfiere con la capacidad del navegador para ajustar el contenido para adaptarse a la ventana del navegador, el tamaño del dispositivo, los límites de tamaño de fuente del usuario y otras restricciones. Se prefiere encarecidamente utilizar tamaños relativos, en porcentaje o en valores em .
País | Capital |
---|---|
Países Bajos | Amsterdam |
País | Capital |
---|---|
Francia | París |
Nowrap
En una tabla que ocupa todo el ancho de una página, las celdas más estrechas que la celda más ancha tienden a ajustarse. Para evitar que una columna completa se ajuste, utilícela style="white-space: nowrap;"
en una celda sin encabezado en la celda más larga / más ancha para afectar a toda la columna.
Sin nowrap
, como aparece en un navegador:
{| class = "ordenable wikitable"| -! alcance = "col" | Episodio ! alcance = "col" | Fecha ! alcance = "col" | Resumen| -| "El viaje comienza"| 1 de enero de 2010| [[ Lorem ipsum ]] dolor sit amet, [...] | -| "Cuando los episodios atacan"| 8 de enero de 2010| Lorem ipsum dolor sit amet, [...]| -| "Hasta luego"| 15 de enero de 2010| Lorem ipsum dolor sit amet, [...]|}
Episodio | Fecha | Resumen |
---|---|---|
"El viaje comienza" | 1 de enero de 2010 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud ejercicio ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint Ocecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. |
"Cuando los episodios atacan" | 8 de enero de 2010 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud ejercicio ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint Ocecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. |
"Hasta la vista" | 15 de enero de 2010 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud ejercicio ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint Ocecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. |
Con nowrap
, en las columnas Episodio y Fecha, tal como aparece en un navegador:
{| class = "ordenable wikitable"| -! alcance = "col" | Episodio ! alcance = "col" | Fecha ! alcance = "col" | Resumen| -| "El viaje comienza"| 1 de enero de 2010| [[ Lorem ipsum ]] dolor sit amet, [...] | -| style = "white-space: nowrap;" | "Cuando los episodios atacan"| 8 de enero de 2010| Lorem ipsum dolor sit amet, [...]| -| "Hasta luego"| style = "white-space: nowrap;" | 15 de enero de 2010| Lorem ipsum dolor sit amet, [...]|}
Episodio | Fecha | Resumen |
---|---|---|
"El viaje comienza" | 1 de enero de 2010 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud ejercicio ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint Ocecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. |
"Cuando los episodios atacan" | 8 de enero de 2010 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud ejercicio ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint Ocecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. |
"Hasta la vista" | 15 de enero de 2010 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud ejercicio ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint Ocecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. |
Información sobre herramientas
Puede agregar información sobre herramientas a las columnas utilizando la plantilla {{ H: title }}. Simplemente reemplace el título de la columna con {{H:title|The tool tip|Column title}}
, lo que hace que aparezca así: Título de la columna .
Ejemplos más complejos
Mezcla
Nota: Este ejemplo no es accesible y debe evitarse tanto como sea posible. Por ejemplo, las tablas anidadas (tablas dentro de tablas) deben separarse en tablas distintas cuando sea posible.
Aquí hay un ejemplo más avanzado, que muestra algunas opciones más disponibles para crear tablas.
Los usuarios pueden jugar con estos ajustes en su propia mesa 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. Trate de mantener el marcado en las tablas relativamente simple; recuerde, ¡otras personas también van a editar el artículo! Sin embargo, este ejemplo debería dar una idea de lo que es posible.
Marcado Wiki:
Texto antes de la tabla centrada ...{| style = "border: 1px solid black; border-spacing: 0; margin: 1em auto;"| + '' ' Una tabla de ejemplo ' ''| -! style = "borde: 1px negro sólido; relleno: 5px; fondo: #efefef;" | Primer encabezado! colspan = "2" style = "borde: 1 px negro sólido; relleno: 5 px; fondo: #ffdead;" | Segundo encabezado| -| style = "borde: 1 px negro sólido; relleno: 5 px;" | Arriba a la izquierda| style = "borde: 1 px negro sólido; relleno: 5 px;" | Media alta| rowpan = "2" style = "borde: 1 px negro sólido; borde inferior: 3 px gris sólido; relleno: 5 px; alineación vertical: superior;" |Lado derecho| -| style = "borde: 1 px negro sólido; borde inferior: 3 px gris sólido; relleno: 5 px;" | Abajo a la izquierda| style = "borde: 1 px negro sólido; borde inferior: 3 px gris sólido; relleno: 5 px;" | Medio bajo| -| colspan = "3" style = "borde: 1px negro sólido; alineación de texto: centro;" |Texto antes de una tabla anidada ...{|| + '' Una mesa en una mesa ''| -| style = "text-align: center; width: 150px;" | [[Archivo: Wiki.png]]
| style = "text-align: center; width: 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 centrada
Como aparece en un navegador:
Texto antes de la tabla centrada ...
Primer encabezado | Segundo encabezado | |||||
---|---|---|---|---|---|---|
Arriba a la izquierda | Media alta | Lado derecho | ||||
Abajo a la izquierda | Medio bajo | |||||
Texto antes de una tabla anidada ...
... texto después de una tabla anidada |
... texto después de la tabla centrada
Imágenes flotantes en el centro
Se puede usar una tabla para envolver una imagen, de modo que la tabla pueda flotar hacia el centro de la página (como usar :) style="float: right;"
. Sin embargo, los márgenes de la tabla, el borde y el tamaño de la fuente deben configurarse con precisión para que coincidan con la visualización de una imagen típica. El parámetro File-spec |thumb
(aunque se crea una miniatura automática al ancho de preferencia del usuario) fuerza un margen izquierdo ancho que aprieta el texto cercano, por lo que el parámetro |center
se puede agregar para suprimir el relleno del margen izquierdo. Sin embargo, a |center
veces coloca el título en una segunda línea (debajo de un cuadro centrado "[]"), por lo que |thumb
podría omitirse y simplemente codificar el tamaño de la imagen, agregando un borde gris (#BBB). Usando parámetros precisos para hacer coincidir 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 = "tamaño de fuente: 86%;"| style = "vertical-align: top;" | [[ Archivo: DuraEuropos-TempleOfBel.jpg | 180px ]] ->
Templo de [[ Bel (mitología) | Bel ]] (flotante)|}
El texto dentro de la tabla flotante tiene el tamaño style="font-size: 86%;"
. Esa tabla de imagen flotante flota en un cuadro de imagen típico, pero permite ajustar el margen izquierdo de la imagen (vea el ejemplo de templo flotando a continuación).
Cuadro de información A | |
---|---|
Este cuadro de información de muestra muestra cómo el cuadro de imagen flotante se alinea hacia el centro. |
Templo de Bel (flotante) |
El texto de la leyenda se puede omitir o eliminar el parámetro "thumb |" por lo que el título está oculto hasta que se muestre con el mouse. Desafortunadamente, el parámetro |thumb
(utilizado para mostrar el título) también controla la visualización en miniatura automática para cambiar el tamaño de las imágenes según el tamaño de las preferencias del usuario. Para tener un tamaño de miniatura automático y al mismo tiempo ocultar el título, use en |frameless|right
lugar de |thumb
.
Un conjunto de imágenes con parámetro |left
tiene un amplio margen del lado derecho (margen opuesto del parámetro |right
), por lo que se puede lograr flotar hacia la izquierda con un conjunto de imágenes como |center
dentro de una tabla con style = "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ía 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 usan |right
, luego vienen las tablas flotantes y, por último, cualquier ajuste de texto que aún pueda caber. Si la primera palabra del texto es demasiado larga, ningún texto cabrá para completar el lado izquierdo, así que tenga cuidado de 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 una sola imagen, flotan para alinearse a lo largo de la página, según el ancho de la página. El texto se aprieta para permitir tantas tablas flotantes como puedan caber, como alineado automáticamente, luego ajusta el texto que aún pueda caber en el lado izquierdo.
... por flotación: derecha |
... imágenes envueltas ... |
Todos estos... |
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 que se envuelven (al revés, de derecha a izquierda), como si cada tabla fuera una palabra de texto para ajustar a lo largo y a lo ancho del página. Para ajustar en la dirección típica (ajustar de izquierda a derecha), defina todas esas tablas flotantes, en cambio, como tablas del lado izquierdo usando el parámetro superior style="float:left; margin:0.46em 0.2em;"
. Varias imágenes flotantes permiten una composición tipográfica más flexible de imágenes alrededor del texto.
Uso combinado de COLSPAN y ROWSPAN
Fuente wiki | Resultado renderizado | |||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
{| class = "wikitable"| -! Columna 1 !! Columna 2 !! Columna 3| -| rowpan = "2" | A| colspan = "2" style = "text-align: center;" | B| -| C| D| -| mi| rowpan = "2" colspan = "2" style = "text-align: center;" | F| -| GRAMO| -| colspan = "3" style = "text-align: center;" | H|} |
|
Tenga en cuenta que el uso rowspan="2"
de la celda G combinado con la rowspan="3"
celda F para obtener otra fila debajo de G y F no funcionará, porque todas las celdas (implícitas) estarían vacías. Asimismo, las columnas completas no se muestran si todas sus celdas están vacías. Es posible que los bordes entre las celdas vacías y no vacías tampoco se muestren (según el navegador); utilícelos
para llenar una celda vacía con contenido ficticio.
A continuación se muestra la misma tabla con el orden de las filas y celdas declaradas entre paréntesis. También se muestran los usados rowspan
y colspan
.
Columna 1 (fila 1 celda 1) | Columna 2 (fila 1 celda 2) | Columna 3 (fila 1 celda 3) |
---|---|---|
A (fila 2 celda 1) rowspan="2" | B (fila 2 celda 2) colspan="2" | |
C (fila 3 celda 1) | D (fila 3 celda 2) | |
E (fila 4 celda 1) | F (fila 4 celda 2) rowspan="2" colspan="2" | |
G (fila 5 celda 1) | ||
H (fila 6 celda 1) colspan="3" |
Tenga en cuenta que aunque la celda C está en la columna 2, C es la primera celda declarada en la fila 3, porque la columna 1 está ocupada por la celda A , que se declaró en la fila 2. La celda G es la única celda declarada en la fila 5, porque la celda F ocupa las otras columnas pero se declaró en la fila 4.
Soluciones alternativas
Alineación del punto decimal
Desafortunadamente, la única forma de alinear columnas de números en el punto decimal es usar dos columnas, la primera justificada a la derecha y la segunda a la izquierda.
Fuente wiki | Resultado renderizado | ||||||
---|---|---|---|---|---|---|---|
{ | style = " border-collapse : collapse ; " | style = " text-align : right ; " | 432 || .1 | - | style = " text-align : right ; " | 43 || .21 | - | style = " text-align : right ; " | 4 || .321 | } |
|
Si la columna de números aparece en una tabla con relleno de celda o bordes de celda, aún puede alinear los puntos decimales sin un espacio desagradable en el medio, forzando el borde y el relleno entre esas dos columnas.
Fuente wiki | Resultado renderizado | ||||||||
---|---|---|---|---|---|---|---|---|---|
{ | class = "wikitable" ! colspan = 2 | Título | - | style = " text-align : right ; border-right : none ; padding-right : 0 ; " | 432 | style = " text-align : left ; border-left : none ; padding-left : 0 ; " | .1 | - | style = " text-align : right ; border-right : none ; padding-right : 0 ; " | 43 | style = " text-align : left ; border-left : none ; padding-left : 0 ; " | .21 | - | style = " text-align : right ; border-right : none ; padding-right : 0 ; " | 4 | style = " text-align : left ; border-left : none ; padding-left : 0 ; " | .321 | } |
|
O, alternativamente, se puede utilizar la plantilla {{ celda decimal }}:
Fuente wiki | Resultado renderizado | ||||||||
---|---|---|---|---|---|---|---|---|---|
{ | class = "wikitable" ! colspan = 2 | Encabezado | - | {{ celda decimal | 432.1 } } | - | { { celda decimal | 43,21 } } | - | { { celda decimal | 4.321 } } | } |
|
El uso de dos columnas como esta tiene la desventaja de que la búsqueda en la página web (ya sea con un navegador o un motor de búsqueda) generalmente no podrá encontrar texto que se extienda a ambos lados del límite de la columna.
Además, si la tabla tiene espacio entre celdas (y por lo tanto border-collapse=separate
), lo que significa que las celdas tienen bordes separados con un espacio entre ellos, ese espacio seguirá siendo visible.
Una forma más burda de alinear columnas de números es usar un espacio de figura
, que está destinado a ser el ancho de un número, aunque en la práctica depende de la fuente:
Fuente wiki | Resultado renderizado | |||
---|---|---|---|---|
{ | | 432,1 | - | & amp ; # 8199 ; 43,21 | - | & amp ; # 8199 ; & amp ; # 8199 ; 4,321 | } |
|
Más compañeros en esta línea son: espacio de puntuación (
) para sustituir un punto o una coma, en −
lugar del guión-guión fácilmente disponible en el teclado de la máquina de escribir : este es el mismo ancho que el signo más, también el guión de figura posiblemente sea el más útil para números de teléfono que obviamente no encontrará en Wikipedia.
Cuando se utilizan fuentes OpenType , también se pueden alternar entre y ; esto es especialmente visible en el kerning del dígito árabe ⟨1⟩. En el navegador estándar, las fuentes sans-serif ⟨1⟩ ocupan el mismo ancho que otros dígitos, es decir. funciona como si estuviera encendido.font-variant-numeric:tabular-nums
font-variant-numeric:proportional-nums
font-variant-numerals:tabular-nums
Algunos pueden encontrar {{ 0 }} útil para la alineación.
Como último recurso, al usar texto preformateado, puede prescindir de la función de tabla por completo y simplemente comenzar las líneas con un espacio y poner espacios para colocar los números; sin embargo, debe haber una buena razón para usar el formato preformateado. texto en un artículo:
Fuente Wiki (¡solo espacios!): | Resultado renderizado |
---|---|
432 . 1 43 . 21 4 . 321 | 432.1 43,21 4.321 |
Mesas no rectangulares
{{diagonal split header|HEADER-FOR-ROW-HEADERS|HEADER-FOR-COLUMN-HEADERS}}
se puede usar para dividir diagonalmente una celda de encabezado, como en la celda superior izquierda a continuación: [nota 3]
Fuente wiki | Resultado renderizado | ||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
{| class = "wikitable" ! {{encabezado dividido en diagonal | Desde | Hasta}} ! ¡¡Sólido !! Líquido !! Gas| -! Sólido| Transformación sólido-sólido || Derritiendo || Sublimación| -! Líquido| Congelación || {{ sdash }} || Ebullición / evaporación| -! Gas| Deposición || Condensación || {{ sdash }}|} |
|
Los bordes de las celdas se pueden ocultar agregando border: none; background: none;
atributos de estilo de la tabla o la celda (es posible que no funcionen en navegadores antiguos). Otro uso es implementar tablas alineadas de varias columnas.
Fuente wiki | Resultado renderizado | |||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
{| class = "wikitable" style = "border: none; background: none;"! colspan = "2" rowspan = "2" style = "border: none; background: none;" | [[Archivo: Pfeil_SO.svg | none | link = | 20px]] ! colspan = "3" | A| -! ¡¡Sólido !! Líquido !! Gas| -! rowpan = "3" | ¡ De ! Sólido| Transformación sólido-sólido || Derritiendo || Sublimación| -! Líquido| Congelación || {{ sdash }} || Ebullición / evaporación| -! Gas| Deposición || Condensación || {{ sdash }}|} |
|
Tenga en cuenta que la eliminación del enlace en una imagen depende de que sea puramente decorativa (ya que los dispositivos de asistencia lo ignorarán) .
Fuente wiki | Resultado renderizado | ||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
{| class = "wikitable" style = "border: none; background: none;"! alcance = "col" | Año ! alcance = "col" | Tamaño| rowpan = "5" style = "border: none; background: none;" |! alcance = "col" | Año ! alcance = "col" | Tamaño| rowpan = "5" style = "border: none; background: none;" |! alcance = "col" | Año ! alcance = "col" | Tamaño| -| 1990 || 1000 |
|
Centrado
Clases
Hay varias otras clases de CSS , además de las básicas class="wikitable"
, documentadas anteriormente .
En la primera línea del código de la tabla, después de {|
, en lugar de especificar un estilo directamente, también puede especificar una clase CSS, que puede usarse para aplicar estilos. El estilo de esta clase se puede especificar de varias formas:
- en el propio software, por máscara (por ejemplo, la clase ordenable )
- colectivamente para todos los usuarios de una wiki en MediaWiki: Common.css (por ejemplo, en este y algunos otros proyectos hay o existió la clase wikitable, luego movida a shared.css )
- por separado por máscara en MediaWiki: Monobook.css, etc.
- individualmente en una wiki en una subpágina de usuario
- individualmente, pero conjuntamente para tablas de la clase en cuestión en todas las páginas web, en la computadora local del usuario.
En lugar de recordar los parámetros de la tabla, solo incluye una clase apropiada después de {|
. Esto ayuda a mantener la coherencia en el formato de la tabla y puede permitir un único cambio en la clase para solucionar un problema o mejorar el aspecto de todas las tablas que la utilizan a la vez. Por ejemplo, esto:
Fuente wiki | Resultado renderizado | ||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
{ | style = " border-spacing : 2 px ; " | + Tabla de multiplicar | - ! alcance = "col" | & veces ; ! alcance = "col" | 1 ! alcance = "col" | 2 ! alcance = "col" | 3 | - ! alcance = "fila" | 1 | 1 || 2 || 3 | - ! alcance = "fila" | 2 | 2 || 4 || 6 | - ! alcance = "fila" | 3 | 3 || 6 || 9 | - ! alcance = "fila" | 4 | 4 || 8 || 12 | - ! alcance = "fila" | 5 | 5 || 10 || 15 | } |
|
se convierte en esto:
Fuente wiki | Resultado renderizado | ||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
{ | class = "wikitable" | + Tabla de multiplicar | - ! alcance = "col" | & veces ; ! alcance = "col" | 1 ! alcance = "col" | 2 ! alcance = "col" | 3 | - ! alcance = "fila" | 1 | 1 || 2 || 3 | - ! alcance = "fila" | 2 | 2 || 4 || 6 | - ! alcance = "fila" | 3 | 3 || 6 || 9 | - ! alcance = "fila" | 4 | 4 || 8 || 12 | - ! alcance = "fila" | 5 | 5 || 10 || 15 | } |
|
simplemente reemplazando CSS en línea para la tabla por class="wikitable"
. Esto se debe a que la wikitable
clase en MediaWiki: Common.css contiene una serie de table.wikitable
reglas de estilo CSS. Todos estos se aplican a la vez cuando marca una tabla con la clase. Luego, puede agregar reglas de estilo adicionales si lo desea. Estos anulan las reglas de la clase, lo que le permite usar el estilo de la clase como base y desarrollarlo:
Fuente wiki | Resultado renderizado | ||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
{ | class = "wikitable" style = " estilo de fuente : cursiva ; tamaño de fuente : 120 % ; borde : 3 px punteado rojo ; " | + Tabla de multiplicar | - * ! alcance = "col" | & veces ; ! alcance = "col" | 1 ! alcance = "col" | 2 ! alcance = "col" | 3 | - ! alcance = "fila" | 1 | 1 || 2 || 3 | - ! alcance = "fila" | 2 | 2 || 4 || 6 | - ! alcance = "fila" | 3 | 3 || 6 || 9 | - ! alcance = "fila" | 4 | 4 || 8 || 12 | - ! alcance = "fila" | 5 | 5 || 10 || 15 | } |
|
Observe que la tabla conserva el fondo gris de la wikitable
clase y los encabezados todavía están en negrita y centrados. Pero ahora el formato de texto ha sido anulado por la style=
declaración local ; todo el texto de la tabla se ha puesto en cursiva y tiene un tamaño normal del 120%, y el borde wikitable ha sido reemplazado por el borde rojo discontinuo.
Mesas plegables
Las clases también se pueden utilizar para contraer tablas, por lo que están ocultas de forma predeterminada. Utilice la clase mw-collapsible
para habilitar el comportamiento de colapso. Las tablas plegables también se pueden ordenar al incluir también la sortable
clase . De forma predeterminada, una tabla plegable comienza a expandirse. Para cambiar esto, agregue la clase adicional mw-collapsed
. Alternativamente, puede agregar autocollapse
, en lugar de mw-collapsed
, que colapsará automáticamente la tabla si dos o más elementos colapsables están presentes en la página.
Nota : Las versiones anteriores de este artículo recomendaban la collapsible
clase, pero mw-collapsible
ahora se prefiere. Es una característica del software MediaWiki, no una personalización local, y puede usarse para hacer que cualquier elemento sea plegable, no solo tablas. mw-collapsible
tampoco requiere una fila de encabezado en la tabla, como lo collapsible
hizo. Las tablas mostrarán los controles "[ocultar]" / "[mostrar]" en la primera fila de la tabla (sea o no una fila de encabezado), a menos que haya un título de tabla presente.
Ejemplo:
Fuente wiki | Resultado renderizado | |||
---|---|---|---|---|
{ | class = "wikitable mw- collapsible autocollapse" | - ! Encabezado | - | Contenido que comienza oculto | - | contenido más oculto | } |
|
Sin una fila de encabezado
Fuente wiki | Resultado renderizado | ||
---|---|---|---|
{| class = "wikitable ordenable mw-collapsible" |
|
Fuente wiki | Resultado renderizado | ||||
---|---|---|---|---|---|
{| class = "wikitable ordenable mw-collapsible mw-collapsed" |
|
Las tablas con subtítulos se contraerán con el título de la tabla. Utilice {{ nowrap }} para evitar que el título se ajuste a una pequeña columna vertical cuando la tabla está contraída.
Fuente wiki | Resultado renderizado | |||
---|---|---|---|---|
{| class = "wikitable ordenable mw-collapsible"| + {{nowrap | Título de tabla algo largo}} |
|
Fuente wiki | Resultado renderizado | |||
---|---|---|---|---|
{| class = "wikitable ordenable mw-collapsible mw-collapsed"| + {{nowrap | Título de tabla algo largo}} |
|
Tablas clasificables
Las tablas se pueden ordenar agregando CSS sortable
; para obtener más información, consulte Ayuda: Clasificación . Dado que esto puede ser muy útil, es aconsejable tener en cuenta las posibilidades y limitaciones de esta función al diseñar una mesa. Por ejemplo:
- No divida una tabla en secciones con subtítulos que abarquen varias filas. En su lugar, se puede crear una columna adicional que muestre el contenido de estos encabezados en cada fila, de forma breve.
- En una columna de números, no coloque texto como "ca". o "aprox." antes o después de un número: romperá la clasificación numérica. No coloque ningún texto o caracteres alfabéticos en ninguna celda de una columna para ordenarlos numéricamente. Trate de no poner un rango de números (no afecta la posición de clasificación para el modo de clasificación numérica, y en el caso de un rango, el primer número determina la posición, pero si, posiblemente después de ordenar esta u otra columna, el elemento es en la parte superior, induce el modo de clasificación alfabética). En su lugar, utilice un "valor de clasificación de datos" para anular el contenido mostrado en lo que respecta a su ordenabilidad para este elemento.
Una forma larga de contenido abreviado se puede poner como leyenda fuera de la tabla.
Fuente wiki | Resultado renderizado | ||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
{| class = "wikitable ordenable"| + Mesa clasificable| -! alcance = "col" | Alfabético! alcance = "col" | Numérico! alcance = "col" | Fecha! alcance = "col" class = "inordenable" | Incalculable| -| d || 20 || 2008-11-24 || Esto| -| b || 8 || 2004-03-01 || columna| -| a || 6 || 1979-07-23 || no puedo| -| c || 4 || 1492-12-08 || ser| -| e || 0 || 1601-08-13 || ordenados.|} |
|
Problemas de clasificación numérica y por año
Clasificando y colapsando
Es posible contraer una tabla ordenable. Para hacerlo, debe usar el código . Tomar la tabla anterior y hacerla plegable le da esto:{| class="wikitable sortable mw-collapsible"
Fuente wiki | Resultado renderizado | ||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
{| class = "wikitable ordenable mw-collapsible"| + {{nowrap | Tabla ordenable y contraíble}}| -! alcance = "col" | Alfabético! alcance = "col" | Numérico! alcance = "col" | Fecha! alcance = "col" class = "inordenable" | Incalculable| -| d || 20 || 2008-11-24 || Esto| -| b || 8 || 2004-03-01 || columna| -| a || 6 || 1979-07-23 || no puedo| -| c || 4,2 || 1492-12-08 || ser| -| e || 0 || 1601-08-13 || ordenados.|} |
|
Si desea que la tabla tenga el estado contraído de forma predeterminada, use el código en lugar de .{| class="wikitable sortable mw-collapsible mw-collapsed"
{| class="wikitable sortable mw-collapsible"
mw-datatable: resaltado de filas mediante el desplazamiento del cursor. Fondo blanco
- Nota:
class=mw-datatable
anula el color de fondo de una fila, pero no el color de fondo de las celdas individuales.
class=mw-datatable
permite resaltar filas. Esto facilita el seguimiento de los datos y la información en una fila, especialmente en tablas más amplias. Desplace el cursor sobre las tablas de mw-datatable a continuación para ver las bandas de color azul claro en las tablas con class=mw-datatable
.
class=mw-datatable
produce un fondo blanco para las celdas de datos ; while class="wikitable"
produce un fondo gris para las celdas de datos.
{| class = "mw-datatable"| -! 1 !! 2 !! 3| -| 1-1 || 2-1 || 3-1| -| 1-2 || 2-2 || 3-2|} produce:
| {| class = "wikitable"| -! 1 !! 2 !! 3| -| 1-1 || 2-1 || 3-1| -| 1-2 || 2-2 || 3-2|} produce:
|
Se puede usar en combinación con la clase wikitable
para un estilo más similar y un relleno de celda, al mismo tiempo que permite resaltar las filas con el mouse.
Fuente wiki | Resultado renderizado | |||||||||
---|---|---|---|---|---|---|---|---|---|---|
{| class = "wikitable mw-datatable"| -! 1 !! 2 !! 3| -| 1-1 || 2-1 || 3-1| -| 1-2 || 2-2 || 3-2|} |
|
Celdas que abarcan varias filas o columnas
Es posible crear celdas que se extiendan sobre dos o más columnas. Para esto, se usa . De manera similar, se pueden crear celdas que se extiendan sobre dos o más filas. Esto requiere . En el código de la tabla, se deben omitir las celdas que están cubiertas por dicho intervalo . El recuento de filas y columnas resultante debe encajar.|colspan=n | content
|rowspan=m | content
Fuente wiki | Resultado renderizado | |||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
{| class = "wikitable" style = "text-align: center;"! col1! col2! col3! col4| -! fila1| colspan = "2" | A| C| -! fila2| AA| BB| CC| -! fila3| AAA| rowpan = "2" | BBB| CCC| -! fila4| AAAA| CCCC|} |
|
En el código, la celda | colspan="2" | A
ocupa dos columnas. Tenga en cuenta que, en la siguiente columna, no existe una celda que se espera que contenga "B" .
Similar: en el código, la celda | rowspan="2" | BBB
ocupa dos filas. No existe una celda que se espera que contenga "BBBB" .
Enlace de sección o enlace de mapa a un ancla de fila
Para habilitar el ancla de un enlace de sección (o un enlace de mapa ), haciendo referencia a una fila específica dentro de una tabla, se debe agregar un parámetro al inicio de la fila o :id="section link anchor name"
|-
|- id="section link anchor name"
section link anchor name">
Tenga en cuenta que cada nombre de anclaje de enlace de sección debe ser diferente de todos los demás en la página (esto incluye nombres de encabezado), para crear un XHTML válido y permitir el enlace adecuado.
- Ejemplo de un enlace de mapa a una fila
Cuando se hace clic en una etiqueta de país, que contiene un enlace, en el mapa, el enlace codificado, por ejemplo, como [[#Table row 11|Slovenia]]
que hace referencia al ancla (dentro de la tabla), codificado como |- id="Table row 11"
, hace que la página se desplace de modo que la fila seleccionada de la tabla esté en la parte superior de la vista del navegador. Aquí, nosotros usamos la familia plantilla , y para diseñar una mesa para nosotros:{{Image label begin}}
{{Image label small}}
{{Image label end}}
|
|
Plantilla de fila
Independientemente de si se usa formato wikitable o HTML, el wikitexto de las filas dentro de una tabla, y a veces incluso dentro de una colección de tablas, puede tener mucho en común, por ejemplo:
- el código básico para una fila de la tabla
- código para el modo de color, alineación y clasificación
- textos fijos como unidades
- formatos especiales para clasificar
En tal caso, puede resultar útil crear una plantilla que produzca la sintaxis de una fila de la tabla, con los datos como parámetros. Esto puede tener muchas ventajas:
- cambiar fácilmente el orden de las columnas o eliminar una columna
- agregar fácilmente una nueva columna si muchos elementos de la nueva columna se dejan en blanco (si la columna se inserta y los campos existentes no tienen nombre, use un parámetro con nombre para el nuevo campo para evitar agregar valores de parámetro en blanco a muchas llamadas de plantilla)
- Computación de campos de otros campos, por ejemplo, densidad de población a partir de población y área.
- duplicar contenido y proporcionar etiquetas de extensión con
display: none;
el fin de tener un formato para clasificar y otro para mostrar - fácil especificación de un formato para una columna completa, como el color y la alineación
Ejemplo:
Usando m: Ayuda: Plantilla de fila de tabla / ejemplo ( hablar , backlinks , editar )
Fuente wiki | Resultado renderizado | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
{| class = "wikitable ordenable"| -! alcance = "col" | a ! alcance = "col" | b ! alcance = "col" | a / b{{ Ayuda: Tabla / plantilla de fila de ejemplo | 50 | 200 }}{{ Ayuda: Tabla / plantilla de fila de ejemplo | 8 | 11 }}{{ Ayuda: Plantilla de fila de tabla / ejemplo | 1000 | 81 }}|} |
|
Fila de tabla condicional
Para una fila condicional en una tabla, podemos tener:
Fuente wiki | Resultado renderizado | ||||
---|---|---|---|---|---|
{| class = "wikitable" {{#if: 1 | {{!}} - ! alcance = "fila" {{!}} fila uno, columna uno {{!}} fila uno, columna dos}} {{#if: | {{!}} - ! alcance = "fila" {{!}} fila dos, columna uno {{!}} fila dos, columna dos}} | - ! alcance = "fila" {{!}} fila tres, columna uno | fila tres, columna dos|} |
|
Con comentarios para explicar cómo funciona, donde observe cómo falta la segunda fila:
Fuente wiki | Resultado renderizado | ||||
---|---|---|---|---|---|
{| class = "wikitable" fila uno se muestra porque el '1' se evalúa como VERDADERO. -> {{#if: 1 | {{!}} - ! alcance = "fila" {{!}} fila uno, columna uno Cualquier {{!}} Se evalúa con el carácter de barra vertical '|' desde la plantilla '!' solo contiene '|'. -> {{!}} fila uno, columna dos}} fila dos NO se muestra porque el espacio entre ':' y '|' se evalúa como FALSO. -> {{#if: | {{!}} - ! alcance = "fila" {{!}} fila dos, columna uno {{!}} fila dos, columna dos}} Se muestra la fila tres. -> | - ! alcance = "fila" {{!}} fila tres, columna uno | fila tres, columna dos|} |
|
Otra sintaxis de tabla
Los tipos de sintaxis de tablas que admite MediaWiki son:
|
Sintaxis de Wikicode- HTML (y XHTML)
- XHTML y wikicode mixtos ( no usar )
Los tres son compatibles con MediaWiki y crean una salida HTML (actualmente) válida, pero la sintaxis de tubería es la más simple. La |
sintaxis mixta de HTML y wikicode (es decir, sin cerrar |
y |-
etiquetas) no seguirá siendo necesariamente compatible con el navegador en el futuro, especialmente en dispositivos móviles.
Consulte también el elemento HTML # Tablas . Tenga en cuenta, sin embargo, que el thead
, tbody
, tfoot
, colgroup
, y col
los elementos actualmente no están soportados en MediaWiki , el año 2015 a partir de julio[actualizar].
Comparación de la sintaxis de la tabla
XHTML | Wiki-tubería | |||||
---|---|---|---|---|---|---|
Mesa | | {| | ||||
Subtítulo | | |+ caption | ||||
Celda de encabezado |
| ! scope="col" | column header
| ||||
Fila | | |- | ||||
Celda de datos |
| | cell1 || cell2 || cell3 o | ||||
Atributo de celda | | | style="font-size: 87%;" | cell1 | ||||
Mesa de muestra |
| |||||
< tabla > < tr > < td > 1 td > < td > 2 td > tr > < tr > < td > 3 td > < td > 4 td > tr > < / mesa > | {|| 1 || 2| -| 3 || 4|} | |||||
Pros |
|
| ||||
Contras |
|
| ||||
XHTML | Wiki-tubería |
Sintaxis de tubería en términos del HTML producido
La sintaxis de tubería, desarrollada por Magnus Manske , sustituye a las tuberías ( |
) y otros símbolos del HTML. Existe un script en línea que convierte tablas HTML en tablas de sintaxis de canalización.
Las tuberías deben comenzar al principio de una nueva línea, excepto cuando se separan parámetros del contenido o cuando se usan ||
para separar celdas en una sola línea. Los parámetros son opcionales.
Mesas
Una tabla está definida por , que genera .{| parameters |}
params>...
Filas
Para cada tabla,
se genera una etiqueta HTML para la primera fila. Para comenzar una nueva fila, use:
| -
que genera otro
.
Los parámetros se pueden agregar así:
| - params
que genera .params>
Nota:
las etiquetas se abren automáticamente antes del primer
equivalente
las etiquetas se cierran automáticamente en otro
equivalente y en elequivalente
Células
Las celdas se generan así:
| cell1 | cell2 | celda3
o así:
| celda1 || celda2 || celda3
que ambos generan:
cell1
cell2 .
cell3
Es ||
igual a una nueva línea + |
.
Los parámetros en las celdas se pueden usar así:
| params | celda1 || params | celda2 || params | celda3
lo que resulta en:
params>cell1
params>cell2
params>cell3
Encabezados
El código utilizado produce un
, funcionando de la misma manera que ...
, pero con diferente estilo y significado semántico . Se ... !
usa un carácter en lugar de la apertura |
, y !!
se puede usar como ||
, para ingresar múltiples encabezados en la misma línea. Sin embargo, los parámetros todavía usan "|". Ejemplo:
! params | celda1
Subtítulos
Se
crea una etiqueta mediante la cual se genera el HTML .|+caption
También puede utilizar los parámetros: | + params | título que genera .
Plantillas de celda de tabla
{{ Plantillas de celda de tabla }} proporcionan un conjunto de plantillas para configurar el texto y el color en las celdas de manera estándar, produciendo resultados de stock como "Sí", "No" y "n / a", sobre fondos de color.
Encabezados de columna orientados verticalmente
A veces es deseable (como en una tabla compuesta predominantemente de números) rotar el texto de manera que proceda de arriba hacia abajo o de abajo hacia arriba en lugar de de izquierda a derecha o de derecha a izquierda. Anteriormente, el soporte del navegador para este tipo de estilo como un componente de HTML o CSS era esporádico (Internet Explorer era uno de los pocos navegadores que admite esto en hojas de estilo en cascada, aunque de una manera no estándar).
Incluya el texto de cada encabezado en una plantilla {{ encabezado vertical }}. Por ejemplo:
! {{encabezado vertical | Fecha / página}}
Si el texto incluye un signo igual, reemplácelo con {{=}}
.
08/05 | 4266 | 7828 | 7282 | 1105 | 224 | 161 | 916 | 506 | 231 |
---|---|---|---|---|---|---|---|---|---|
08/04 | 4127 | 6190 | 6487 | 1139 | 241 | 205 | 1165 | 478 | 301 |
Una solución alternativa que funciona en la mayoría de los navegadores, si no en todos, es utilizar imágenes en lugar del texto. Por ejemplo, la siguiente tabla usa imágenes SVG en lugar de texto para producir los encabezados de columna rotados:
08/05 | 4266 | 7828 | 7282 | 1105 | 224 | 161 | 916 | 506 | 231 |
---|---|---|---|---|---|---|---|---|---|
08/04 | 4127 | 6190 | 6487 | 1139 | 241 | 205 | 1165 | 478 | 301 |
Normalmente, un problema con este enfoque es que los lectores se dirigen a diferentes páginas cuando hacen clic en las imágenes. Para eliminar este problema, o para dirigir a los lectores a una página diferente , puede utilizar el |link=
parámetro de la File:
especificación. Un encabezado de columna se puede codificar de la siguiente manera:
! [[Archivo: wpvg vg project.svg | alt = VG: Project | link = '' 'Wikipedia: Videojuegos de WikiProject' '']]
La imagen enlaza con enlaces a la página Wikipedia: Videojuegos de WikiProject .
Al establecer el enlace en una cadena vacía (p [[File:wpvg hd date page.svg |link=]]
. Ej. ), No se produce ninguna navegación cuando los visitantes hacen clic en una imagen. Tenga en cuenta que también puede ser una buena idea colorear el texto de la imagen de azul si está utilizando las imágenes como enlaces. Además, SVG es el formato de imagen preferido en este caso porque se puede volver a escalar a cualquier tamaño mientras produce menos artefactos.
Un problema potencial más serio es que el "texto rotado" no es texto que pueda ser utilizado por lectores de pantalla y otras tecnologías para usuarios con discapacidad visual. Por lo tanto, esos usuarios no podrían "leer" los encabezados de las columnas. Además, los rastreadores web de los motores de búsqueda automatizados tampoco podrían leerlo. Esto se resuelve usando siempre el |alt=
parámetro en la File:
especificación de cada imagen para proporcionar el mismo texto que en la imagen rotada; vea |alt=VG: Project
en el ejemplo anterior.
Wikitable como galería de imágenes
Se puede usar un wikitable para mostrar imágenes una al lado de la otra, de manera similar a la de una galería de imágenes (formateada por
), pero con imágenes más grandes y menos áreas vacías alrededor de las fotos.
Se puede formatear una galería simple enmarcada usando class="wikitable"
para generar las líneas finas mínimas alrededor de las imágenes dentro de la tabla:
{| class = "wikitable" | - | [[ Archivo: Worms 01.jpg | 130px ]] | [[ Archivo: Worms Wappen 2005-05-27.jpg | 125px ]] | [[ Archivo: Liberty-statue-with-manhattan.jpg | 125px ]] | [[ Archivo: New-York-Jan2005.jpg | 125px ]] | - | Puente Nibelungen a Worms | Worms y sus ciudades hermanas | Estatua de la Libertad | Ciudad de Nueva York |}
Puente Nibelungen a Worms | Gusanos y sus ciudades hermanas | Estatua de la Libertad | Nueva York |
Una ventaja de las galerías de imágenes wikitables, en comparación con el
formato, es la capacidad de "cuadrar" cada imagen cuando se necesitan alturas similares, así que considere colocar tamaños de imagen de dos números (como 199x95px
), donde el segundo número limita la altura:
{| class = "wikitable" | [[ Archivo: Worms 01.jpg | 199x95px ]] | [[ Archivo: Worms Wappen 2005-05-27.jpg | 199x95px ]] | [[ Archivo: Liberty-statue-with-manhattan.jpg | 199x95px ]] | [[ Archivo: New-York-Jan2005.jpg | 100x95px ]] | - | Puente Nibelungen a Worms | Worms y sus ciudades hermanas | Estatua de la Libertad | Ciudad de Nueva York |}
Tenga en cuenta que las tres imágenes de tamaño 199x95px
parecen idénticas en altura, de 95px
(la cuarta imagen intencionalmente más pequeña). El "95px" fuerza la altura, mientras que se 199x
ajusta a los distintos anchos (incluso podría ser 999x
):
Puente Nibelungen a Worms | Gusanos y sus ciudades hermanas | Estatua de la Libertad | Nueva York |
Por lo tanto, el uso del tamaño 199x95px
(o 999x95px
, o lo que sea) produce el tamaño automático de altura más allá de la
etiqueta, y con la opción de establecer miniaturas más altas ( 199x105px
), o incluso tener algunas imágenes intencionalmente más pequeñas que otras imágenes de 95px
altura. Una altura muy corta (por ejemplo 70px
) permite muchas más imágenes en la mesa:
{| class = "wikitable" | - | [[ Archivo: Worms 01.jpg | 199x70px ]] | [[ Archivo: Estrella dorada en azul.gif | 199x70px ]] | [[ Archivo: Worms Wappen 2005-05-27.jpg | 199x70px ]] | [[ Archivo: Estrella dorada en rojo oscuro.gif | 199x70px ]] | [[ Archivo: Liberty-statue-with-manhattan.jpg | 199x70px ]] | [[ Archivo: Estrella dorada en azul.gif | 199x70px ]] | [[ Archivo: New-York-Jan2005.jpg | 199x70px ]] | - |}
La codificación wikitable anterior produce el resultado a continuación, de 7 columnas:
Una vez que las imágenes se han colocado en una wikitable, el control del formato se puede ajustar cuando se agregan más imágenes.
Desplazamiento / centrado
Las imágenes dentro de un wikitable se pueden cambiar insertando espacios que no se rompan (
) antes o después del código de la imagen (por ejemplo, [[Image:...]]
) . Sin embargo, el autocentrado simplemente requiere el uso del |center
parámetro (consulte WP: Sintaxis de imagen extendida # Ubicación ).
En el siguiente ejemplo, observe cómo se usa Col2 |center
, pero Col3 usa
:
{| class = "wikitable" | - | [[Archivo: Domtoren vanaf Brigittenstraat.jpg | 299x125px]] | [[Archivo: Utrecht 003.jpg | 299x125px | centro ]] | & nbsp; [[Archivo: Uitzicht - Domtoren.jpg | 299x125px]] & nbsp; | - | Torre Dom de Brigittenstraat | Claustro de la iglesia de Utrecht Dom | & nbsp; & nbsp; Vista desde el campanario |}
La codificación anterior genera la siguiente tabla: tenga en cuenta que la imagen del jardín central 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:
Torre Dom de Brigittenstraat | Garth del claustro de la Iglesia Dom de Utrecht | Vista desde el campanario |
También tenga en cuenta que la etiqueta ...
hizo una leyenda de tamaño de texto más pequeño. 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 = "tamaño de fuente: 87%;" | Vista desde el campanario
El atributo de columna, arriba, se usa style=
para establecer el tamaño de fuente para el título, después del segundo símbolo de barra.
A font-size: 65%;
es excesivamente pequeña, mientras que font-size: 87%;
es una fuente de tamaño medio, un poco más grande que la producida por la etiqueta .
Tablas de sangría
Si bien las tablas normalmente no deben tener sangría, cuando los párrafos que las rodean también tienen sangría, puede sangrar las tablas con uno o más dos puntos (" :
", el código de sangría normal ) al principio de una línea, de la misma manera que aplicaría sangría a cualquier otro contenido wiki.
Tenga en cuenta que la sangría aplicada solo a la primera línea de la definición de la tabla (la línea que comienza con " {|
") es suficiente para sangrar toda la tabla. No intente utilizar dos puntos para la sangría en ningún lugar dentro del resto del código de la tabla (ni siquiera al principio de una línea), ya que eso evitará que el software MediaWiki lea correctamente el código de la tabla.
Fuente wiki | Resultado renderizado | ||||||
---|---|---|---|---|---|---|---|
: { | class = "wikitable" | - ! Encabezado 1 ! Encabezado 2 | - | fila 1, celda 1 | fila 1, celda 2 | - | fila 2, celda 1 | fila 2, celda 2 | } |
|
La misma tabla sin sangría sería así:
Fuente wiki | Resultado renderizado | ||||||
---|---|---|---|---|---|---|---|
{ | class = "wikitable" | - ! Encabezado 1 ! Encabezado 2 | - | fila 1, celda 1 | fila 1, celda 2 | - | fila 2, celda 1 | fila 2, celda 2 | } |
|
Agregar banderas y vincular nombres de países en listas de países
- Esto es rápido. Funciona con wikitexto de tabla compacta o larga. Barras simples o dobles entre celdas.
- Nota: Usuario: PrimeHunter ( Talk ) proporcionó el código. Pídele ayuda.
- Nota: En las preferencias de edición, marque la casilla: "habilitar la barra de herramientas de edición. Esto a veces se denomina 'editor de wikitexto 2010'".
Asegúrese de que los países, estados, provincias o ciudades, etc. estén en la primera columna. La expresión regular envuelve todo el texto en la primera celda de cada fila con la plantilla. Entonces haga esto antes de agregar cualquier estilo a la primera columna.{{flaglist}}
{{flaglist|Country name}}
Haga clic en el enlace de edición de la fuente de wikitexto. Haga clic en "Avanzado" en la barra de herramientas de edición. Luego haga clic en el ícono de buscar y reemplazar a la derecha. Marque la casilla "Tratar la cadena de búsqueda como una expresión regular". Complete el cuadro "Buscar" con: Complete el cuadro "Reemplazar por" con: Luego haga clic en "Reemplazar todo". Casi todos los países estarán vinculados y tendrán banderas.(\|-.*\n\|\s*)([^\|\n]*)
$1{{flaglist|$2}}
Para los enlaces rojos, cree redireccionamientos según sea necesario a las plantillas de datos de país correctas . Guarde esta tabla inicial de forma permanente en un entorno limitado de usuario sin sobrescribirla. Esto es para que las redirecciones se mantengan debido a que están en uso en esa página de la zona de pruebas. De lo contrario, los administradores eliminarán los redireccionamientos no utilizados y usted tendrá que realizar esta tediosa y lenta tarea de redireccionamiento cada vez que actualice la tabla por completo. En el resumen de edición de dichos redireccionamientos, agregue algo como esto: "No elimine este redireccionamiento. A veces se usa en actualizaciones de [[NAME OF ARTICLE WITH TABLE]]
".
Alinear texto en las celdas del encabezado frente a otras celdas
Si no hay una alineación de texto global establecida en la línea superior del wikitexto de la tabla, entonces todo el texto se alinea a la izquierda, excepto las celdas de encabezado que están alineadas al centro por defecto.
Solo en las tablas con class=wikitable
el texto de la celda del encabezado no sigue la alineación de texto global establecida en la línea superior del wikitexto de la tabla.
Cuando se usa el class=wikitable
texto del encabezado, ahora permanece centrado tanto en la vista de escritorio como en la vista móvil, a menos que se modifique específicamente por celda de encabezado. Esto es cierto dondequiera que se encuentre la fila de encabezado (superior, inferior, central).
La alineación global del texto para todas las demás celdas se realiza colocando style=text-align:XXXX
en la línea superior del wikitexto de la tabla. Vea el ejemplo en la siguiente sección.
Alinear los datos en columnas de datos a la derecha
Las dos tablas siguientes utilizan class=wikitable
La tabla de la derecha también alinea el texto de todas las celdas (excepto las celdas de encabezado) a la derecha.
|
|
Si la mayoría de las columnas constan de celdas de datos, puede elegir alinear los datos a la derecha. Es fácil.
Simplemente agregue style=text-align:right
a la línea superior del wikitexto para la tabla:
{| class=wikitable style=text-align:right
o
{| class="wikitable sortable mw-datatable" style=text-align:right
y así.
Alinear el texto de la primera columna a la izquierda
Esto se puede hacer en el editor de fuentes de wikitext. En las preferencias de edición, marque la casilla: "habilitar la barra de herramientas de edición. Esto a veces se denomina 'editor de wikitexto 2010'".
En la sección de la tabla, haga clic en "editar fuente" (edición de wikitexto). Haga clic en "Avanzado" en la barra de herramientas de edición. Luego haga clic en el ícono de buscar y reemplazar a la derecha. En el formulario emergente, marque la casilla "Tratar la cadena de búsqueda como una expresión regular".
Complete el cuadro "Buscar" con (\|-\n\|)
. Complete el cuadro "reemplazar por" con
$1style=text-align:left|
Luego haga clic en "Reemplazar todo". Todo el texto de la primera columna se alineará a la izquierda de sus celdas.
Si por alguna razón esas celdas son celdas de encabezado, complete el cuadro "Buscar" con (\|-\n\!)
. Tenga en cuenta el signo de exclamación de una celda de encabezado. Complete el cuadro "reemplazar por" con
$1style=text-align:left|
.
Luego haga clic en "Reemplazar todo".
Conversión de hojas de cálculo y tablas de bases de datos a formato wikitable
- Consulte también la sección Editor visual más abajo y la información de la hoja de cálculo allí.
Para convertir desde hojas de cálculo (como las producidas por Gnumeric , Microsoft Excel o LibreOffice / OpenOffice.org / StarOffice Calc), puede utilizar el conversor Copiar y pegar de Excel a Wiki o el Generador de tablas de MediaWiki .
Puede guardar hojas de cálculo como .csv y usar el conversor de CSV a Wikitable . Otra versión está aquí .
El CSV Converter convierte valores separados por comas (CSV) para wikitext mesa o al HTML. Ver ( documentación ). Puede usar esto para importar tablas de hojas de cálculo y bases de datos (como MySQL , PostgreSQL , SQLite , FileMaker , Microsoft SQL Server & Access , Oracle , DB2 , etc.).
Convertir filas en columnas y columnas en filas
A veces es necesario transponer columnas y filas (mover filas a columnas y columnas a filas). Como ejemplo, los encabezados de año en la tabla de la izquierda a continuación deben convertirse en los encabezados de columna de la tabla de la derecha (truncados). Una forma de hacerlo es mediante una tabla dinámica en un programa de hoja de cálculo.
Año Expresar Velocidad 2019 Alabama 16,3 2019 Alaska 17,8 2019 Arizona 26,8 2019 Arkansas 13,5 2019 California 15 2019 CO 18 2019 Connecticut 34,7 2019 Delaware 48 2019 Florida 25,5 2019 Georgia 13,1 2019 HOLA 15,9 2019 IDENTIFICACIÓN 15,1 2019 ILLINOIS 21,9 2019 EN 26,6 2019 I A 11,5 2019 Kansas 14.3 2019 Kentucky 32,5 2019 LA 28,3 2019 ME 29,9 2019 Maryland 38,2 2019 MAMÁ 32,1 2019 MI 24,4 2019 Minnesota 14,2 2019 SRA 13,6 2019 mes 26,9 2019 MONTE 14,1 2019 nordeste 8.7 2019 Nevada 20,1 2019 NUEVA HAMPSHIRE 32 2019 Nueva Jersey 31,7 2019 Nuevo Méjico 30,2 2019 Nueva York 18,2 2019 CAROLINA DEL NORTE 22,3 2019 DAKOTA DEL NORTE 11,4 2019 OH 38,3 2019 OK 16,7 2019 O 14 2019 Pensilvania 35,6 2019 Rhode Island 29,5 2019 CAROLINA DEL SUR 22,7 2019 Dakota del Sur 10,5 2019 Tennesse 31,2 2019 TX 10,8 2019 Utah 18,9 2019 Vermont 23,8 2019 Virginia 18,3 2019 Washington 15,8 2019 VIRGINIA OCCIDENTAL 52,8 2019 Wisconsin 21,1 2019 WY 14,1 2018 Alabama 16.6 2018 Alaska 14,6 2018 Arizona 23,8 2018 Arkansas 15,7 2018 California 12,8 2018 CO 16,8 2018 Connecticut 30,7 2018 Delaware 43,8 2018 Florida 22,8 2018 Georgia 13,2 2018 HOLA 14.3 2018 IDENTIFICACIÓN 14,6 2018 ILLINOIS 21,3 2018 EN 25,6 2018 I A 9,6 2018 Kansas 12,4 2018 Kentucky 30,9 2018 LA 25,4 2018 ME 27,9 2018 Maryland 37,2 2018 MAMÁ 32,8 2018 MI 26,6 2018 Minnesota 11,5 2018 SRA 10,8 2018 mes 27,5 2018 MONTE 12,2 2018 nordeste 7.4 2018 Nevada 21,2 2018 NUEVA HAMPSHIRE 35,8 2018 Nueva Jersey 33,1 2018 Nuevo Méjico 26,7 2018 Nueva York 18,4 2018 CAROLINA DEL NORTE 22,4 2018 DAKOTA DEL NORTE 10,2 2018 OH 35,9 2018 OK 18,4 2018 O 12,6 2018 Pensilvania 36,1 2018 Rhode Island 30,1 2018 CAROLINA DEL SUR 22,6 2018 Dakota del Sur 6,9 2018 Tennesse 27,5 2018 TX 10,4 2018 Utah 21,2 2018 Vermont 26,6 2018 Virginia 17.1 2018 Washington 14,8 2018 VIRGINIA OCCIDENTAL 51,5 2018 Wisconsin 19,2 2018 WY 11,1 2017 Alabama 18 2017 Alaska 20,2 2017 Arizona 22,2 2017 Arkansas 15,5 2017 California 11,7 2017 CO 17,6 2017 Connecticut 30,9 2017 Delaware 37 2017 Florida 25,1 2017 Georgia 14,7 2017 HOLA 13,8 2017 IDENTIFICACIÓN 14,4 2017 ILLINOIS 21,6 2017 EN 29,4 2017 I A 11,5 2017 Kansas 11,8 2017 Kentucky 37,2 2017 LA 24,5 2017 ME 34,4 2017 Maryland 36,3 2017 MAMÁ 31,8 2017 MI 27,8 2017 Minnesota 13,3 2017 SRA 12,2 2017 mes 23,4 2017 MONTE 11,7 2017 nordeste 8.1 2017 Nevada 21,6 2017 NUEVA HAMPSHIRE 37 2017 Nueva Jersey 30 2017 Nuevo Méjico 24,8 2017 Nueva York 19,4 2017 CAROLINA DEL NORTE 24,1 2017 DAKOTA DEL NORTE 9.2 2017 OH 46,3 2017 OK 20,1 2017 O 12,4 2017 Pensilvania 44,3 2017 Rhode Island 31 2017 CAROLINA DEL SUR 20,5 2017 Dakota del Sur 8.5 2017 Tennesse 26,6 2017 TX 10,5 2017 Utah 22,3 2017 Vermont 23,2 2017 Virginia 17,9 2017 Washington 15,2 2017 VIRGINIA OCCIDENTAL 57,8 2017 Wisconsin 21,2 2017 WY 12,2 Expresar 2017 2018 2019 Alabama Alaska Arizona
Por ejemplo; Los datos de la tabla de tasas de sobredosis por estado para las tasas de mortalidad por sobredosis de drogas en los Estados Unidos y los totales a lo largo del tiempo provienen de un archivo csv . Se convierte a formato wikitable a través de uno de los convertidores csv mencionados anteriormente. Es la tabla de arriba a la izquierda. Para simplificar este ejemplo, los años antes de 2017 se han eliminado en el wikitexto. Luego se pega en un programa de hoja de cálculo como el software gratuito LibreOffice Calc .
Seleccione una celda de datos. Luego haga clic en el comando " Tabla dinámica " del menú Insertar. Haga clic en Aceptar en el cuadro emergente. En el siguiente cuadro de diálogo, arrastre " Año " al cuadro " Campos de columna " y arrastre " Estado " al cuadro " Campos de fila ". Arrastre " Tasa " al cuadro " Campos de datos ". Haga clic en Aceptar. La tabla se convertirá al nuevo formato con los años como encabezados de columna. Es más fácil de hacer que de describir. Para obtener ayuda, consulte: LibreOffice: Tablas dinámicas . Y aqui .
Copie la nueva tabla directamente desde la página de Calc en el editor visual, o en uno de los convertidores wikitables mencionados anteriormente. Luego use VE para eliminar la columna y la fila de suma.
Tablas y el editor visual (VE)
- Consulte también: mw: Ayuda: VisualEditor / User guide # Edición de tablas . Y vea: Commons: Convertir tablas y gráficos en código wiki o archivos de imagen .
Consulte Phab: T108245 : "Totalmente compatible con la edición básica de tablas en el editor visual". Consulte la lista de tareas. Tareas terminadas se golpearon . Puede ser difícil averiguar a partir del lenguaje técnico qué se ha mejorado exactamente o qué características se han agregado. Agregue información explicativa a continuación.
Las cajas de arena ayudan mucho. Por ejemplo; su página de usuario: Especial: MyPage . Cree y marque algunas cajas de arena personales también. Visual Editor se cargará muy rápido en entornos sandbox vacíos: Special: MyPage / Sandbox , Special: MyPage / Sandbox2 , Special: MyPage / Sandbox3 . Tantos como quieras. Comparta el enlace cuando solicite ayuda. Para encontrar todas sus cajas de arena: Especial: PrefixIndex / Usuario: - haga clic en el enlace, agregue el nombre de usuario al lugar etiquetado "Mostrar páginas con prefijo:".
Insertar fila o columna en blanco
Haga clic en el encabezado de una columna o fila. Luego haga clic en la flecha. En el menú emergente, haga clic en "Insertar".
Mover o eliminar columnas y filas
Haga clic en el encabezado de una columna o fila. Luego haga clic en la flecha. En el menú emergente, haga clic en "Mover" o "Eliminar".
Copiar columna de una tabla a otra
Esto es útil para muchas cosas. Por ejemplo; para actualizar rápidamente las listas de países o agregar / actualizar una columna de clasificación. Consulte Ayuda: Clasificación sobre columnas de clasificación y números de fila. Consulte también: Commons: convierta tablas y gráficos en código wiki o archivos de imagen . Consulte la sección sobre la actualización de la Lista de países por tasa de encarcelamiento .
Inicie el Editor visual. En la columna que está copiando, haga clic en la celda del encabezado o en la celda superior que desee. Luego presione Mayús y haga clic en una celda más abajo o al final de la columna. Esto seleccionará la columna hasta esa celda. Luego haga clic en "copiar" en el menú de edición de su navegador. En algunos navegadores, puede hacer esto desde el menú contextual emergente. Luego, haga clic en cualquier espacio en blanco de la página para anular la selección de la columna.
Vaya a la columna que desea reemplazar o completar (en esta tabla u otra). Asegúrese de que se haya iniciado el editor visual. Si está copiando toda la columna, incluida la celda del encabezado, seleccione solo la celda del encabezado para esa columna haciendo clic en ella. Luego haga clic en "pegar" en el menú de edición de su navegador. Puede pegar en una columna en blanco de la misma manera. Simplemente seleccione la celda del encabezado. Luego, desde su navegador: menú de edición> pegar.
O puede seleccionar parte de una columna y pegarla. Por ejemplo; si no desea reemplazar la celda del encabezado.
Todo lo anterior a veces funcionará al copiar hacia o desde una columna en una hoja de cálculo (como el software gratuito LibreOffice Calc ).
Nota: El Editor visual copiará las plantillas (como en una columna de nombres de países / estados / provincias con plantillas de banderas), pero no copiará el estilo en línea, como el estilo utilizado para alinear a la izquierda esos nombres. Eso se puede agregar de una vez en cualquier editor de texto. Por ejemplo; si la plantilla de bandera es la única plantilla en la tabla, reemplácela {{
constyle=text-align:left|{{
Copiar o eliminar varias filas
Haga clic en la celda de la esquina superior del área que desea seleccionar. Luego presione Mayús y haga clic en la celda de la esquina superior opuesta en la misma fila. Luego vaya directamente hacia abajo y presione Mayús y haga clic en la celda de la esquina inferior en el mismo lado del área que desea seleccionar. Ahora tendrá un rectángulo o cuadrado seleccionado de la tabla.
Haga clic en "copiar" o "cortar" según sea necesario desde el menú de edición de su navegador. "Eliminar" no funcionará para varias filas y columnas.
Haga clic en la celda de la esquina superior izquierda del área que desea pegar en una tabla. Luego haga clic en "pegar" en el menú de edición de su navegador. Puede llevar desde unos segundos hasta un minuto para áreas muy grandes. Es posible que primero desee hacer este trabajo en una caja de arena. Luego, guarde y edite más antes de poner cualquier cosa en un artículo.
"Cortar" vaciará las celdas seleccionadas. No los borra. Sin embargo, una vez vacío, es muy fácil eliminar todas las celdas, filas y columnas vacías en el editor de origen. Cambie a él haciendo clic en la flecha en la parte superior derecha de la ventana de edición.
Puede ser incluso más rápido usar el Editor visual para copiar las partes que desee de la tabla en una nueva tabla en blanco.
Copiar tabla de la página web al Editor visual
Ahora es posible copiar y pegar algunas tablas desde una página web directamente en Visual Editor (VE). No todas las tablas funcionan. Use una caja de arena vacía para hacer esto más rápidamente. Guárdelo y edite más antes de pegarlo en un artículo.
Seleccione la tabla en la página web. Luego haga clic en "copiar" en el menú de edición de su navegador. En algunos navegadores, puede hacer esto desde el menú contextual emergente. Inicie el editor visual en cualquier página. Luego pega la tabla en la página.
Si eso no funciona, haga clic en el menú Insertar y luego en "tabla". Por lo general, tiene seleccionado el primer encabezado de la tabla. Luego haga clic en "pegar" en el menú de edición de su navegador. Es posible que la mesa tarde un poco en aparecer. Puede llevar 3 segundos o hasta un minuto para mesas muy grandes.
Copie la tabla de la web a Excel2Wiki al editor de wikitext a VE
Para copiar tablas de páginas web que no se pueden copiar directamente en el Editor visual (como se describe en la sección anterior): Intente copiar la tabla en Excel2Wiki . Haga clic en "convertir". Copie y pegue el wikitexto de la tabla en el editor de wikitexto. Ahorrar. Realice más ediciones en VE.
Copie la lista (no en la tabla) a Excel2Wiki al editor de wikitexto a VE
Pegue cualquier lista (texto y / o números) en Excel2Wiki . Haga clic en "convertir". Copie y pegue el wikitexto de la tabla en el editor de wikitexto. Ahorrar. Realice más ediciones en VE. Por ejemplo; agregue más columnas o copie la columna y péguela en otras tablas. Antes de pegar una lista en Excel2Wiki, es posible que desee eliminar un bloque de texto. Algunos editores de texto pueden hacer esto cuando el texto está configurado en una fuente de ancho fijo como Courier New . Por ejemplo; Freeware NoteTab Light : menú Modificar> Bloquear> Cortar. Complete el formulario emergente con la columna inicial, el ancho del bloque, las filas del bloque. Haga clic en Aceptar y ese rectángulo de texto se eliminará. Esto ahorra mucho tiempo.
Ordene alfabéticamente o numéricamente con hojas de cálculo gratuitas y VE
- Nota: Para obtener más información, consulte Ayuda: Clasificación . Consulte la sección sobre cómo poner una mesa en orden alfabético inicial.
En los programas de hojas de cálculo se pueden hacer muchas cosas que no se pueden hacer en el editor visual. Seleccione y copie una tabla directamente de una página (no entre en el wikitexto o el HTML). Pegue la tabla en un programa de hoja de cálculo, como el software gratuito LibreOffice Calc (consulte la guía gratuita [1] ) u otro programa de hoja de cálculo. Consulte Lista de software de hoja de cálculo .
En Calc, haga clic en cualquier celda de la columna que desee ordenar y luego haga clic en una de las opciones de clasificación en el menú de datos en la parte superior de la ventana de Calc. Haga clic en "ascendente" o "descendente" para ordenar alfabéticamente o numéricamente según el contenido de la columna. Haga clic en "ordenar" para ver más opciones.
Para mover la (s) fila (s) de encabezado hacia arriba: Seleccione la (s) fila (s) completa (s). Para seleccionar la (s) fila (s) completa (s), haga clic en las columnas numeradas de Calc ubicadas en el extremo izquierdo de cualquier hoja. Mantenga presionada la tecla ALT. Haga clic con el botón izquierdo y mantenga presionada cualquier celda dentro de esa sección (los números de fila no funcionarán). Con el mouse, arrastre y suelte la (s) fila (s) de origen a su destino. Suelta el botón del ratón.
Pegue esa tabla ordenada (o solo las columnas de interés seleccionadas) en una nueva tabla en el Editor visual. Copie directamente desde la hoja de cálculo y luego péguelo directamente en una nueva tabla del Editor visual donde se ha seleccionado la primera celda del encabezado. Puede tardar hasta un minuto.
Copiar tabla de PDF a Visual Editor
Cargue PDF a un sitio gratuito de PDF a Excel en línea. Por ejemplo; aquí . Descarga el archivo de Excel. Ábralo en el software gratuito LibreOffice Calc u otro programa de hoja de cálculo. Si solo desea una tabla de una página larga de Excel, puede seleccionar esa tabla en la página Calc. Luego copie la tabla en una nueva página en Calc.
Edite y mueva columnas y filas en Calc. Para arrastrar una columna, primero selecciónela haciendo clic en su número de encabezado. Luego presione y mantenga presionada la tecla ALT. Luego haga clic en una celda de datos y arrastre la columna a una nueva ubicación. O haga clic derecho y elimine la columna seleccionada (no es necesaria la tecla ALT). Las filas se mueven de manera similar (con la tecla ALT presionada) o se eliminan. Ordene como se describe en la sección anterior.
Copie la tabla en una caja de arena wiki. En Calc seleccione la tabla. Copie directamente desde él y luego péguelo en una nueva tabla del Editor visual donde se ha seleccionado la primera celda de encabezado. Puede tardar hasta un minuto.
Agregue comas o puntos para separar cada tercer dígito en números
Los países utilizan comas, puntos y espacios para separar cada tercer dígito de los números.
Para reemplazar espacios con comas o puntos, pegue la lista, fila o columna en un editor de texto ( Bloc de notas, por ejemplo). Use reemplazar (desde el menú de edición en el Bloc de notas). Consulte las secciones anteriores para aprender a copiar esa lista corregida en una tabla.
Si ya está en una hoja de cálculo, use buscar y reemplazar después de seleccionar la columna o fila en cuestión.
Si no hay un separador entre cada tercer dígito, pegue la lista, fila o columna en una hoja de cálculo (LibreOffice Calc, por ejemplo). Para hacer eso, haga clic en el encabezado de la primera columna en la hoja de cálculo en blanco. Esto seleccionará esa columna. Luego haga clic en pegar en el menú de edición de Calc. En el cuadro emergente, haga clic en "ancho fijo". Desmarque todo lo demás. Haga clic en Aceptar. Esto lo pegará en la primera columna. En Calc, guárdelo en el formato .ods predeterminado. Esto permitirá el siguiente paso.
Luego, seleccione la columna haciendo clic en su encabezado. Haga clic en "formato de número" en el menú de formato. Luego haga clic en "separador de miles" en el submenú. Esto agregará comas o puntos según el idioma predeterminado que haya seleccionado en Calc para la configuración regional. (menú de herramientas> opciones> configuración de idioma> idiomas> formatos> configuración regional). Por ejemplo; con inglés, puede seleccionar EE. UU., Reino Unido, Sudáfrica o uno de los muchos otros países de habla inglesa que se enumeran para inglés. Copie esa columna en una tabla de Wikipedia a través de VE.
Considere también una función de analizador {{Formatnum}}, una plantilla {{ Number format }} y familiarizarse con Wikipedia: Manual de estilo / Fechas y números .
Redondear números (generalmente a cero lugares decimales)
La mayoría de las veces, especialmente con dólares y centavos, los datos son más útiles para los lectores cuando se redondean sin decimales.
Es fácil de hacer en una hoja de cálculo. Por ejemplo; en LibreOffice Calc, seleccione la columna haciendo clic en la parte superior de su columna. Luego vaya al menú Formato> Celdas. Aparecerá una ventana emergente. Haga clic en la categoría "Número". Elija el número de lugares decimales (cero si no quiere puntos decimales). También puede elegir de la lista de ejemplos.
Esa página emergente también es donde eliges un separador de miles o no. Elegir de la lista de ejemplo también marcará o desmarcará esa casilla. Cuando termine, copie esa tabla o columna en una tabla de Wikipedia a través de VE.
Sumar o promediar una lista de números
Inicie VE. En una tabla, seleccione una columna o parte de una columna de números. Para hacerlo, haga clic en la celda superior que desee. Luego presione Mayús y haga clic en una celda más abajo o al final de la columna. Esto seleccionará la columna hasta esa celda.
Tras la selección, verá inmediatamente un cuadro emergente con la suma total de las celdas seleccionadas y un promedio.
Ver también
- Ayuda: Introducción a las tablas con Wiki Markup : una introducción a las tablas.
- Ayuda: marcado de tabla básico : los fundamentos del marcado de tabla wiki.
- Ayuda: Clasificación : información sobre tablas ordenables.
- Wikipedia: formato de tabla avanzado: temas avanzados.
- Wikipedia: Manual de estilo / Tablas : el Manual de estilo indica las mejores prácticas para las tablas.
- Wikipedia: lo que se debe y no se debe hacer en la mesa : una guía rápida del Manual de estilo para las tablas.
- Usuario: Dcljr / Tables : tutoriales de tablas.
- Tabla (HTML) : etiquetas utilizadas para tablas HTML.
- Categoría: tablas de Wikipedia
Plantillas
- Categoría: Plantillas de tabla : todas las plantillas que utilizan tablas.
- Categoría: Plantillas de varias columnas : plantillas para usar columnas sin tablas.
- Categoría: Cuadros, diagramas y plantillas de gráficos
- Categoría: Plantillas de funciones y formato de gráficos, diagramas y gráficos
- Categoría: editores de plantillas de Wikipedia
- {{ List to table }}: plantilla y su categoría de mantenimiento: Categoría: artículos que requieren tablas
- {{ TOC horizontal }}: bueno para listas de países en formato de tabla.
- {{ Table }}: plantilla para especificar clases de CSS de tabla como "wikitable" y "collapsible"
- {{ Tabla alineada }}: para especificar tablas como una plantilla, permitiendo la inclusión en otras plantillas y áreas donde la sintaxis de la tabla es problemática.
- Ejemplos:
- {{ Diagrama de ajedrez }}: plantilla de tablero de ajedrez.
- {{ Goban }}: Ir a la plantilla de tablero.
Notas
- ^ borde: ninguno; evita una columna vacía antiestética en tablas más estrechas que la ventana del navegador en Android Chrome.
- ^ En
style="padding: 3em 4em 5%;"
, el valor4em
se usa tanto para el relleno "izquierdo" como para el relleno "derecho", por lo que el orden en el sentido de las agujas del reloj es: arriba (3em) → derecha [y por lo tanto también izquierda] (4em) → abajo (5%); no hay "→ left" en este caso porque el relleno "left" ya se ha definido. Enstyle="padding: 3em 5%;"
, el valor3em
se usa para el relleno "superior" e "inferior", mientras que el valor5%
se utiliza para el relleno "izquierdo" y "derecho", por lo que el orden en el sentido de las agujas del reloj es: superior [y, por lo tanto, también inferior] (3em ) → derecha [y por tanto también izquierda] (5%); no hay "→ inferior" ni hay "→ izquierda" en este caso porque el relleno "inferior" e "izquierdo" ya se han definido. El mismo razonamiento también se aplica astyle="padding: 1em 20px 8% 9em;"
, ystyle="padding: 3%;"
. - ^ Una versión simplificada de Template: Table_of_phase_transitions
enlaces externos
- VBA-Macro para conversión de tabla EXCEL , publicado en el proyecto de Wikipedia en alemán ( traducción al inglés incluida)
- Conversor de tablas HTML a wiki en WMF Labs
- Copiar y pegar convertidor de Excel a Wiki en WMF Labs
- Generador de tablas - Mediawiki , un generador de tablas WYSIWYG
- Wikitable Editor , un editor de tablas visual en código wiki
- HTML-WikiConverter , varias versiones e idiomas
- pywikipediabot , puede convertir tablas HTML a wiki
- Tabla de nombres de colores CSS y códigos HEX
- Solicitud de Phabricator para cabeceras de mesa flotante
Proyectos hermanos de Wikimedia
- Edición de Wikitexto / Tablas en Wikilibros
- Edición de Wikitexto / Tablas listas para usar en Wikilibros
- mw: Help: Tables : página de ayuda de MediaWiki sobre tablas.
- m: Tablas de marcado de Wiki : Información de Meta-Wiki en tablas.
- m: Ayuda: Clasificación : información de Meta-Wiki en tablas ordenables.
- m: Table background colors: Tabla de colores de fondo de MediaWiki.
- Commons: recursos de gráficos y gráficos : recursos de gráficos y gráficos en Commons
- Commons: convierte tablas y gráficos en código wiki o archivos de imagen : incluye información sobre la conversión de marcas de tablas.