Una tabla es una disposición de columnas y filas que organiza y posiciona datos o imágenes. Se pueden crear tablas en las páginas de Wikipedia utilizando una sintaxis especial de wikitexto y se pueden utilizar 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.
Para insertar automáticamente una tabla, haga clic en
o (Insertar una tabla) en la barra de herramientas de edición . En la barra de herramientas de Vector, el icono de la tabla está en el menú "Avanzado". Si "Insertar una tabla" no está en la barra de herramientas, siga estas instrucciones para agregarla.
El siguiente texto se inserta cuando se hace clic en Insertar una tabla :
{| clase = "wikitable" |+ Texto del título |- ! Texto de cabecera !! Texto de cabecera !! Texto del encabezado |- | Ejemplo || Ejemplo || Ejemplo |- | Ejemplo || Ejemplo || Ejemplo |- | Ejemplo || Ejemplo || Ejemplo |} Este código produce la siguiente tabla:
El texto de muestra ("Texto de encabezado" o "Ejemplo") debe reemplazarse con datos reales. Puede completar la tabla mientras está en modo fuente. O utilice el editor visual (VE).
Con el editor visual (VE) rellenas directamente las celdas sin tener que pasar por wikitexto. Vea la sección VE más abajo. VE facilita agregar o eliminar filas o columnas. En VE esto es lo que aparece al hacer clic en el icono de la tabla (en el menú "Insertar"):
Además, si necesita agregar o importar una tabla que existe en otro lugar (por ejemplo, en una hoja de cálculo, en otro sitio web), generalmente es posible importarla directamente al editor visual mediante:
||y !!) para agregar opcionalmente celdas consecutivas a una sola línea.|) en un título de tabla o celda, utilice el <nowiki>|</nowiki>marcado de escape.Cada marca, excepto el final de la tabla ( |}), acepta opcionalmente uno o más atributos . Los atributos deben estar en la misma línea que la marca.
|o ||, !o !!, y |+) contienen contenido : separan cualquier atributo de su contenido con una sola barra vertical ( |), con los atributos antes del contenido.{|y |-) no contienen contenido directamente. No agregue una barra vertical ( |) después de ningún 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 ampliar las celdas en más de una fila; colspan, para ampliar las celdas en más de una columna.
Aunque la sintaxis de la tabla HTML también funciona, se puede utilizar un código wiki especial como acceso directo para crear una tabla. Los códigos de barra vertical o símbolo de "tubería" ( | ) funcionan exactamente igual que el marcado de tabla HTML , por lo que el conocimiento del código de tabla HTML ayuda a comprender el código de barra vertical. Los atajos son los siguientes:
Toda la tabla está rodeada de llaves y un carácter de barra vertical (una tubería). Así que utilícelo {|para comenzar una tabla y |}para finalizarla. 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 un signo más " |+" y el título que le sigue:
{||+ el código de la tabla de títulos va aquí|}Para iniciar 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.
{||+ El título de la tabla|- el código de la fila va aquí |- el código de la siguiente fila va aquí|}Escriba los códigos para cada celda de la tabla en la siguiente fila, comenzando con una barra:
{||+ El título de la tabla|-| el código del celular va aquí|-| el código de la celda de la siguiente fila va aquí | El siguiente código de celular 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:
Wikitexto
{| |+ El título de la tabla |- | Celda 1 || Celda 2 || Celda 3 |- | Celda A | Celda B | Celda C |- | Celda x | Celda y || Celda z |}produce
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 wikitable CSS , que en la hoja de estilos externa de Wikipedia está definida para aplicar un esquema de color gris y bordes de celda a las tablas que lo usan:
Wikitexto
{| class = wikitable |+ ¡ El título de la tabla ! 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 |} produce
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 and Table (HTML) . Sin embargo, los elementos <thead>, <tbody>, <tfoot>, <colgroup>y <col>actualmente no son compatibles con MediaWiki , a partir de diciembre de 2021 [actualizar].
Una tabla puede resultar ú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 la celda, convirtiendo la tabla en un diagrama, como el ejemplo de meta:Template talk:Square 8x8 pentomino. Una "imagen" en forma de tabla es mucho más conveniente de editar que una imagen cargada.
Si todas las celdas de una fila están vacías, las celdas aún aparecen. Si la celda del encabezado también está vacía para esa fila, se muestran todas las celdas, pero son estrechas. Eso se puede solucionar con un simple <br> en una de las celdas. Eso es lo que se hace aquí:
Cada fila debe tener la misma cantidad de celdas que las demás filas, para que la cantidad de columnas de la tabla permanezca constante.
Las celdas con colspany rowspanpueden abarcar varias columnas o filas;
Cuando el contenido de la celda que contiene un carácter de barra vertical no se representa 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 se ignora el vacío o un error, simplemente desaparece. Cuando esto suceda, agregue un formato ficticio. Utilice un tercer carácter de barra vertical para representar su primer carácter de barra vertical.|cell code
Representando la primera tubería cuando es la tercera tubería en el código de la celda.
Wikitexto
{| clase = 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||} produce
Se representarán el tercer carácter de tubería y los posteriores, pero para mostrar dos caracteres de tubería adyacentes en una celda (en lugar de que actúen como la primera tubería al comienzo de una nueva celda), se necesitan otras opciones de representación de tubería. En lugar de utilizar un formato ficticio para representar una tubería, puede representarla directamente mediante 1) <nowiki>|</nowiki>(preferido) o 2) html : |o |. Cada línea de código de celda en la siguiente tabla tiene una tubería de wikicode.
Mostrar tuberías adyacentes
Wikitexto
{| clase = wikitable |- |< nowiki > | </ nowiki > Pipes34: < nowiki > || </nowiki> | - | _ | Tuberías34: || |} produce
Plantilla , debido al orden en que se analizan las cosas, equivale a escribir un solo | carácter de tubería. La etiqueta de analizador único no se aplica aquí. Vea cómo no escapan del segundo tubo, como lo hicieron | y arriba:{{!}}<nowiki />|<nowiki>|</nowiki>
Mecanismos comunes que no funcionan en tablas.
Wikitexto
{| clase = wikitable |- |< nowiki /> | Tubería3:||- | Tubería2: {{ ! }} Tubería3: {{ ! }} |} produce
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 del encabezado debe estar en una línea separada en el marcado wiki. El marcado scope="col"y scope="row"debe usarse para encabezados de columnas y filas 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 encabezados de columnas y filas .
Para tablas complejas , cuando un encabezado abarca dos columnas o filas, use ! 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 son claros, esto puede causar problemas de accesibilidad; por lo tanto, use id=para establecer un valor único sin espacios en cada encabezado, luego haga referencia a las identificaciones en las celdas de datos que tienen encabezados poco claros usando headers=un espacio que separa cada identificación.
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 centrados. 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 la negrita. La alineación a la izquierda de los encabezados de fila solo se produce si class=wikitablese scope=rowutilizan ambos.
Un ejemplo típico puede marcarse así:
Wikitexto
{| class = "wikitable Plainrowheaders" |+ ¡El título de la tabla ! alcance = col | Encabezado de columna 1 ! alcance = col | Encabezado de columna 2 ! alcance = col | Encabezado de columna 3 |- ! alcance = fila | Encabezado de fila 1 | Celda 2 || Celda 3 |- ! alcance = fila | Encabezado de fila A | Celda B || Celda C |} produce
Tenga en cuenta que con los encabezados de fila necesita usar una fila separada en el wikitexto para la celda del encabezado de fila. Consulte el formato correcto en la última tabla del apartado anterior. Tenga en cuenta el uso de tubos (barras) simples y dobles.
A continuación se class=plainrowheadersmuestra cómo se ve la misma tabla (sin) si el wikitexto de la celda de datos está en la misma línea que el wikitexto del encabezado de la fila. Tenga en cuenta que el texto de la celda de datos está en negrita y que los fondos de las celdas de datos tienen el mismo tono de gris que los encabezados de las columnas y las filas. Las celdas de datos normalmente deben tener texto sin negrita y un fondo más claro.
Wikitexto
{| class = wikitable |+ ¡ El título de la tabla ! alcance = col | Encabezado de columna 1 ! alcance = col | Encabezado de columna 2 ! alcance = col | Encabezado de columna 3 |- ! alcance = fila | Encabezado de fila 1 || Celda 2 || Celda 3 |- ! alcance = fila | Encabezado de fila A || Celda B || Celda C |} produce
Ambos generan el mismo resultado. Elija un estilo según la cantidad de celdas en cada fila y el texto total dentro de cada celda.
Wikitexto
{| |- | Un | B |- | C | D |}{| |- | Un || B |- | C || D |}Produce (tenga en cuenta que no hay fronteras).
Tenga en cuenta que en este ejemplo class="wikitable"se utiliza para diseñar la tabla con la hoja de estilos externa para tablas de Wikipedia. Agrega bordes, sombreado de fondo y texto de encabezado en negrita.
Wikitexto
{| clase = estilo wikitable = "text-align: center;" |+ Tabla de multiplicar |- ! × ! 1 ! 2 ! 3 |- ! 1 | 1 || 2 || 3 |- ! 2 | 2 || 4 || 6 |} produce
width=X está obsoleto en HTML 5 , por lo que eventualmente MediaWiki podría ignorarlo . Ver: Wikipedia: HTML 5#Atributos de tabla . Utilice estilos CSS en su lugar: como style="width: Xpx;"u style="width: Xem;"otras unidades CSS. El número por sí solo significa píxeles.Vea ejemplos de ancho en esta subpágina . Allí es más fácil reducir la ventana del navegador y no perder el lugar como en una página larga como aquí en Ayuda: Tabla. El ancho general de la tabla no actúa de la misma manera en la vista móvil de Wikipedia que en la vista móvil de páginas web fuera de Wikipedia. Vea los ejemplos de la subpágina.
En su mayor parte, Wikipedia no recomienda establecer anchos porque interfiere con la capacidad del navegador para ajustar el contenido para adaptarlo a la ventana del navegador, el tamaño del dispositivo, la configuración de zoom, las opciones de tamaño de fuente del usuario y otras restricciones. Las columnas de notas detalladas casi siempre son un problema, especialmente cuando hay más de unas pocas columnas. Los editores frecuentemente intentan ensanchar la columna de notas, lo que estropea las otras columnas. Por este motivo, se deben evitar las columnas de notas detalladas o se deben acortar las notas y en su lugar se deben agregar enlaces a notas más largas debajo de la tabla.
style=max-width:Xemse puede utilizar en encabezados de tablas. El siguiente extracto de la tabla está adaptado de esta versión de Lista de países por riqueza por adulto . El objetivo es reducir las columnas de datos y tener los nombres de los países distribuidos en una línea cada uno. Todo esto hace que sea más fácil buscar en una lista de países. Pero los nombres de los países deben ajustarse si es necesario (en vistas verticales estrechas en algunos teléfonos móviles, etc.). Así style=max-width:Xemse utilizó en encabezados de columnas seleccionados. También evita el uso de saltos de línea de encabezado <br>que molestan a las personas que usan lectores de pantalla debido a las pausas. Las unidades Em son buenas porque aumentan de tamaño junto con la configuración del zoom. Es importante comprobar si el ancho máximo que has elegido también funciona correctamente en móviles y no rompe palabras. Quizás necesites aumentarlo un poco. Aquí está el wikitexto de encabezado relevante:
Wikitexto
{{ números de fila estáticos }}{{ encabezado fijo }}{{ alineación de tabla }} {| class = "wikitable sortable static-row-numbers sticky-header col1left" style = text-align:right |+ Riqueza media y media por adulto ([[USD]]) por país |- ! Ubicación ! estilo = ancho máximo: 4em | Riqueza media ! estilo = ancho máximo: 4em | Riqueza media ... produce
{{ sort under }} reduce aún más las columnas de la tabla:
{{ números de fila estáticos }}{{ encabezado fijo }}{{ ordenar bajo }}{{ alineación de tabla }} {| clase = "wikitable ordenable números de fila estáticos encabezado adhesivo ordenar bajo col1izquierda" estilo = alineación de texto: derecha Si usa {{ sticky header }} , para teléfonos móviles son mejores encabezados aún más estrechos:
A continuación se muestra cómo se ve la tabla sin style=max-width:Xemy sin título.
Limite la ventana de su navegador para ver cómo se contrae la tabla a continuación en comparación con las de arriba. La tabla anterior (incluso si se agregan algunas columnas más) mantiene una línea por país para anchos de pantalla y navegador más estrechos. Por lo tanto, es más legible y escaneable en tablas de países largas. El formato de tabla siguiente puede aumentar considerablemente el número de líneas y requerir más desplazamiento vertical, especialmente si se agregan más columnas.
Para forzar los anchos de columna iniciales según 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 en las columnas donde el ancho lo requiere. No utilicemin-width:Xpx;
Wikitexto
{| clase = wikitable |- ! alcance = "col" estilo = "ancho: 50px;" | Nombre ! alcance = "col" estilo = "ancho: 250px;" | Efecto ! alcance = "col" estilo = "ancho: 350px;" | Juegos encontrados en |- | Pokébola || Pokébola normal || Todas las versiones |- | Gran baile || Mejor que una Poké Ball || Todas las versiones |} produce
Para establecer el ancho de las columnas en una tabla sin encabezados, especifique el ancho en la primera celda de cada columna.
Wikitexto
{| clase = wikitable |- | estilo = "ancho: 100 puntos;" | Esta columna tiene 100 puntos de ancho | estilo = "ancho: 200 puntos;" | Esta columna tiene 200 puntos de ancho | estilo = "ancho: 250 puntos;" | Esta columna tiene 250 puntos de ancho |- | bla || felicidades || azul |} produce
También puede utilizar porcentajes, como style="width: 50%;"para igualar los anchos de una tabla de dos columnas.
Una aplicación para establecer los anchos es alinear columnas de tablas consecutivas. Las siguientes son tablas independientes, con columnas configuradas en 350 px y 225 px.
Wikitexto
{| clase = wikitable |- ! alcance = estilo de columna = "ancho: 350px;" | País ! alcance = col estilo = "ancho: 225px;" | Capital |- | Países Bajos || Ámsterdam |} {| clase = wikitable |- ! alcance = estilo de columna = "ancho: 350px;" | País ! alcance = col estilo = "ancho: 225px;" | Capital |- | Francia || París |} produce
Se puede especificar la altura de toda la tabla, así como la altura de una fila. La altura de la fila del medio a continuación se establece en style=height:7emy la altura total de toda la tabla se establece en style=height:14emunidades. 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 ajuste de palabras, la altura aumentará para adaptarse a esto (excepto en dispositivos móviles donde se cortará la parte inferior de la mesa).
Marcado wiki
{| clase = estilo wikitable = altura: 14em; |- ! Izquierda !! Centro !! Derecha |- | Celda superior izquierda || Celda central superior || Celda superior derecha |- estilo = altura:7em | Celda del medio izquierdo || Celda central media || Celda central derecha |- | Celda inferior izquierda || Celda central inferior || Celda inferior derecha |}produce
Se recomiendan títulos (o títulos ) explícitos para las tablas de datos como práctica recomendada; el Manual de estilo de Wikipedia los considera de alta prioridad por razones de accesibilidad ( lectores de pantalla ), ya que un título está asociado explícitamente con la tabla, a diferencia de un encabezado normal de wikitexto o una oración introductoria. Todas las tablas de datos de Wikipedia requieren subtítulos. Se proporciona un título con el |+marcado, similar a una fila de una tabla ( |-), pero no contiene ninguna celda y no está dentro del borde de la tabla. Los subtítulos siempre se muestran como un título centrado (en la mayoría de los navegadores), encima de la tabla. Se puede aplicar estilo a un título (con CSS en línea, no en bloque) y puede incluir enlaces wiki, 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 del título; Piense en ello como algo análogo a la descripción de una imagen alt. Se agrega un resumen con , en la misma línea que abrió la tabla, junto con todos los parámetros de la tabla en su conjunto. Sin embargo, el atributo está obsoleto en HTML 5 .summary="Summary text here."{|class=summary=
Ejemplo de marcado Wiki que muestra un título alineado a la izquierda con una cita de la fuente:
{| clase = wikitable |+ estilo = "text-align: left;" | Datos reportados para 2014-2015, por región<ref name="García 2005"/> |- ! alcance = col | Año !! alcance = col | África !! alcance = col | ¡¡ Américas !! alcance = col | ¡¡Asia y Pacífico !! 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 |} produce
Es posible crear celdas que se extiendan a lo largo de dos o más columnas. Para esto se utiliza . De manera similar, se pueden crear celdas que se extiendan a lo largo de 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 columnas y filas resultante debe ajustarse.|colspan=n | content|rowspan=m | content
Wikitexto
{| clase = estilo wikitable = "text-align: center;" ! col1! col2! col3! col4|-! fila1| colspán = 2 | A <!-- recuento de columnas: la celda 'B' no puede existir -->| C|-! fila2| Automóvil club británico| CAMA Y DESAYUNO| CC|-! fila3| aaa| amplitud de filas = 2 | BBB | CCC|-! fila4| AAAAA<!-- recuento de filas: la celda 'BBBB' no puede existir -->| CCCC|}produce
En el código, la celda | colspan="2" | Aabarca 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" | BBBabarca dos filas. No existe una celda que se espera que contenga "BBBB" .
Wikitexto
{| clase = wikitable |-! Columna 1 !! Columna 2 !! Columna 3|-| amplitud de filas = 2 | A | colspan = 2 estilo = "text-align: center;" | B <!-- columna 3 de esta fila ocupada por la celda B (que está a la izquierda) -->|-<!-- columna 1 de esta fila ocupada por la celda A (arriba) -->| C| D|-| mi| intervalo de filas = 2 colspan = 2 estilo = "text-align: center;" | F <!-- columna 3 de esta fila ocupada por la celda F (a la izquierda) -->|-| GRAMO<!-- columnas 2 y 3 de esta fila ocupadas por la celda F (arriba) -->|-| colspan = 3 estilo = "text-align: center;" | h <!-- columnas 2 y 3 de esta fila ocupadas por la celda H (a la izquierda) -->|}produce
Tenga en cuenta que usar rowspan=2for cell G combinado con rowspan=3for cell F para obtener otra fila debajo de G y F no funcionará, porque todas las celdas (implícitas) estarían vacías.
A continuación se muestra la misma tabla con el orden de las filas y celdas declaradas que se muestran entre paréntesis. También se muestran los usos de rowspany .colspan
Wikitexto
{| clase = wikitable |- ! Columna 1<br>(fila 1 celda 1) !! Columna 2<br>(fila 1 celda 2) !! Columna 3<br>(fila 1 celda 3) |- | amplitud de filas = 2 | A < br > (fila 2 celda 1) < br >< código > filaspan=2 </ código > | colspan = 2 estilo = "text-align: center;" | B < br > (fila 2 celda 2) < br >< código > colspan=2 </ código > |- | C < br > (fila 3 celda 1) <!-- columna 1 ocupada por la celda A --> | D < br > (fila 3 celda 2) |- | E < br > (fila 4 celda 1) | intervalo de filas = 2 colspan = 2 estilo = "text-align: center;" | F < br > (fila 4 celda 2) < br >< código > filaspan=2 colspan=2 </ código > |- | G < br > (fila 5 celda 1) <!-- columna 2+3 ocupada por la celda F --> |- | colspan = 3 estilo = "text-align: center;" | H < br > (fila 6 celda 1) < br >< código > colspan=3 </ código > |} produce
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 fue declarada 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 fue declarado en la fila 4.
Nota: Wikipedia:HTML 5#Atributos de tabla . CSS para reemplazar atributos obsoletos de bordes, relleno, espaciado, etc.
Agregue un borde alrededor de una tabla usando la propiedad CSS , por ejemplo . Este ejemplo utiliza un borde gris sólido (sin guiones) de un píxel de ancho:border: thickness style color;border:3px dashed red
Wikitexto
{| estilo = "espaciado de bordes: 2px; borde: 1px gris oscuro sólido;" ! estilo = "ancho: 140px;" | Izquierda ! estilo = "ancho: 150px;" | Centro ! estilo = "ancho: 130px;" | Derecha |- estilo = "text-align: center;" | [[ Archivo : Destacado.svg | 120px ]] | [[ Archivo : Estrella full.svg | 120px ]] | [[ Archivo : Stargreen.svg | 120px ]] |- estilo = "text-align: center;" | Estrella roja || Estrella naranja || Estrella verde |} produce
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).
Mientras las File:especificaciones omitan el parámetro, |thumbno muestran las líneas de título en la tabla (solo al pasar el mouse). El color del borde darkgraycoincide con las tablas o cuadros de información 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).
Wikitexto
{| borde = 1 |- | Un || B || C |- | D || mi || F |} produce
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 reducirlas a una sola ( cellspacing=...está obsoleta ).
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-collapsepropiedad para combinar los bordes dobles, como se describe arriba:
Wikitexto
{| borde = 1 estilo = "colapso de borde: colapsar;" |- | Un || B || C |- | D || mi || F |} produce
Dos clases de tabla floatlefty floatright(distinguen entre mayúsculas y minúsculas) ayudan a hacer flotar la tabla y a ajustar los márgenes de la tabla para que no se peguen al texto. floatlefthace flotar la tabla hacia la izquierda y ajusta el margen derecho. floatrighthace lo contrario. Ejemplo:
Wikitexto
Este párrafo está ante la mesa. El texto en 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. {| clase = "floatright wikitable" | Col 1, fila 1 | intervalo de filas = "2" | Col 2, fila 1 (y 2) | Col 3, fila 1 |- | Col 1, fila 2 | Col 3, fila 2 |} {| clase = "floatleft wikitable" | Col 1, fila 1 | intervalo de filas = "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 arquitecto 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, adipisci velit, sed quia non 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á ante 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.
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 arquitecto 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, adipisci velit, sed quia non 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 existen 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 floatlefty floatright. Por ejemplo:
Alinear la tabla con la floatleftclase produce:
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 arquitecto 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, adipisci velit, sed quia non 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:
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 arquitecto 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, adipisci velit, sed quia non 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?
align="center"está en desuso en HTML5 y no funciona bien en el software Mediawiki. Por ejemplo; no anulará la alineación izquierda de las tablas mediante class=wikitable.
Se pueden conseguir mesas centradas, pero no "flotan"; es decir, no aparece ningún texto en ninguno de los lados. El truco es {| style="margin-left: auto; margin-right: auto; border: none;"[nota 1]
Wikitexto
Texto antes de la tabla... {| clase = "wikitable" estilo = "margen-izquierdo: automático; margen-derecho: automático; borde: ninguno;" |+ Celdas alineadas a la izquierda, centradas en la tabla |- ! alcance = "col" | ¡ Duis ! alcance = "col" | ¡ auto ! alcance = "col" | irure |- | dolor || en reprehenderit || en velo voluptado |- | esse cillum dolore || ue fugiat nulla || pariatur.|} ...texto después de la tablaComo aparece en un navegador:
Texto antes de la mesa...
...texto tras tabla.
Anidar tablas de datos con celdas de encabezado dificulta que los lectores de pantalla de asistencia las analicen con sensatez.
Los editores a veces utilizan tablas sin encabezado como ayuda para el diseño del contenido, especialmente cuando es más fácil que el uso equivalente de divs y estilos CSS. Para diseños complejos, se puede usar rowspany colspan, pero nuevamente a veces es más simple y fácil de mantener usar tablas anidadas.
Las tablas anidadas deben comenzar en una línea nueva.
En el siguiente ejemplo, se muestran cinco tablas diferentes anidadas dentro de las celdas de una sexta tabla principal. Ninguno tiene celdas de encabezado. 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. floatse utiliza para arreglar cada una de las tablas |C| y |D| a su propia posición dentro de una celda de la tabla. Esto puede usarse para gráficos y esquemas.
Wikitexto:
{| estilo = "borde: 1px negro sólido;" | estilo = "borde: 1px negro sólido;" | &alfa; | estilo = "borde: 1px negro sólido; alineación de texto:centro;" | celda2 {| estilo = "borde: 2px negro sólido; fondo: #ffffcc;" <!-- La tabla anidada debe estar en una nueva línea --> | estilo = "borde: 2px gris oscuro sólido;" | ANIDADO |-| estilo = "borde: 2px gris oscuro sólido;" | MESA |}| estilo = "borde: 1px negro sólido; alineación vertical: abajo;" | la mesa original otra vez | estilo = "borde: 1px negro sólido; ancho:100px" | {| estilo = "borde: 2px negro sólido; fondo: #ffffcc" | estilo = "borde: 2px gris oscuro sólido;" | A |}{| estilo = "borde: 2px negro sólido; fondo: #ffffcc" | estilo = "borde: 2px gris oscuro sólido;" | B | estilo = "borde: 2px gris oscuro sólido;" | B |}| estilo = "borde: 1px negro sólido; ancho: 50px" | {| estilo = "borde: 2px negro sólido; fondo:#ffffcc; flotante:izquierda" | estilo = "borde: 2px gris oscuro sólido;" | C |}{| estilo = "borde: 2px negro sólido; fondo:#ffffcc; flotante:derecha" | estilo = "borde: 2px gris oscuro sólido;" | D |}|}Dos formas de especificar el color del texto y el fondo de una sola celda son las siguientes:
Wikitexto
{| |- | estilo = "fondo: rojo; color: blanco;" | abc | definición | estilo = "fondo: rojo;" |< abarcan estilo = "color: blanco;" > ghi </ span > | jkl |} produce
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.
style="background-color:…"Funciona en celdas de encabezado ordenables. style="background:…"no es. Se rompe la clasificación en esa celda. Consulte Ayuda: Tablas ordenables .
No existe una manera sencilla de especificar un color para una columna completa: cada celda de la columna debe especificarse individualmente. Las herramientas pueden hacerlo más fácil.
Marcado wiki
{| estilo = "fondo: amarillo; color: verde;" |- | estu || estilo = "fondo: plateado;" | vwx || yz |- estilo = "fondo: rojo; color: blanco;" | estu || estilo = "fondo: plateado;" | vwx || yz |- | estu || estilo = "fondo: plateado;" | vwx || yz |} produce
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 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=wikitableplantilla , utilicestyle="background:#EAECF0;" para el encabezado más oscuro, ystyle="background:#F8F9FA;" para el cuerpo más ligero. #A2A9B1 es el color del borde de wikitables.
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.
Wikitexto
{| estilo = "color: blanco;" |- | estilo = "fondo: rojo;" | celda1 | estilo = "ancho: 300px; fondo: azul;" | celda2 | estilo = "fondo: verde;" | celda3 |} produce
De forma predeterminada, el texto está alineado con el centro vertical de la celda:
Para alinear el texto con la parte superior de la celda, aplique style="vertical-align: top;"CSS a las filas (desafortunadamente, parece necesario aplicar esto individualmente a cada fila). El valign=...atributo está obsoleto y MediaWiki puede dejar de usarlo.
Wikitexto
{| clase = estilo wikitable = "ancho: 400px;" |- estilo = "alineación vertical: arriba;" ! alcance = "fila" estilo = "ancho: 10%;" | Encabezado de fila | estilo = "ancho: 70%;" | Una pieza más larga... | estilo = "ancho: 20%;" | Texto breve |} produce
El contenido de una celda se puede sangrar o rellenar en cualquier lado. Además, el texto se puede alinear. En la segunda fila el texto está alineado a la derecha. Vea los siguientes ejemplos.
Wikitexto
{| clase = wikitable |- | Contenido de celda sin sangría ni relleno |- | estilo = "relleno-izquierda: 2em;" | estilo="relleno-izquierda: 2em;"|- | estilo = "text-align:right; padding-right: 2em;" | estilo="text-align:right; padding-right: 2em;"|- | estilo = "relleno-top: 2em;" | estilo="relleno-top: 2em;"|- | estilo = "relleno inferior: 2em;" | estilo="relleno-fondo: 2em;"|- | estilo = "relleno: 3em 5%;" | estilo="relleno: 3em 5%;" {{ espacio | 4 }} (Arriba y Abajo: 3em. Izquierda y Derecha: 5%) |- | estilo = "relleno: 3em 4em 5%;" | estilo="relleno: 3em 4em 5%;" {{ espacio | 4 }} (Arriba: 3em. Izquierda y Derecha: 4em. Abajo: 5%) |- | estilo = "relleno: 3%;" | estilo="relleno: 3%;" {{ espacio | 4 }} (Arriba, Derecha, Abajo e Izquierda: todos 3%) |- | estilo = "relleno: 1em 20px 8% 9em;" | estilo="relleno: 1em 20px 8% 9em;" {{ espacio | 4 }} (Arriba: 1em. Derecha: 20px. Abajo: 8%. e Izquierda: 9em.) |} produce
Patrón para los argumentos:
Los argumentos a style="padding: "pueden verse ordenados por un reloj de 12 horas , comenzando al mediodía y siguiendo en el sentido de las agujas del reloj , en el siguiente sentido: "arriba" está asociado con el mediodía (es decir, las 12 en punto, la parte superior de un reloj ), "derecha" son las 3 en punto, "abajo" son las 6 en punto y "izquierda" son las 9 en punto. Los argumentos están ordenados en el sentido de las agujas del reloj a partir del mediodía: arriba → derecha → abajo → izquierda (consulte esta [nota 2] nota al pie para ver un ejemplo con una explicación).
Este mismo orden también se utiliza en otros lugares, como cuando se especifican los bordes de una celda con border-style: .
Configuración del relleno de celda predeterminado
Úselo cellpadding=para establecer el relleno predeterminado para cada celda de una tabla. Si class=wikitablese usa, se cellpaddingignora. El espacio predeterminado entre celdas se puede cambiar usando cellspacing=.
Si cellpaddingno se usa
Wikitexto
{| estilo = "borde: 1px negro sólido" |- | Celda || Celda |- | Celda || Celda |} produce
Usando cellpadding=10:
Wikitexto
{| relleno de celda = 10; estilo = "borde: 1px negro sólido" |- | Celda || Celda |- | Celda || Celda |} produce
Usando cellpadding=0:
Wikitexto
{| relleno de celda = 0; estilo = "borde: 1px negro sólido" |- | Celda || Celda |- | Celda || Celda |} produce
Usando cellpadding=0y cellspacing=0:
Wikitexto
{| relleno de celda = 0; espacio entre celdas = 0; estilo = "borde: 1px negro sólido" |- | Celda || Celda |- | Celda || Celda |} produce
El mismo CSS usado para las tablas se puede usar en el especificador de formato de una celda (incluido entre |... |) para poner un borde alrededor de cada celda:
Wikitexto
{| estilo = "espaciado de bordes: 2px; borde: 1px gris oscuro sólido;" ! estilo = "ancho: 140px;" | Izquierda ! estilo = "ancho: 150px;" | Centro ! estilo = "ancho: 130px;" | Derecha |- estilo = "text-align: center;" | estilo = "borde: 1px azul sólido;" | [[ Archivo : Destacado.svg | 120px ]] | estilo = "borde: 1px sólido #777777;" | [[ Archivo : Estrella full.svg | 120px ]] | estilo = "borde: 1px sólido #22AA55;" | <!-- borde verdoso --> [[ Archivo : Stargreen.svg | 120px ]] |- estilo = "text-align: center;" | Estrella roja || Estrella naranja || Estrella verde |} produce
Tenga en cuenta que sólo las celdas de la imagen 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.
Las propiedades style='border:'y style='border-style:'pueden aceptar los siguientes argumentos:
border-top, border-right, border-bottom,border-leftWikitexto
{| ! estilo = "borde superior: sólido;" | <code>style="border-top: solid;"</code> |- | style = "borde superior: rojo sólido de 2 px; borde derecho: verde discontinuo de 3 px; borde inferior: azul doble de 5 px; borde izquierdo: amarillo punteado de 6 px;" |< pre > borde superior: sólido 2px rojo; borde derecho: verde discontinuo de 3 píxeles;borde inferior: doble 5px azul;borde izquierdo: punteado 6px amarillo; </pre> | } _produce
style='border-style:'Para establecer el borde izquierdo, derecho, inferior o superior de una sola celda, se puede usar style='border-style:'que toma entre 1 y 4 argumentos, cada uno de los cuales es none, solid, double, dotted, dashed, groove, ridge, inset, outset, inherito initial.
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 los
'border-style: top right bottom left;'
bordes de la celda. Por los motivos descritos después de este ejemplo, hay muchas formas de cambiar el siguiente código que no darían lugar a ningún cambio en la tabla que realmente se muestra .
Wikitexto
{| clase = wikitable |- | Top_Left <!-- estilo de borde: arriba a la derecha, abajo a la izquierda; --> | estilo = "estilo de borde: sólido sólido ninguno ninguno;" | Centro_superior | Arriba_derecha |- | estilo = "estilo de borde: ninguno ninguno sólido sólido;" | Medio_Izquierdo | estilo = "estilo de borde: ninguno ninguno ninguno ninguno;" | Centro_medio | estilo = "estilo de borde: sólido sólido ninguno ninguno;" | Medio_derecha |- | Abajo_izquierda | estilo = "estilo de borde: ninguno ninguno sólido sólido;" | Centro_inferior | Abajo_derecha |} produce
Sin embargo, tenga en cuenta que en la siguiente tabla, ninguno de los Middle_Centerbordes de la celda central (es decir,) se elimina a pesar del código style="border-style: none none none none;":
Wikitexto
{| clase = wikitable |- | Arriba_izquierda || Centro_superior || Arriba_derecha |- | Medio_Izquierdo | estilo = "estilo de borde: ninguno ninguno ninguno ninguno;" | Centro_medio | Medio_derecha |- | Abajo_izquierda || Centro_inferior || Abajo_derecha |} produce
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":
Wikitexto
{| clase = wikitable |- | Arriba_izquierda || Centro_superior || Arriba_derecha |- | Middle_Left <!-- 'estilo de borde: arriba derecha abajo izquierda;' --> | estilo = "estilo de borde: ninguno ninguno ninguno ninguno;" | Centro_medio | estilo = "estilo de borde: ninguno ninguno ninguno ninguno;" | Middle_Right <!-- En la línea anterior, los tres argumentos "ninguno" situados más a la izquierda se pueden reemplazar con "sólido" (u otros argumentos válidos) y no habrá cambios en la tabla que se muestra. Sólo el cuarto argumento, que es el borde izquierdo de Middle_Right, debe ser "ninguno". Por ejemplo, la línea anterior podría reemplazarse por: | style="estilo de borde: sólido sólido sólido ninguno;" | Medio_derecha --> |- | Abajo_izquierda || Centro_inferior || Abajo_derecha |} produce
Para eliminar los bordes externos seleccionados de una wikitable, elimínelos de las celdas adyacentes y comience toda la tabla con código como {| class="wikitable" style="border: none;".
Tenga en cuenta que reemplazar {| class="wikitable"con
{| style="border-collapse: collapse;"
tiene el efecto de eliminar todos los bordes de las celdas que, de otro modo, aparecerían de forma predeterminada alrededor de cada celda de la tabla. Con este cambio, debe insertar un borde de celda única entre dos celdas adyacentes en lugar de eliminar dos bordes de celda.
Consulte Ayuda: secciones de tablas ordenables sobre números de fila. Y:
En una tabla que abarca todo el ancho de una página, las celdas más estrechas que la 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/ancha para afectar a toda la columna. Sin embargo, esto no es una buena idea, porque en los teléfonos móviles la columna no se ajustará y parte de la tabla puede extenderse más allá de la pantalla (especialmente en la vista vertical).
Sin nowrap, tal como aparece en un navegador:
Wikitexto
{| clase = "wikitable ordenable" |- ! alcance = col | Episodio ! alcance = col | Fecha ! alcance = col | Resumen |- | "El viaje comienza" | 1 de enero de 2010 |[[ Lorem ipsum ]] ... <!-- Este texto es un truncamiento del texto real (largo) que se muestra en el resultado siguiente --> |} produce
Con nowrap, en las columnas Episodio y Fecha, tal como aparece en un navegador:
Wikitexto
{| clase = "wikitable ordenable" |- ! alcance = col | Episodio ! alcance = col | Fecha ! alcance = col | Resumen |- | estilo = "espacio en blanco: nowrap;" | "El viaje comienza" | estilo = "espacio en blanco: nowrap;" | 1 de enero de 2010 |[[ Lorem ipsum ]] ... <!-- Este texto es un truncamiento del texto real (largo) que se muestra en el resultado siguiente --> |} produce
Puede agregar información sobre herramientas a las columnas utilizando la plantilla {{ Tooltip }}. Simplemente reemplace el título de la columna con {{Tooltip|Column title|The tool tip}}, lo que hace que aparezca así: Título de la columna .
{{diagonal split header|HEADER-FOR-ROW-HEADERS|HEADER-FOR-COLUMN-HEADERS}}se puede utilizar para dividir diagonalmente una celda de encabezado, como en la celda superior izquierda en el resultado representado a continuación: [nota 3]
Wikitexto
{| clase = wikitable ! {{encabezado dividido diagonal|Desde|Hasta}} ! Sólido !! Líquido !! Gasolina |- ! Sólido | Transformación sólido-sólido || Derritiéndose || Sublimación |- ! Líquido | Congelación || {{ sdash }} || Ebullición/evaporación |- ! Gas | Deposición || Condensación || {{ sdash }} |} produce
Los bordes de las celdas se pueden ocultar agregando border: none; background: none;atributos de estilo de tabla o celda (es posible que no funcione en navegadores más antiguos). Otro uso es implementar tablas alineadas de varias columnas.
Wikitexto
{| clase = estilo wikitable = "borde: ninguno; fondo: ninguno;" ! colspan = 2 filas = 2 estilo = "borde: ninguno; fondo: ninguno;" | [[Archivo:Pfeil_SO.svg| ninguno|enlace=|20px]] ! colspán = 3 | A |- ! Sólido !! Líquido !! Gasolina |- ! amplitud de filas = 3 | De ! Sólido | Transformación sólido-sólido || Derritiéndose || Sublimación |- ! Líquido | Congelación || {{ sdash }} || Ebullición/evaporación |- ! Gas | Deposición || Condensación || {{ sdash }} |} produce
Tenga en cuenta que la eliminación del enlace de una imagen depende de que sea puramente decorativa (ya que los dispositivos de asistencia lo ignorarán) .
Wikitexto
{| clase = estilo wikitable = "borde: ninguno; fondo: ninguno;" ! alcance = col | Año ! alcance = col | Tamaño | amplitud de filas = 5 estilo = "borde: ninguno; fondo: ninguno;" | ! alcance = col | Año ! alcance = col | Tamaño | amplitud de filas = 5 estilo = "borde: ninguno; fondo: ninguno;" | ! alcance = col | Año ! alcance = col | Tamaño |- | 1990 || 1000 < br > (estimado) || 2000 || 1357 || 2010 || 1776 |- | 1991 || 1010 || 2001 || 1471 || 2011 || 1888 |- | colspan = 2 estilo = "text-align: center;" | ⋮ | colspan = 2 estilo = "text-align: center;" | ⋮ | colspan = 2 estilo = "text-align: center;" | ⋮ |- | 1999 || 1234 || 2009 || 1616 || 2019 || 1997 < br > (est) |} produce
Independientemente de si se utiliza el 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:
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:
display: none;el fin de tener un formato para ordenar y otro para mostrarEjemplo:
Usando{{Help:Table/example row template}}
Wikitexto
{| clase = "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 : Tabla/plantilla de fila de ejemplo | 1000 | 81 }} |} produce
Para una fila condicional de una tabla, podemos tener:
Wikitexto
{| clase = 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 |} produce
Con comentarios para explicar cómo funciona, donde se nota que falta la segunda fila:
Wikitexto
{| class = wikitable <!-- La fila uno se muestra porque el '1' se evalúa como VERDADERO. --> {{ #si : 1 |{{ ! }} - ! alcance = fila {{ ! }} fila uno, columna uno <!-- Cualquier {{!}} se evalúa hasta el carácter de barra vertical '|' desde la plantilla '!' solo contiene '|'. --> {{ ! }} fila uno, columna dos }} <!-- La fila dos NO se muestra porque el espacio entre ':' y '|' se evalúa como FALSO. --> {{ #si : |{{ ! }} - ! 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 |} produce
Hay varias otras clases de CSS , además de la básica 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 maneras:
En lugar de recordar los parámetros de la tabla, simplemente incluye una clase apropiada después del archivo {|. Esto ayuda a mantener el formato de la tabla consistente y puede permitir que un solo cambio en la clase solucione un problema o mejore el aspecto de todas las tablas que la usan a la vez. Por ejemplo, esto:
Wikitexto
{| estilo = "espaciado de bordes: 2px;" |+ 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 |} produce
se convierte en esto:
Wikitexto
{| clase = 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 |} produce
simplemente reemplazando el CSS en línea de la tabla por class=wikitable. Esto se debe a que la wikitableclase en MediaWiki:Common.css contiene varias table.wikitablereglas de estilo CSS. Todos estos se aplican a la vez cuando marcas una tabla con la clase. Luego puede agregar reglas de estilo adicionales si lo desea. Estos anulan las reglas de la clase, permitiéndole usar el estilo de la clase como base y desarrollarlo:
Wikitexto
{| clase = estilo wikitable = "estilo de fuente: cursiva; tamaño de fuente: 120%; borde: 3px rojo discontinuo;" |+ 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 |} produce
Observe que la tabla conserva el fondo gris de la wikitableclase y que los encabezados siguen en negrita y centrados. Pero ahora el formato del texto ha sido anulado por la style=declaración local; todo el texto de la tabla se ha puesto en cursiva y en un tamaño 120% normal, y el borde wikitable ha sido reemplazado por el borde rojo discontinuo.
Los tipos de sintaxis de tablas que admite MediaWiki son:
| Sintaxis de WikicódigoLos tres son compatibles con MediaWiki y crean (actualmente) resultados HTML válidos, pero la sintaxis de canalización es la más simple. La sintaxis mixta de HTML y wikicode | (es decir, etiquetas | y no cerradas |-) no necesariamente seguirá siendo compatible con el navegador en el futuro, especialmente en dispositivos móviles.
Véase también elemento HTML#Tablas . Sin embargo, tenga en cuenta que los elementos thead, tbody, tfoot, colgroupy colactualmente no son compatibles con MediaWiki , a partir de julio de 2015 [actualizar].
La sintaxis de canalizaciones, desarrollada por Magnus Manske, sustituye | HTML con barras verticales ( ) y otros símbolos. Hay un script en línea que convierte tablas HTML en tablas de sintaxis de canalización.
Las canalizaciones 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.
Una tabla está definida por , lo que genera .{| parameters |}<table params>...</table>
Para cada tabla, <tr>se genera una etiqueta HTML para la primera fila. Para comenzar una nueva fila, use:
|-
lo que genera otro <tr>.
Los parámetros se pueden agregar así:
|- parámetros
que genera .<tr params>
Nota:
<tr>Las etiquetas se abren automáticamente antes del primer <td>equivalente .<tr>las etiquetas se cierran automáticamente en otro <tr>equivalente y en el </table>equivalenteLas celdas se generan así:
| celda1 | celda2 | celda3
o así:
| celda1 || celda2 || celda3
que ambos generan:
<td>cell1</td><td>cell2</td><td>cell3</td>.
El ||es igual a una nueva línea + | .
Los parámetros en las celdas se pueden usar así:
| parámetros | celda1 || parámetros | celda2 || parámetros | celda3
lo que resulta en:
<td params>cell1</td><td params>cell2</td><td params>cell3</td>
El código utilizado produce un <th>...</th>, que funciona de la misma manera que <td>...</td>, 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 varios encabezados en la misma línea. Sin embargo, los parámetros todavía usan "|". Ejemplo:
! parámetros | celda1
<caption>Se crea una etiqueta mediante
la cual se genera el HTML .|+caption<caption>caption</caption>
También puedes usar parámetros: |+ params |caption que genera .<caption params>caption</caption>
Consulte {{ Plantillas de celdas de tabla }} para obtener un gran conjunto de plantillas para configurar el texto y el color en las celdas de forma estándar, generando resultados en stock. Por ejemplo: "Sí" ( ), "No" ( ), "—" ( ), " N/A " ( ), "?" ( ), sobre fondos de colores.{{Yes}}{{No}}{{N/A}}{{N/A|N/A}}{{dunno}}
Por ejemplo, consulte Comparación de editores de texto , que hace uso frecuente de plantillas de celdas de tablas.
A veces es deseable (como en una tabla compuesta predominantemente de números) rotar el texto de manera que avance de arriba hacia abajo o de abajo hacia arriba en lugar de de izquierda a derecha o de derecha a izquierda. Esto se puede hacer con CSS, pero la forma más sencilla en Wikipedia es encerrar 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 {{=}}.
Si bien las tablas normalmente no deben tener sangría, cuando los párrafos que las rodean también tienen sangría, puede aplicar sangría a las tablas usando margin-left.
Para lograr la misma sangría que dos puntos, use margin-left:1.6em.
Wikitexto
{| clase = "wikitable" estilo = "margen-izquierdo: 1.6em;" |- ! Cabecera 1 ! Encabezado 2 |- | fila 1, celda 1 | fila 1, celda 2 |- | fila 2, celda 1 | fila 2, celda 2 |} produce
Tenga en cuenta que la sangría aplicada solo a la primera línea del wikitexto de la tabla (la línea que comienza con " {|") es suficiente para sangrar toda la tabla.
:::{| class=wikitable
No intente utilizar dos puntos para sangrar en ninguna parte del resto del código de la tabla (ni siquiera al principio de una línea), ya que eso impedirá que el software MediaWiki lea correctamente el código de la tabla.
style="padding: 3em 4em 5%;", el valor 4emse utiliza 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%); en este caso no hay "→ izquierda" porque el relleno "izquierda" ya se ha definido. En style="padding: 3em 5%;", el valor 3emse usa tanto para el relleno "superior" como para el "inferior", mientras que el valor 5%se usa para el relleno "izquierdo" y "derecho", por lo que el orden en el sentido de las agujas del reloj es: arriba [y por lo tanto también abajo] (3em ) → derecha [y por tanto también izquierda] (5%); no hay "→ abajo" ni "→ izquierda" en este caso porque el relleno "abajo" e "izquierda" ya se han definido. El mismo razonamiento se aplica también a style="padding: 1em 20px 8% 9em;", y style="padding: 3%;".
Edición de Wikitexto/Tablas en WikilibrosEdición de Wikitexto/Tablas listas para usar en Wikilibros