Page data
Authors Kathy Nativi
Published 2021
License CC BY-SA 4.0
Derivative of Help:Table_examples
Language Español (es)
Page views 11

Tabla[edit | edit source]

Consulta Tablas para crear tablas básicas usando la barra de herramientas.

Algunos de los siguientes ejemplos se tomaron directamente de la sección de ejemplos de la página de ayuda de MediaWiki sobre la edición de tablas, y hay más ejemplos allí.

Si deseas crear una tabla, el mejor enfoque es buscar una tabla similar en esta página, luego copiar/pegar el ejemplo en tu artículo y experimentar un poco. Las tablas son algo engorrosas de editar, ya que no se parecen mucho al producto terminado, pero las tablas simples no son demasiado difíciles de hacer.

También te puede interesar el siguiente convertidor online:

Ejemplos[edit | edit source]

Ejemplo simple[edit | edit source]

Ambos generan el mismo resultado. Elije un estilo basado en la cantidad de celdas en cada fila y el texto total dentro de cada celda.

Wiki markup

{| 
| A 
| B
|- 
| C
| D
|}

Or:

{| 
| A || B
|- 
| C || D 
|}

Cómo se ve en su navegador

A B
C D

Tabla de costos[edit | edit source]

A continuación, se muestra un ejemplo de una tabla de costos:

Cantidad Material Fuente Costo ($) Total ($)
3 Things The Thing Store 2.20 6.60
1 Another thing - 3' x 2', Yellow The OT Store 240.00 240.00
Costo total $246.60

El siguiente es el código que hizo esa tabla de costos; puedes copiarlo y pegarlo para adaptarlo al tuyo:

{| class="wikitable sortable"
! Cantidad !! Material !! Fuente !! Costo ($) !! Total ($)
|-
| 3 || Things || The Thing Store
|align="right"| 2.20 
|align="right"| 6.60 
|- 
| 1 || Another thing - 3' x 2', Yellow|| The OT Store 
|align="right"| 240.00 
|align="right"| 240.00 
|-class="sortbottom"
|colspan="4" align="right" | '''Cost total''' 
|align="right"| '''$246.60''' 
|}

Para insertar una nueva línea, simplemente inserte lo siguiente debajo de un "|-":

| # || Descripción|| Ubicación
|align="right"| ##.## 
|align="right"| ##.## 
|- 

Color, alcance de los parámetros[edit | edit source]

Las dos formas de especificar el color del texto y el fondo de una sola celda son las siguientes. Se prefiere la primera forma:

Wiki markup

{| 
| style="background:red; color:white" | abc
| def
| bgcolor="red" | <font color="white"> ghi </font>
| jkl
|}

Cómo se ve en tu navegador

abc def ghi jkl

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:

Wiki markup

{| style="background:yellow; color:green"
|- 
| abc || def || ghi
|- style="background:red; color:white"
| jkl || mno || pqr
|-
| stu || style="background:silver" | vwx || yz
|}

Cómo se ve en tu navegador

abc def ghi
jkl mno pqr
stu vwx yz

Para hacer que la tabla se mezcle con el fondo, use style="background:none". Precaución: style="background:inherit", no funciona con algunos navegadores, incluidos IE6!)

Ancho, alto[edit | edit source]

Se puede especificar el ancho y alto de toda la tabla, así como el alto de una fila. Para especificar el ancho de una columna, uno puede especificar el ancho de una celda arbitraria en ella. Si no se especifica el ancho para todas las columnas y/o la altura no se especifica para todas las filas, entonces existe cierta ambigüedad y el resultado depende del navegador.

Wiki markup

{| style="width:75%; height:200px" border="1"
|- 
| abc || def || ghi
|- style="height:100px" 
| jkl || style="width:200px" |mno || pqr
|-
| stu || vwx || yz
|}

Cómo se ve en tu navegador

abc def ghi
jkl mno pqr
stu vwx yz

