Ayuda:Tablas
En una wiki, una tabla es una estructura con filas y columnas con posiciones ordenadas que ayuda a presentar muchos datos en poco espacio. Las tablas wiki se pueden crear en las páginas usando una sintaxis especial. Entre estas el lenguaje HTML y el wikitexto. Se pueden utilizar muchos estilos y trucos diferentes para personalizar las tablas.
Usando la barra de herramientas
En modo editor de código
Para insertar automáticamente una tabla, haz clic en el botón o (Insertar una tabla) en la Barra de herramientas de edición. En la caja de edición, el icono de la tabla se encuentra en el menú "Avanzado". Los administradores de la wiki pueden editar los botones de la barra siguiendo estos pasos: mw:Manual:Custom edit buttons.
Al pulsar el botón Insertar una tabla, este texto se escribe en la caja de texto:
Código que se escribe
{| class="wikitable" |+ Leyenda de tabla |- ! 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:
Así se ve el resultado
Texto del encabezado | Texto del encabezado | Texto del encabezado |
---|---|---|
Ejemplo | Ejemplo | Ejemplo |
Ejemplo | Ejemplo | Ejemplo |
Ejemplo | Ejemplo | Ejemplo |
El texto de muestra ("Texto de encabezado" o "Ejemplo") tiene que ser reemplazado con datos reales en la tabla. Puedes completar la tabla tanto en el modo editor de código como en el modo de editor visual (VE).
En modo editor visual
Con el editor visual (VE) rellenas directamente las celdas sin tener que pasar por el wikitexto. VE facilita agregar o eliminar filas o columnas. En VE, esto es lo que aparece al hacer clic en el icono de la tabla:
Además, si necesitas agregar o importar una tabla de otro lugar (por ejemplo, en una hoja de cálculo, en otro sitio web), generalmente es posible importarla directamente al editor visual al:
- arrastrar y soltar un archivo .csv en el editor visual, o
- seleccionar, copiar y pegar la tabla en el editor visual.
Sintaxis del código wiki para tablas
Elemento de tabla | Wikitexto | Requisito | Notas de uso |
---|---|---|---|
Inicio de tabla | {|
|
Requerido | |
Leyenda de tabla | |+
|
Opcional | Solo entre el inicio de tabla y la primera fila de tabla. |
Fila de tabla | |-
|
Opcional | Se puede omitir 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 empezar en una nueva línea, cada una con su propia marca única ! .
|
Celda de datos de la tabla | | or ||
|
Opcional | Se pueden agregar celdas de datos de tabla consecutivas en la misma línea separadas por marcas dobles '''||''' o empezar en una nueva línea, cada una con su propia marca única '''|''' . Esta marca también se utiliza para separar los atributos HTML del contenido de las celdas y los títulos y leyendas.
|
Fin de tabla | |}
|
Requerido |
- Cada uno de los caracteres wiki que indican inicio o final de celda, columna, fila o tabla deben comenzar en una nueva línea, excepto las marcas dobles (
||
y!!
) que dan la opción de escribir nuevas celdas en una sola línea. - Los espacios en blanco al comienzo de una línea son ignorados.
- El Contenido de una celda puede:
- O seguir el símbolo | de inicio celda en la misma línea (después de cualquier atributo HTML opcional);
- O en las líneas debajo de la marca de celda.
- 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 tubería o pleca (
|
) en el título de una tabla o celda, usa el escape de caracteres<nowiki>|</nowiki>
.
Atributos HTML
Cada marca, excepto la de final de tabla (|}
), acepta opcionalmente uno o más atributos HTML|atributos. Los atributos deben estar en la misma línea que la marca.
- Las Celdas y los encabezados son los espacios que albergan el contenido. Las marcas
|
y||
son para celdas,!
y!!
son para encabezados y|+
es para la leyenda al inicio de tabla. Separa cualquier atributo HTML que quieras incluir de su contenido con una sola tuberia o pleca|
al inicio de la línea. Los atributos preceden al contenido. - Las marcas de tabla y fila
{|
y|-
no contienen contenido directamente. No hace falta que agregues una tubería|
después de los atributos que escribas en estas líneas.
Los atributos comúnmente incluidos en las tablas incluyen:
class
, por ejemploclass="wikitable"
;estilo
, para estilo CSS;scope
, para indicar celdas de encabezado de fila o columna;rowspan
, para extender una celda en más de una fila;colspan
, para extender una celda en más de una columna.
Sintaxis de barra vertical o tubería
Aunque la sintaxis de tablas HTML también funciona, el código creado específicamente para wiki es más sencillo para crear una tabla. Los códigos de la barra vertical o símbolo de "tubería" |
funcionan exactamente igual que el marcado HTML para tablas.
Toda la tabla está encerrada entre corchetes y un carácter de barra vertical (una tubería). Esto {|
para comenzar una tabla y |}
para terminarla. Cada uno debe estar en su propia línea:
{| el código de la tabla va aquí |}
Se puede añadir de manera opcional una leyenda de tabla con una línea que comienza con una barra vertical y el signo más "'
|+
" y el subtítulo después de él:
{|
|+ leyenda de tabla
el código de la tabla va aquí
|}
Para comenzar una nueva fila de tabla, escribe una barra vertical y un guión en su propia línea: "|-
". Los códigos de las celdas de esa fila comienzan en la siguiente línea.
{| |+ La leyenda de la tabla |- el código de fila va aquí |- el código de la fila siguiente va aquí |}
Escribe los códigos para cada celda de la tabla en la siguiente fila, comenzando con una barra:
{| |+ La leyenda de la tabla |- | el código de celda va aquí |- | el código de celda de la siguiente fila va aquí | el siguiente código de celda va aquí |}
Las celdas se pueden separar con una línea nueva y una sola barra, o con una barra doble "||
" en la misma línea. Ambos producen la misma salida:
Código que se escribe
{| |+ La leyenda de la tabla |- |Celda 1 || Celda 2 || Celda 3 |- |Celda A |Celda B |Celda C |- |Celda x |Celda y||Celda z |}
Así se ve el resultado
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 configurar la clase CSS wikitable
o cualquier otra clase que se use en la wiki y después llamarla en la tabla.
Código que se escribe
{| class=wikitable |+ La leyenda de la tabla ! Encabezado de la columna 1 ! Encabezado de la columna 2 ! Encabezado de la columna 3 |- ! Encabezado de la fila 1 | Celda 2 || Celda 3 |- ! Encabezado de la fila A | Celda B | Celda C |}
Así se ve el resultado
Encabezado de la columna 1 | Encabezado de la columna 2 | Encabezado de la columna 3 |
---|---|---|
Encabezado de la fila 1 | Celda 2 | Celda 3 |
Encabezado de la fila A | Celda B | Celda C |
Los parámetros de tabla y los parámetros de celda son los mismos que en HTML, consulta http://www.w3.org/TR/html401/struct/tables.html#edef-TABLE . Sin embargo, los elementos thead
, tbody
, tfoot
, colgroup
, y col
son en 2021 elementos no admitidos en MediaWiki.
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 celda, convirtiendo la tabla en un diagrama, como en el ejemplo del gráfico 8x8 de la página meta:Template talk:Square 8x8 pentomino Ejemplo. Una "imagen" en forma de tabla es mucho más conveniente de editar que una imagen cargada.
Para que esto tenga efecto, 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 permanezca constante. Para las celdas vacías, se puede usar el espacio de ancho cero
​
o un espacio sin separación anterior
como contenido para garantizar que se muestren las celdas.
Con colspan
y rowspan
las celdas pueden abarcar varias columnas o filas. Con este método se pueden hacer tabla llamadas Mélange.
Utilizando plecas en el contenido
El carácter de barra vertical o tubería forma parte del wikicódigo para señalizar las celdas. Para que una celda con barras verticales como contenido se represente de manera correcta simplemente agrega un formato vacío a esa celda. El segundo carácter de barra vertical en una línea no se mostrará; está reservado para agregar un formato. El wikicódigo entre la primera y la segunda tubería es un formato, pero dado que se ignora si este formato está vacio o mal escrito, este simplemente desaparece. Cuando esto sucede, agrega un formato ficticio. Para un formato real, puedes leer la sección: Atributos HTML. Usa un tercer carácter de barra vertical para representar el primer carácter de barra vertical del contenido.
Representación de la primera tubería cuando es la tercera tubería en el código de la celda.
Código que se escribe
{| class=wikitable
|-
|''Dando formato a''|T|u|b|e|r|i|a|
|C|e|l|l|2|
|-
|''Dando formato a''|T|u|b|e|r|i|a||''Dando formato a''|C|e|l|l|2|
|-
||T|u|b|e|r|i|a|s||C|e|l|l|2|
|}
Así se ve el resultado
T|u|b|e|r|i|a| | e|l|l|2| |
T|u|b|e|r|i|a | C|e|l|l|2| |
T|u|b|e|r|i|a|s | e|l|l|2| |
El tercer y posteriores caracteres de barra vertical se representará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. En lugar de usar un formato ficticio para renderizar una tubería o pleca, puedes representarlas con uno de estos métodos:
- Usando la plantilla
{{!}}
para escapar la barra vertical. - Mediante HTML:
|
o|
. Cada línea de código de celda en la siguiente tabla tiene ejemplos de tuberías.
Visualización de tuberías adyacentes
Código que se escribe
{| class=wikitable
|-
|<nowiki>|</nowiki>Tuberías34:<nowiki>||</nowiki>
|-
||Tuberías34:||
|}
Así se ve el resultado
|Tuberías34:|| |
|Tuberías34:|| |
La plantilla {{!}}
, debido al orden del analizador sintáctico, es equivalente a escribir un solo | carácter de tubería. La etiqueta de analizador única <nowiki />|
no se aplica aquí. Fijate como en la tabla no se escapa la segunda tubería, como hacen | y como | en la tabla que hay más arriba de este texto.
Mecanismos comunes que no funcionan en las tablas
Código que se escribe
{| class=wikitable
|-
|<nowiki />|Tubería3:|
|-
|Tubería2:{{!}}Tubería3:{{!}}
|}
Así se ve el resultado
Tubería3:| |
Tubería3:| |
Alcance
- Los encabezados de columna se identifican con
! scope="col" |
en lugar de|
. - Los encabezados de fila se identifican con
! scope="row" |
en lugar de|
. - Cada celda de encabezado debe estar en una línea separada en el marcado wiki.
El marcado scope="col"
y scope="row"
debe usarse para los encabezados de columna y fila en todas las tablas de datos porque asocia explícitamente el encabezado con las celdas correspondientes. lo que ayuda a garantizar una experiencia uniforme para los lectores en pantalla.
Para tablas complejas, cuando un encabezado abarca dos columnas o filas, se usa . scope="colgroup" colspan="2" |
o ! scope="rowgroup" rowspan="2" |
respectivamente para identificar claramente el encabezado como un encabezado de columna de dos columnas o un encabezado de fila de dos filas. Cuando los encabezados no están claros, esto puede causar problemas de accesibilidad; por lo tanto, usa id=
para establecer un valor único sin espacios en cada encabezado, luego haz referencia a los id en las celdas de datos que tienen encabezados poco claros usando headers=
con un espacio que separa cada id.
Las celdas de encabezado generalmente se representan de manera diferente a las celdas normales, según el navegador. A menudo se muestran en negrita y centradas. Si no se desea esta representación desde un punto de vista estético, se puede diseñar la tabla con la clase "plainrowheaders" que alinea a la izquierda los encabezados de las filas y elimina las negritas.
Un ejemplo típico se puede marcar así:
Código que se escribe
{| class="wikitable plainrowheaders"
|+ La leyenda de la tabla
! scope=col | Encabezado de la columna 1
! scope=col | Encabezado de la columna 2
! scope=col | Encabezado de la columna 3
|-
! scope=row | Encabezado de la fila 1
| Celda 2 || Celda 3
|-
! scope=row | Encabezado de la fila A
| Celda B || Celda C
|}
Así se ve el resultado
Encabezado de la columna 1 | Encabezado de la columna 2 | Encabezado de la columna 3 |
---|---|---|
Encabezado de la fila 1 | Celda 2 | Celda 3 |
Encabezado de la fila A | Celda B | Celda C |
Encabezados de fila
Ten en cuenta que con los encabezados de fila, debes usar una fila separada en el wikitexto para la celda del encabezado de fila. El formato correcto se puede ver en la última tabla de la sección anterior. Ten en cuenta el uso de tuberías simples y dobles.
A continuación se muestra el aspecto de la tabla si el wikitexto de la celda de datos está en la misma línea que el wikitexto del encabezado de la fila. Ten en cuenta que los fondos de las celdas de datos tienen el mismo tono de color que los encabezados de columna y fila. Las celdas de datos deben tener un fondo distinto.
Código que se escribe
{| class="wikitable plainrowheaders"
|+ La leyenda de la tabla
! scope=col | Encabezado de la columna 1
! scope=col | Encabezado de la columna 2
! scope=col | Encabezado de la columna 3
|-
! scope=row | Encabezado de la fila 1 || Celda 2 || Celda 3
|-
! scope=row | Encabezado de la fila A || Celda B || Celda C
|}
Así se ve el resultado
Encabezado de la columna 1 | Encabezado de la columna 2 | Encabezado de la columna 3 |
---|---|---|
Encabezado de la fila 1 | Celda 2 | Celda 3 |
Encabezado de la fila A | Celda B | Celda C |
Las celdas de encabezado de fila están en líneas separadas en el wikitexto. La clase CSS class=plainrowheaders
hace que el texto de encabezado de fila no tenga negrita.
Código que se escribe
{| class="wikitable plainrowheaders"
|+ La leyenda de la tabla
!Encabezado de la columna 1
!Encabezado de la columna 2
!Encabezado de la columna 3
|-
!Encabezado de la fila 1
|Celda 2
|Celda 3
|-
!Encabezado de la fila A
|Celda B
|Celda C
|}
Así se ve el resultado
Encabezado de la columna 1 | Encabezado de la columna 2 | Encabezado de la columna 3 |
---|---|---|
Encabezado de la fila 1 | Celda 2 | Celda 3 |
Encabezado de la fila A | Celda B | Celda C |
Tablas sencillas y directas
Tabla minimalista
Ambos códigos de entrada generan la misma salida. Elije un estilo basado en la cantidad de celdas en cada fila y el texto total dentro de cada celda.
Código que se escribe
{|
|-
| A
| B
|-
| C
| D
|}
{|
|-
| A || B
|-
| C || D
|}
Así se ve el resultado (fíjate en que no hay bordes).
A | B |
C | D |
Tabla de multiplicar
Ten en cuenta que en este ejemplo class="wikitable"
se usa para diseñar la tabla con la hoja de estilo para tablas. Agrega bordes, sombreado de fondo y texto de encabezado en negrita.
Código que se escribe
{| class=wikitable style="text-align: center;"
|+ 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
|}
Así se ve el resultado
× | 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 entera
- Pies de foto y resúmenes
- Ancho
- Altura
- Bordes gráficos
- Bordes de cada celda de una tabla
- Tablas lado a lado
- Tablas e imágenes una al lado de la otra
- Mesa flotante izquierda o derecha
- Centrando tablas
- Tablas anidadas
- Desplazamiento en tablas
Otros
- Colores; alcance de los parámetros
- Operaciones de celda
- Configuración de los parámetros de la celda
- Alineación vertical en celdas
- Alineación horizontal en celdas
- Sangría y relleno del contenido de las celdas
- Bordes de celdas individuales
- Operaciones de filas
- Altura
- Borde
- Números de fila
- Operaciones de columnas
- Establecer anchos de columna
- Nowrap
- Información en tooltips
- Otros ejemplos complejos
- Tabla mélange
- Imágenes flotantes en el centro
- Uso combinado de COLSPAN y ROWSPAN
- Soluciones alternativas
- Alineación del punto decimal
- Tablas no rectangulares
- Centrado
- Clases
- Tablas plegables
- Ejemplo con una fila de encabezado
- Ejemplos sin fila de encabezado
- Tablas con leyendas
- Tablas clasificables
- Problemas de clasificación numérica y anual
- Ordenar y colapsar
- mw-datatable: resaltado de filas mediante el desplazamiento del cursor. Fondo blanco
- tpl-blanktable: resaltado de filas mediante el desplazamiento del cursor. Fondo blanco
- Celdas que abarcan varias filas o columnas
- Enlace de sección o enlace de mapa a un ancla de fila
- Plantilla de filas
- Tabla con condicional if
- Otra sintaxis de tablas
- Comparación de sintaxis de tablas
- Sintaxis de tubería en términos del HTML producido
- Tablas
- Filas
- Celdas
- Encabezados
- Subtítulos
- Plantillas de celdas de tabla
- Encabezados de columna orientados verticalmente
- Wikitabla como galería de imágenes
- Desplazamiento/centrado
- Poniendo sangria en tablas
- Agregar banderas y vincular países, estados, etc. en listas
- Añadir enlaces a artículos especializados de países, estados o territorios
- Añadir corchetes de enlace al texto en cada celda de una columna
- Alinear texto en celdas de encabezado frente a otras celdas
- Alinear los datos en columnas de datos a la derecha
- Alinear el texto de la primera columna a la izquierda
- Conversión de hojas de cálculo y tablas de bases de datos a formato wikitabla
- Convertir filas en columnas y columnas en filas
- Selección de fechas seleccionadas de archivos .csv masivos
- Tablas automatizadas actualizadas diariamente por bots
- Tablas y el editor visual (VE)
- Insertar fila o columna en blanco
- Mover o eliminar columnas y filas
- Copiar columna de una tabla a otra
- Copiar o eliminar varias filas
- Copiar tabla de página web al editor visual
- Copiar la tabla de la web a Excel2Wiki al editor de wikitexto a VE
- Copiar la lista (no en la tabla) a Excel2Wiki al editor de wikitexto a VE
- Ordenar alfabética o numéricamente con hoja de cálculo gratuita y VE
- Copiar tabla de PDF a editor visual
- Añadir comas o puntos para separar cada tercer dígito en números
- Números redondeados (generalmente a cero lugares decimales)
- Sumar o promediar una lista de números