FANDOM


Aquí hay más ejemplos de formateo en wikitexto, específicos para tablas.

Lista de referencia de Wikitexto

Código básico de tabla

Descripción Escribes
Iniciar tabla
(equivalente a <table>)
{|
Iniciar fila 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 ||
Finalizar tabla
(equivalente a </table>)
|}
Notar que el HTML para cerrar una fila (</tr>), encabezado (</th>), o celda (</td>) será generado automáticamente.

Tablas básicas

Descripción Escribes Obtienes
Tabla simple de 1 celda con borde {| border="1"

|-
| fila 1, <br/>celda/columna 1
|}

fila 1,
celda/columna 1
Tabla simple de dos celdas con encabezado izquierdo {| border="1"

|-
! fila 1, <br/>encabezado 1/columna 1
| fila 1, <br/>celda 1/columna 2
|}

fila 1,
encabezado 1/columna 1
fila 1,
celda 1/columna 2
Tabla simple de 3 x 3 {| border="1"

|-
| fila 1, <br/>celda/columna 1
| fila 1, <br/>celda/columna 2
| fila 1, <br/>celda/columna 3
|-
| fila 2, <br/>celda/columna 1
| fila 2, <br/>celda/columna 2
| fila 2, <br/>celda/columna 3
|-
| fila 3, <br/>celda/columna 1
| fila 3, <br/>celda/columna 2
| fila 3, <br/>celda/columna 3
|}

fila 1,
celda/columna 1
fila 1,
celda/columna 2
fila 1,
celda/columna 3
fila 2,
celda/columna 1
fila 2,
celda/columna 2
fila 2,
celda/columna 3
fila 3,
celda/columna 1
fila 3,
celda/columna 2
fila 3,
celda/columna 3
Tabla simple de 2 x 2 con 90% de ancho {| width="90%"

|-
| fila 1, <br/>celda/columna 1
| fila 1, <br/>celda/columna 2
|-
| fila 2, <br/>celda/columna 1
| fila 2, <br/>celda/columna 2
|}

Borde sólo para propósitos ilustrativos.
fila 1,
celda/columna 1
fila 1,
celda/columna 2
fila 1,
celda/columna 1
fila 1,
celda/columna 2
Tabla simple de 2 x 2 con 16px de espacio de celdas
HTML5 ya no soporta el atributo de tablas cellpadding=.
{| cellpadding="8px"

| style="padding:16px;" |-
| style="padding:16px;" | fila 1, <br/>celda/columna 1
| style="padding:16px;" | fila 1, <br/>celda/columna 2
| style="padding:16px;" |-
| style="padding:16px;" | fila 2, <br/>celda/columna 1
| style="padding:16px;" | fila 2, <br/>celda/columna 2
| style="padding:16px;" |}

Borde sólo para propósitos ilustrativos.
fila 1,
celda/columna 1
fila 1,
celda/columna 2
fila 1,
celda/columna 1
fila 1,
celda/columna 2
Tabla simple de 2 x 2 con 8px de cell spacing {| cellspacing="8px"

|-
| fila 1, <br/>celda/columna 1
| fila 1, <br/>celda/columna 2
|-
| fila 2, <br/>celda/columna 1
| fila 2, <br/>celda/columna 2
|}

Borde sólo para propósitos ilustrativos.
fila 1,
celda/columna 1
fila 1,
celda/columna 2
fila 1,
celda/columna 1
fila 1,
celda/columna 2

Abarcado de celda y encabezado

Descripción Escribes Obtienes
Tabla de 2 columnas simple con abarcado de ambos encabezados {|

|-
! colspan="2" | Encabezado del ancho de dos columnas
|-
| fila 1, <br/>celda/columna 1
| fila 1, <br/>celda/columna 2
|-
| fila 2, <br/>celda/columna 1
| fila 2, <br/>celda/columna 2
|}

Colores de las celdas sólo para propósitos ilustrativos.
Encabezado del ancho de dos columnas
fila 1,
celda/columna 1
fila 1,
celda/columna 2
fila 1,
celda/columna 1
fila 1,
celda/columna 2
Tabla simple de dos columnas con abarcado de celdas {|

|-
| fila 1, <br/>celda/columna 1
| fila 1, <br/>celda/columna 2
|-
| colspan="2" | fila 2, <br/>celda/columna 1 y 2
|}

Colores de las celdas sólo para propósitos ilustrativos.
fila 1,
celda/columna 1
fila 1,
celda/columna 2
fila 2,
celda/columna 1 y 2
Tabla simple de dos filas con abarcado de celdas {|

|-
| fila 1, <br/>celda 1/columna 1
| rowspan="2" | fila 1 y 2, <br/>celda 2
|-
| fila 2, <br/>celda 3/columna 1
|}

Colores de las celdas sólo para propósitos ilustrativos.
fila 1,
celda 1/columna 1
fila 1 y 2,
celda 2
fila 2,
celda 3/columna 1

Alineamiento de celdas, encabezados o filas

Descripción Escribes Obtienes
Tabla simple de 2 x 2 con varios alineamientos {| width="100%"

|- valign="top"
| align="right" | fila 1, <br/>encabezado 1, <br/>columna 1
| align="center" | fila 1, <br/>celda 1/columna 2
|- valign="bottom"
| fila 2, <br/>encabezado 2, <br/>columna 1
| fila 2, <br/>celda 2/columna 2
|}

Colores de las celdas sólo para propósitos ilustrativos.
fila 1,
encabezado 1,
columna 1
fila 1,
celda 1/columna 2
fila 1,
encabezado 1,
columna 1
fila 1,
celda 2/columna 2

Títulos de tablas

Descripción Escribes Obtienes
Tabla simple de 2x2 con título {| width="100%"

|-
|+ Título
! fila 1, <br/>encabezado 1, <br/>columna 1
| fila 1, <br/>celda 1/<br/>columna 2
|-
! fila 2, <br/>encabezado 2, <br/>columna 1
| fila 2, <br/>celda 2/<br/>columna 2
|}

Título
fila 1,
encabezado 1,
columna 1
fila 1,
celda 1/
columna 2
fila 1,
encabezado 1,
columna 1
fila 1,
celda 2/
columna 2

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;"

|-
| fila 1, <br/>celda/columna 1
| fila 1, <br/>celda/columna 2
|-
| fila 2, <br/>celda/columna 1
| fila 2, <br/>celda/columna 2
|}

fila 1,
celda/columna 1
fila 1,
celda/columna 2
fila 1,
celda/columna 1
fila 1,
celda/columna 2
Tabla simple de 2 x 2 con varios estilos de CSS {| style="border:3px inset gray; font-size:80%; width:90%;"

|-
! style="background-color:blue; color:pink; padding-left:1em; width:60%;" | fila 1, <br/>encabezado 1/columna 1
| style="text-decoration:line-through;" | fila 1, <br/>celda/columna 2
|-
! style="text-align:right;" | fila 2, <br/>encabezado 2/columna 1
| style="border:1px dotted red;" | fila 2, <br/>celda/columna 2
|}

fila 1,
encabezado 1/columna 1
fila 1,
celda/columna 2
fila 2,
encabezado 2/columna 1
fila 2,
celda/columna 2

Veáse también

Páginas de ayuda sobre Wikitexto:

GeneralEjemplos de tablasEjemplos de enlacesEjemplos de etiquetasCSSMás ejemplos