Tenga en cuenta que style="inline CSS" no tiene ningún efecto con algunos navegadores. Si la compatibilidad es importante, las construcciones anteriores equivalentes como width="75%" deberían funcionar en más navegadores.

Configuración de los anchos de columna[edit | edit source]

Si desea forzar el ancho de las columnas según sus propios requisitos, 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.

{| border="1" cellpadding="2"
!width="50"|Name
!width="225"|Effect
!width="225"|Games Found In
|-
|Poké Ball || Regular Poké Ball || All Versions
|-
|Great Ball || Better than a Poké Ball || All Versions
|}
Name Effect Games Found In
Poké Ball Regular Poké Ball All Versions
Great Ball Better than a Poké Ball All Versions

Para establecer anchos de columna en una tabla sin encabezados, especifique el ancho en la primera celda para cada columna, así:

{| border="1" cellpadding="2"
|-
|width="100pt"|This column is 100 points wide
|width="200pt"|This column is 200 points wide
|width="300pt"|This column is 300 points wide
|-
|blah || blah || blah
|}
This column is 100 points wide This column is 200 points wide This column is 300 points wide
blah blah blah

Alineación vertical[edit | edit source]

Por defecto, los datos en las tablas están alineados vertical y centralmente, lo que da como resultado diseños de aspecto extraño como este:

Row heading Un texto más largo. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Un texto más corto.
Row heading Un texto más largo.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Un texto más corto.

Tenga en cuenta la tabla flotante a la derecha.

Este párrafo está después de la mesa.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation...

</nowiki>

Cómo se ve en tu navegador

This paragraph is before the table. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation...

Col 1, row 1 Col 2, row 1 (and 2) Col 3, row 1
Col 1, row 2 Col 3, row 2

Tenga en cuenta la tabla flotante a la derecha.

This paragraph is after the table. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation...

Tablas anidadas[edit | edit source]

Esto muestra una tabla (en azul) anidada dentro de la celda 2 de otra tabla. Las tablas anidadas deben comenzar en una nueva línea.

Wiki markup

{| border="1"
| &alpha;
| align="center" | cell2
{| border="2" style="background:#ABCDEF;" <!-- The nested table must be on a new line -->
| NESTED
|-
| TABLE
|}
| valign="bottom" | the original table again
|}

Cómo se ve en tu navegador

α cell2
NESTED
TABLE
the original table again

Uso combinado de COLSPAN y ROWSPAN[edit | edit source]

Wiki markup

{| border="1" cellpadding="5" cellspacing="0"
|-
! Column 1 || Column 2 || Column 3
|-
| rowspan="2"| A
| colspan="2" align="center"| B
|-
| C <!-- column 1 occupied by cell A -->
| D 
|-
| E
| rowspan="2" colspan="2" align="center"| F
|- 
| G <!-- column 2+3 occupied by cell F -->
|- 
| colspan="3" align="center"| H
|}

Cómo se ve en tu navegador

Column 1 Column 2 Column 3
A B
C D
E F
G
H

Tenga en cuenta que el uso de rowspan="2" para la celda G combinado con rowspan="3" para la celda F para obtener otro la fila debajo de G y F no funcionará, porque todas las celdas (implícitas) estarían vacías.

Tablas centradas[edit | edit source]

