| Aprende a darle formato a una página |
|---|
Introducción al formato • Dar formato con wikitexto • Enlazar páginas • Construir tablas • Etiquetas HTML • Estilos inline-CSS
|
Si quieres hacer tablas con wikitexto, tienes varias opciones. Esta página no cubrirá todas ellas, pero te mostrará qué cosas del wikitexto equivalen a los elementos HTML, la diferencia que puede hacer una clase de CSS y el ejemplo de una tabla que funciona en escritorio y en dispositivos móviles.
Código básico de tabla[]
El wikitexto es, de varias maneras, solo un atajo para HTML. Si estás familiarizado con HTML, posiblemente se te haga más sencillo crear una tabla de wikitexto. Aquí hay una tabla que te ayudará a entender la conexión entre wikitexto y HTML:
| Descripción | Lo que escribes |
|---|---|
| Inicio de tabla (equivalente a <table>)
|
{|
|
| Subtítulo de tabla (equivalente a <caption>)
|
|+
|
| Fila inicial de tabla (equivalente a <tr>)
|
|-
|
| Encabezado de tabla (parte de una fila; equivalente a <th>)
|
! o !!
|
| Celda de tabla (parte de una fila; equivalente a <td>)
|
| o ||
|
| Fin de tabla (equivalente a </table>)
|
|}
|
| Prerequisitos de tabla en tabbers | {{!}}
|
Notar que el HTML para cerrar una fila (</tr>),encabezado ( </th>), o celda (</td>) será generado automáticamente.
| |
Clases CSS predeterminadas[]
- Nota: Todas las tablas en móvil se estilizan con
article-table, incluso si colocas una clase específica.
Hay varias clases para tablas predeterminadas en Fandom que le dan estilo a la tabla. Para añadirlas, simplemente usa:
{| class="<class>"
Y reemplaza <class> con las clases debajo:
- <sin clase> - Hace un estilo de cuadrícula, sin estilo. (No lo uses para diseño)
wikitable- El estilo de tablas predeterminado de MediaWiki. Añade un borde simple a las columnas y filas. En los encabezados de tabla, rellena el fondo con un color gris.article-table- Un diseño de tabla ligeramente más moderno. Añade un borde inferior para separar las filas, y colorea todas las filas con un color gris semitransparente. Las celdas de encabezado tienen un color gris, similar awikitablefandom-table- Un diseño parecido awikitable, pero con más relleno. Además, tiene un encabezado que se desplaza.
Aquí hay un ejemplo de las clases de tabla en acción:
Sin clase[]
{|
|+ Ejemplo
|-
! Encabezado
! Otro
|-
| Algo
| Extra
|}
| Encabezado | Otro |
|---|---|
| Algo | Extra |
Clase wikitable[]
{| class="wikitable"
|+ Ejemplo
|-
! Encabezado
! Otro
|-
| Algo
| Extra
|}
| Encabezado | Otro |
|---|---|
| Algo | Extra |
Clase article-table[]
{| class="article-table"
|+ Ejemplo
|-
! Encabezado
! Otro
|-
| Algo
| Extra
|}
| Encabezado | Otro |
|---|---|
| Algo | Extra |
Clase fandom-table[]
{| class="fandom-table"
|+ Ejemplo
|-
! Encabezado
! Otro
|-
| Algo
| Extra
|}
| Encabezado | Otro |
|---|---|
| Algo | Extra |
Ejemplos de referencia[]
Tablas básicas[]
| Descripción | Escribes | Obtienes | ||||
|---|---|---|---|---|---|---|
| Tabla simple de 1 celda con borde | {| border="1"
|
| ||||
| Tabla simple de dos celdas con encabezado izquierdo | {| border="1"
|
| ||||
| Tabla simple de 2 x 2 con 90% de ancho, sin borde | {| width="90%"
|
| ||||
| Tabla simple de 2 x 2 con 8px de espacio de celda | {| cellspacing="8px" class="wikitable"
|
|
Abarcado de celda[]
| Descripción | Escribes | Obtienes | ||||||
|---|---|---|---|---|---|---|---|---|
| Tabla de 2 columnas simple con abarcado de ambos encabezados | {| class="article-table"
|
| ||||||
| Tabla simple de dos columnas con abarcado de celdas | {| class="wikitable"
|
| ||||||
| Tabla simple de dos filas con abarcado de celdas | {| class="fandom-table"
|
| ||||||
Alineamiento de celdas[]
| Descripción | Escribes | Obtienes | ||||
|---|---|---|---|---|---|---|
| Tabla simple de 2 x 2 con varios alineamientos, sin encabezados | {| width="100%" class="wikitable"
|
|
Estilos típicos de CSS[]
| Descripción | Escribes | Obtienes | ||||
|---|---|---|---|---|---|---|
| Tabla simple de 2 x 2 con background-color (color de fondo) en CSS | {| style="background-color:yellow;"
|
| ||||
| Tabla simple de 2 x 2 con varios estilos de CSS | {| style="border:3px inset gray; font-size:80%; width:90%;"
|
|
Códigos y más para tablas[]
Como se ha explicado en otra página sobre tablas, estas no siempre se muestran bien en la web móvil. El mejor rumbo es mantener las cosas lo más simple como sea posible. Mira las tablas de los ejemplos arriba, y luego nota, en tu dispositivo móvil, cómo funciona en ese espacio reducido.
Puedes hacer tablas mucho más avanzadas que las de los ejemplos anteriores. Si deseas explorar otras opciones para las tablas de wikitexto, puedes comenzar consultando la página de ayuda de MediaWiki para tablas. Sin embargo, recuerda que mucho de lo que verás en lugares como mediawiki.org o la página de ayuda de Wikipedia no considera del todo los efectos de las tablas en móvil. Es importante verificar siempre tu trabajo con tablas en un teléfono real, para así ver qué tan bien se muestra para los que lean tu wiki en móvil.
También es posible, en algunos casos de uso específicos donde es necesario calcular datos, usar plantillas o incluso usar plantillas basadas en Lua, ambas para crear estructuras de tablas preexistentes, o para usar plantillas dentro de las celdas.
Véase también[]
- Ayuda:Tablas
- Ayuda:Palabras mágicas
- La página de ayuda para tablas en MediaWiki
- La página de ayuda en Meta-Wiki
Ayuda y comentarios[]
- Navega y busca otras páginas de ayuda en Ayuda:Contenidos.
- Revisa Comunidad Central de Fandom para más fuentes de ayuda y soporte.
- Revisa Contactar con Fandom para saber cómo reportar algún error o algún paso que no esté claro en este artículo.