Ayuda:Tablas
Este manual está pendiente de ser revisado.
La actual versión de MediaWiki de Elotrolado.net es la 1.15.1. Este manual se redactó para la antigua versión 1.6.0, por lo que puede sufrir cambios.
Aquí tienes un manual bastante completo sobre cómo hacer tablas. No están absolutamente todas las cosas que se pueden hacer, pero hay más que de sobra para que puedas hacer auténticas virguerías 
. Como siempre, puedes hacer tus ensayos en la página de prueba.
Contenido |
Empezando con las tablas: códigos básicos.
Las marcas wiki para generar tablas son bastante sencillas, aunque al principio cuesta un poco habituarse a ellas. Vamos a ver los elementos más básicos:
- Toda tabla empieza con la línea "{| parámetros opcionales de tabla", y acaba con la línea "|}".
{| Parámetros opcionales de la tabla. El código de tu tabla irá aquí. |}
- Opcionalmente, puede ponerse una leyenda de tabla, que aparecerá justo encima de la tabla. Para ello, inserta una línea del tipo "|+ Leyenda de la tabla."
{| Parámetros opcionales de la tabla.
|+ Leyenda de la tabla.
El código de tu tabla irá aquí.
|}
- El salto de líneas se hace con la línea "|- parámetros opcionales de la fila".
{| Parámetros opcionales de la tabla.
|+ Leyenda de la tabla.
|- Parámetros opcionales de la fila.
Código de celdas.
|- Parámetros opcionales de la fila.
Código de celdas.
|}
- Las filas comienzan por una barra vertical |. Como las filas sólo están separadas por el código "|-", puedes poner el código de la misma fila en tantas líneas como necesites, porque el efecto final será el mismo.
{|
| Aquí hay una fila.
|-
| Aquí hay otra fila
| Aquí continúa la misma fila de antes.
|}
- Para añadir celdas, coloca el contenido de la primera celda de cada fila al principio del código de la misma. A partir de este punto, separa las diferentes celdas por una doble barra vertical, o por un salto de línea.
{|
| A || B || C
|-
| A
| B
| C
|}
- Si deseas incluir parámetros opcionales para las celdas, el formato completo para una celda es el siguiente: tras la barra o las dobles barras de comienzo de celdas, coloca tus opciones, y coloca una sola barra vertical antes del contenido de la celda.
{|
| opciones | A || opciones | B || opciones | C
|-
| opciones | A
| opciones | B
| opciones | C
|}
- Un detalle importante: para tablas sencillas, todas las filas tienen que tener los mismos elementos. Si quieres usar tablas con diferentes tamaños de celdas, mira la sección de cómo cambiar la cuadrícula de una tabla. Si quieres dejar celdas vacías, utiliza el código especial
.
Veamos un ejemplo:
{|
|+ Tabla sencilla.
| A || B
|-
| C || D
|}
Este código genera la siguiente tabla:
| A | B |
| C | D |
Visita la página de prueba para cacharrear con todos estos códigos.
Decorando tu tabla.
Para qué nos vamos a engañar. Sabe a muy poco, ¿verdad? Vamos a ver más cositas:
Añadiendo bordes.
- Para añadir bordes, usa el código "border="tamaño" en las opciones de tabla.
Añadiendo espaciados entre celdas.
- Para fijar el espacio entre los bordes de las celdas, usa el código "cellspacing="tamaño" en las opciones de tabla. Por defecto estará fijado a 1, es decir, aparecerá un hueco entre celda y celda.
Añadiendo espaciados entre el contenido de la celda y el borde.
- Para fijar el espacio entre el contenido de las celdas y el borde de una forma sencilla, usa el código "cellpadding="tamaño" en las opciones de tabla.
Añadiendo títulos.
- ¿Queres usar elementos de título que estén en negrita? Para que la primera columna de tu tabla sea de encabezado, utiliza el signo ! en lugar de la barra | tanto para el comienzo de la primera fila, como para la separación de las celdas. Si en esa primera fila quieres poner opciones para las celdas, sigue usando la barra vertical para separar el contenido de la celda de sus opciones.
- Si quieres que la primera columna también sea de título, comienza la línea por ! en vez de por |. Se resaltará la primera celda de la fila.
Alineación de la tabla y los contenidos.
- Por último, podemos alinear los contenidos de la celda o la propia tabla a la derecha, izquierda, y centro, con el comando "align=left", o "align=center", o "align=right". Si colocas la alineación en las opciones de tabla, alinearás la tabla entera. Situado en las opciones de la fila, aplicarás la opción para toda la fila. Si quieres usar la alineación en una celda concreta, hazlo en su espacio de opciones.
Ejemplo.
Veamos otro ejemplo: ¡a repasar las tablas de multiplicar!
{| border="1" cellpadding="6" align="center"
|+ Tabla de multiplicar del 1 al 4
|-
! × !! align="right" | 1 !! align="right" | 2
! align="right" | 3 !! align="right" | 4 !! align="right" | 5
! align="right" | 6 !! align="right" | 7 !! align="right" | 8
! align="right" | 9
|-
! align="right" | 1
| align="right" | 1 || align="right" | 2
| align="right" | 3 || align="right" | 4 || align="right" | 5
| align="right" | 6 || align="right" | 7 || align="right" | 9
| align="right" | 9
|- align="right"
! 2
| 2 || 4 || 6 || 8 || 10 || 12 || 14 || 16 || 18
|- align="right"
! 3
| 3 || 6 || 9 || 12 || 15 || 18 || 21 || 24 || 27
|- align="right"
! 4
| 4 || 8 || 12 || 16 || 20 || 24 || 28 || 32 || 36
|- align="right"
|}
Este código genera esta tabla:
| × | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |
|---|---|---|---|---|---|---|---|---|---|
| 1 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |
| 2 | 2 | 4 | 6 | 8 | 10 | 12 | 14 | 16 | 18 |
| 3 | 3 | 6 | 9 | 12 | 15 | 18 | 21 | 24 | 27 |
| 4 | 4 | 8 | 12 | 16 | 20 | 24 | 28 | 32 | 36 |
En la página de prueba podrás practicar con todos estos códigos.
Más sobre cómo decorar tu tabla.
Coloreado.
Para insertar color, usa la opción style="background:color; color:color". De esta forma indicarás el color de fondo (background), y el del texto contenido en la celda (color). No hace falta que indiques los dos parámetros, puedes poner sólo uno si el otro va a tener el color por defecto: style="background:color" y style="color:color".
HTML permite muchísimas combinaciones de colores. Los 16 básicos son los siguientes:
| Color | Código HTML | Color | Código HTML | Color | Código HTML | Color | Código HTML |
|---|---|---|---|---|---|---|---|
| Negro | black | Plata | silver | Marrón | maroon | Rojo | red |
| Azul marino | navy | Azul | blue | Púrpura | purple | Fucsia | fuchsia |
| Verde | green | Lima | lime | Oliva | olive | Amarillo | yellow |
| Verde azulado | teal | Aguamarina | aqua | Gris | grey | Blanco | white |
Cuando quieras utilizar uno, escribe su código HTML dentro de la etiqueta style. Por ejemplo, una celda que tenga este style, generará una celda con fondo rojo y texto blanco: style="background:red; color:white". Si estos colores te han sabido a poco, consulta la guía completa de colores HTML.
Ejemplo:
{| align="center" border=1 cellspacing=0 cellpadding=7
| style="background:white; color:black"|1
|style="background:grey" | 2
|style="background:black" | 3
|-
| style="background:yellow; color:black"|4
|style="background:blue" | 5
|style="background:red" | 6
|-
| style="background:lime; color:black"|7
|style="background:orange" | 8
|style="background:purple" | 9
|}
Este código genera la siguiente tabla:
| 1 | 2 | 3 |
| 4 | 5 | 6 |
| 7 | 8 | 9 |
Cambiando las dimensiones de la tabla.
Dimensiones de la tabla completa.
Si no especificas el ancho y el alto de las celdas, su tamaño se decidirá por su contenido. El ancho de cada columna estará definido por el de la celda más grande que haya en ella, al igual que el alto de cada fila estará definida por la celda de mayor altura. Estas celdas que marcan tamaños tienen el menor tamaño que ajusta al contenido. Las demás, simplemente tomarán el ancho y el alto que la mayor celda de su fila o su columna haya marcado.
Si quieres especificar el tamaño que deberá tener toda la tabla, usa la etiqueta style="width:400px; height:200px" en los parámetros de tabla. Si ya tienes una etiqueta style, no debes añadir otra. Simplemente añade las opciones de tamaño dentro de ella, separándolas con puntos y comas. Por ejemplo, el código style="width:400px; height:200px; background: white" aplicado a una tabla, definirá una tabla de 400 píxeles de ancho, 200 de alto, y fondo blanco.
Ejemplo:
{| style="width:300px; height:200px" border="1" align="center"
|- align="center"
| A
| B
| C
|- align="center"
| D
| E
| F
|- align="center"
| G
| H
| I
|}
Este código genera la siguiente tabla:
| A | B | C |
| D | E | F |
| G | H | I |
Cambiando el ancho de las columnas.
Para conseguir este efecto, utiliza la opción width="100px". Utilízala en la primera fila de la columna que quieras variar. Esta opción también sirve cuando tienes títulos de columna:
{| border="1" align="center"
|- align="center"
! width="50px" | A
! width="100px" | B
! width="150px" | C
|- align="center"
| D
| E
| F
|- align="center"
| G
| H
| I
|}
Este código genera la siguiente tabla:
| A | B | C |
|---|---|---|
| D | E | F |
| G | H | I |
Otra alternativa consiste en indicar no los píxeles de ancho, sino el porcentaje en la tabla que quieras que ocupe cada columna. Este porcentaje se suele combinar con unas especificaciones del tamaño total de la tabla.
{| style="width:300px; height:100px" border="1" align="center"
|- align="center"
! width="25%" | A
! width="50%" | B
! width="25%" | C
|- align="center"
| D
| E
| F
|- align="center"
| G
| H
| I
|}
Este código genera la siguiente tabla:
| A | B | C |
|---|---|---|
| D | E | F |
| G | H | I |
Alineación vertical.
Cuando tengas celdas con contenido que entre de sobra en el alto de su fila, se alinearán por defecto a la altura central:
| El Quijote. | En un lugar de la Mancha, de cuyo nombre no quiero acordarme... |
Esta alineación por defecto puede cambiarse con la opción valign="top" o valign="bottom", para alinear el texto hacia arriba o abajo, respectivamente. Usa esta opción para una celda concreta, o para una fila entera. Por desgracia, no funciona como opción para la tabla completa.
Ejemplo:
{| border="1" align="center" cellspacing="0"
| valign="top" | El Quijote.
| width="100px" | En un lugar de la Mancha, de cuyo nombre no quiero acordarme...
|}
| El Quijote. | En un lugar de la Mancha, de cuyo nombre no quiero acordarme... |
Cambiando la cuadrícula.
Imagina que quieres que una celda ocupe dos filas, o dos columnas, como en estas tablas:
| A | B | C |
| D | E |
| A | B | |
| C | D | E |
| A | B | |
| C | ||
| D | E | F |
Para conseguir este efecto, piensa que en realidad, la tabla no ha perdido su cuadrícula. Cuando una celda tenga que ocupar más de una fila o de una columna, se indica con las etiquetas colspan y rowspan, indicando cuántas filas o columnas hay que expandir.
El código de las tablas del ejemplo, para que te hagas una idea, es el siguiente:
{| align=center border=1 cellpadding="5"
|rowspan=2| A
| B
| C
|-
| D
| E
|}
{| align=center border=1 cellpadding="5"
|colspan="2" align="center" | A
| B
|-
| C
| D
| E
|}
{| align=center border=1 cellpadding="5"
|colspan="2" rowspan="2" align="center" | A
| B
|-
| C
|-
| D || E || F
|}
Anidando tablas.
Es posible anidar tablas, de forma que el contenido de una celda sea otra tabla. Para ello, símplemente insértala en el código, teniendo en cuenta que deben colocarse en una línea nueva.
Ejemplo:
| Celda de la tabla original. |
|
otra celda de la tabla original. |
Tablas flotantes.
Habrás visto que cada vez que colocas una tabla, a su altura no aparece ningún texto. Probablemente no siempre quieras que eso sea así, ¿verdad?
| A | B | C |
| D | E |
Imagina que quieres conseguir un efecto como éste. Una tabla a la derecha, y con texto a su altura. Para ello, sólo tienes que poner el texto inmediatamente detrás de la tabla que has creado. Observa el código de este texto:
{| align=right border=1 cellpadding="5"
|rowspan=2| A
| B
| C
|-
| D
| E
|}
Imagina que quieres conseguir un efecto como éste. Una tabla a la derecha,
y con texto a su altura. Para ello, sólo tienes que poner el texto
inmediatamente detrás de la tabla que has creado. Observa el código de
este texto:
Una vez más, siéntete libre de utilizar la página de prueba para practicar con todo esto.
Mapa de la ayuda.
| Tutoriales básicos | |
| Tutoriales para la lectura de artículos | Tutoriales para la edición de artículos |
|
Navegación.
|
|