Se pueden lograr tablas centradas, pero no "flotarán"; es decir, no aparecerá ningún texto a ninguno de los lados. El truco es {| style="margin: 1em auto 1em auto"

Wiki markup

{| class="wikitable" style="margin: 1em auto 1em auto"
|+ '''Cells left-aligned, table centered'''
! Duis || aute || irure
|-
| dolor  || in reprehenderit || in voluptate velit
|-
| esse cillum dolore || eu fugiat nulla || pariatur.
|}

Cómo se ve en tu navegador

Cells left-aligned, table centered
Duis aute irure
dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur.

Parámetros de configuración[edit | edit source]

Al comienzo de una celda, agregue su parámetro seguido de una sola tubería. Por ejemplo, width="300"| establecerá esa celda en un ancho de 300 píxeles. Para configurar más de un parámetro, deje un espacio entre cada uno.

Wiki markup

{| style="color:white"
|-
| bgcolor="red"|cell1 || width="300" bgcolor="blue"|cell2 || bgcolor="green"|cell3
|}

Cómo se ve en tu navegador

cell1 cell2 cell3

Alineación del punto decimal[edit | edit source]

Un método para alinear columnas de números en el punto decimal es el siguiente:

Wiki markup

{| cellpadding="0" cellspacing="0"
|align="right"| 432 || .1
|-
|align="right"| 43 || .21
|-
|align="right"| 4 || .321
|}

Cómo se ve en tu navegador

432 .1
43 .21
4 .321

Si la columna de números aparece en una tabla con relleno de celda o espaciado de celda, aún se pueden alinear los puntos decimales sin un espacio desagradable en el medio. Incrusta una tabla en la celda de cada número y especifique el ancho de las columnas. Asegúrate que los anchos de columna de las tablas incrustadas sean iguales para cada celda de la columna. (Si los puntos decimales aún están desalineados con este método, la columna de la tabla principal puede ser demasiado estrecha. Agrega un parámetro para aumentar el ancho de la columna).

Wiki markup

{|border="1" cellpadding="4" cellspacing="2"
|
{|cellpadding="0" cellspacing="0" width="100%"
|align="right" width="50%"| 432 ||width="50%"| .1
|}
|-
|
{|cellpadding="0" cellspacing="0" width="100%"
|align="right" width="50%"| 43 ||width="50%"| .21
|}
|-
|
{|cellpadding="0" cellspacing="0" width="100%"
|align="right" width="50%"| 4 ||width="50%"| .321
|}
|}

Cómo se ve en tu navegador

432 .1
43 .21
4 .321

En casos simples, se puede prescindir de la función de tabla y simplemente comenzar las líneas con un espacio y poner espacios para colocar los números:

432.1
 43.21
  4.321

Estilos de color de la tabla[edit | edit source]

Los siguientes ejemplos muestran cómo se pueden usar varias combinaciones de colores juntas en tablas.

Layouts[edit | edit source]

Characters
Equipment
Storage & Shops

Darker headers[edit | edit source]

HSV Two-level and One-level header palettes (Darker)
Use for 2-level border Top header 1-level border Btm header,
One header
Background
S / V S40 / V75 S40 / V85 S15 / V75 S15 / V95 S4 / V100
Hue: 35 #BF9F72 #D8B482 #BFB3A2 #F2E3CD #FFFAF4
Two-level top header
Two-level bottom header, One-level header
Background
Hue: 120 #73BF73 #82D982 #A3BFA3 #CEF2CE #F5FFF5
Two-level top header
Two-level bottom header, One-level header
Background
Hue: 205 #729FBF #82B4D8 #A2B3BF #CDE3F2 #F4FAFF
Two-level top header
Two-level bottom header, One-level header
Background

Lighter headers[edit | edit source]

HSV Two-level and One-level header palettes (Lighter)
Use for 2-level border Top header,
One header
1-level border Btm header,
Accent
Background
S / V S15 / V75 S15 / V95 S15 / V75 S10 / V100 S4 / V100
Hue: 35 #BFB3A2 #F2E3CD #BFB3A2 #FFF4E5 #FFFAF4
Two-level top header, One-level header
Two-level bottom header, Accent
Background
Hue: 120 #A3BFA3 #CEF2CE #A3BFA3 #E6FFE6 #F5FFF5
Two-level top header, One-level header
Two-level bottom header, Accent
Background
Hue: 205 #A2B3BF #CDE3F2 #A2B3BF #E5F4FF #F4FAFF
Two-level top header, One-level header
Two-level bottom header, Accent
Background

Paletas de colores[edit | edit source]

Las siguientes paletas de colores muestran muchas posibilidades de uso de colores en tablas.

Tool: HTML HSV RGB Color Converter

[edit | edit source]

H120 S20 V70: #8EB28E
H205 S15 V95: #CDE3F2
H0 S0 V10: #1A1A1A
H195 S0 V75: #BFBFBF
H0 S0 V95: #F2F2F2
H0 S0 V98: #FAFAFA

Main Page and Sidebar[edit | edit source]

H118 S22 V70: #8CB28B
H120 S20 V100: #CCFFCC
H105 S10 V100: #EBFFE5
H222 S22 V65: #818CA5
H22 S22 V85: #DABBA9
H51 S22 V85: #D9D2A9

Greens[edit | edit source]

H105 S40 V75: #85BF72
H105 S40 V85: #97D882
H105 S40 V95: #A9F291
H105 S15 V75: #A9BFA2
H105 S15 V85: #C0D8B8
H105 S15 V95: #D6F2CD
H105 S10 V100: #EBFFE5
H105 S4 V100: #F7FFF4
H115 S40 V75: #79BF72
H115 S40 V85: #89D882
H115 S40 V95: #99F291
H115 S15 V75: #A4BFA2
H115 S15 V85: #BAD8B8
H115 S15 V95: #D0F2CD
H115 S10 V100: #E7FFE5
H115 S4 V100: #F5FFF4
H120 S40 V75: #73BF73
H120 S40 V85: #82D982
H120 S40 V95: #91F291
H120 S15 V75: #A3BFA3
H120 S15 V85: #B8D9B8
H120 S15 V95: #CEF2CE
H120 S10 V100: #E6FFE6
H120 S4 V100: #F5FFF5

Blues[edit | edit source]

H195 S40 V75: #72ACBF
H195 S40 V85: #82C3D8
H195 S40 V95: #91DAF2
H195 S15 V75: #A2B8BF
H195 S15 V85: #B8D0D8
H195 S15 V95: #CDE9F2
H195 S10 V100: #E5F8FF
H195 S4 V100: #F4FCFF
H205 S40 V75: #729FBF
H205 S40 V85: #82B4D8
H205 S40 V95: #91C9F2
H205 S15 V75: #A2B3BF
H205 S15 V85: #B8CBD8
H205 S15 V95: #CDE3F2
H205 S10 V100: #E5F4FF
H205 S4 V100: #F4FAFF
H225 S40 V75: #7285BF
H225 S40 V85: #8297D8
H225 S40 V95: #91A9F2
H225 S15 V75: #A2A9BF
H225 S15 V85: #B8C0D8
H225 S15 V95: #CDD6F2
H225 S10 V100: #E5EBFF
H225 S4 V100: #F4F7FF

Tans & Yellows[edit | edit source]

H20 S40 V75: #BF8C72
H20 S40 V85: #D89E82
H20 S40 V95: #F2B191
H20 S15 V75: #BFACA2
H20 S15 V85: #D8C3B8
H20 S15 V95: #F2DACD
H20 S10 V100: #FFEEE5
H20 S4 V100: #FFF8F4
H35 S40 V75: #BF9F72
H35 S40 V85: #D8B482
H35 S40 V95: #F2C991
H35 S15 V75: #BFB3A2
H35 S15 V85: #D8CBB8
H35 S15 V95: #F2E3CD
H35 S10 V100: #FFF4E5
H35 S4 V100: #FFFAF4
H50 S40 V75: #BFB272
H50 S40 V85: #D8CA82
H50 S40 V95: #F2E291
H50 S15 V75: #BFBAA2
H50 S15 V85: #D8D3B8
H50 S15 V95: #F2ECCD
H50 S10 V100: #FFFAE5
H50 S4 V100: #FFFDF4
H50 S40 V100: #FFEE99
H60 S40 V100: #FFFF99
H60 S10 V100: #FFFFE5
H60 S4 V100: #FFFFF4

Ver también[edit | edit source]