Axuda:Como facer táboas

Esta páxina está desactualizada. A información fornecida mudou ou é insuficiente.

As táboas poden resultar de grande utilidade na presentación de contidos. Este artigo trata dous temas: como crear táboas na Galipedia e como decidir se resulta apropiado usar unha táboa ou se é mellor acudir a outro método para mostrar a información.

Creación das táboas

Nas wikipedias as táboas pódense crear de dúas maneiras:

Utilizando o código HTML. Se coñeces esta linguaxe informática, pódela empregar para inserir táboas nos artigos.
Utilizando un código especial da Wikipedia.

O código da Wikipedia é un HTML simplificado e máis doado de empregar.

Código HTML

<table border="1" cellpadding="2">
<caption>Táboa de multiplicar</caption>
<tr><th>×</th><th>1</th><th>2</th><th>3</th></tr>
<tr><th>1</th><td>1</td><td>2</td><td>3</td></tr>
<tr><th>2</th><td>2</td><td>4</td><td>6</td></tr>
<tr><th>3</th><td>3</td><td>6</td><td>9</td></tr>
<tr><th>4</th><td>4</td><td>8</td><td>12</td></tr>
<tr><th>5</th><td>5</td><td>10</td><td>15</td></tr>
</table>

No navegador será algo así:

Táboa de multiplicar
× 1 2 3

1 1 2 3

2 2 4 6

3 3 6 9

4 4 8 12

5 5 10 15

Fíxate no exemplo:

A táboa comeza con <table> e remata con </table>, que é requirido.
A lenda (caption) é unha descrición breve da táboa que debe ir dentro do elemento <caption>, xusto despois da etiqueta <table> inicial.
As fileiras da táboa son os grupos de celas horizontais. Comezan con <tr> (table row, en inglés) e rematan con </tr>.
Os cabezallos da táboa son as celas que levan, precisamente, os cabezallos, e que frecuentemente se mostran destacados - en negra por exemplo. Comezan con <th> (table heading en inglés) e rematan con </th>.
As celas de datos da táboa constitúen o resto. Comezan con <td> (table data en inglés) e rematan con </td>.

Aos elementos <td> e <th> chámaselles "celas", igual que nas follas de cálculo. Cada fileira debe ter o mesmo número de celas que as demais para que o número de columnas sexa consistente (a non ser que haxa celas que se estendan por varias columnas ou fileiras, pero iso non se explica aquí: consulta a sección sobre tabelas nos documentos HTML^{[Ligazón morta]} na especificación HTML). Se algunha cela está baleira convén usar o espazo que non quebra ( ) porque hai navegadores que non formatarían ben a táboa.

Se observas que a táboa non se mostra como esperabas, asegúrate de que todas as etiquetas HTML están aniñadas adecuadamente. Existe un servizo de validación proporcionado polo W3C: W3C MarkUp Validation Service (Servizo de Validación de Código do W3C). Copia o URL do artigo e pégao na caixa de enderezo do validador. Este servizo é especialmente útil no caso de táboas longas e complexas nas que a inspección visual sería difícil.

Excepto o elemento </table>, non é preciso fechar os demais (aínda que si recomendábel segundo o W3C). A táboa de antes sería así sen esas etiquetas finais:

<table border="1" cellpadding="2">
<caption>Multiplication table</caption>
<tr><th>×<th>1<th>2<th>3
<tr><th>1<td>1<td>2<td>3
<tr><th>2<td>2<td>4<td>6
<tr><th>3<td>3<td>6<td>9
<tr><th>4<td>4<td>8<td>12
<tr><th>5<td>5<td>10<td>15
</table>

É máis curta, a páxina é máis doada de manter e dáse menos a que haxa erros.

Por se xa sabes HTML: os elementos thead, tbody, tfoot e colgroup non se poden usar na Wikipedia de momento.

A mesma táboa feita en código Wiki sería así:

{| border="1"

| Táboa de multiplicar
|-
|× ||1 ||2 ||3
|-
|1 ||1 ||2 ||3
|-
|2 ||2 ||4 ||6
|-
|3 ||3 ||6 ||9
|-
|4 ||4 ||8 ||12
|-
|5 ||5 ||10 ||15
|-
|}

O código Wiki permite facer as táboas de xeito doado e facilita a súa posterior edición e actualización.

Outro exemplo de código HTML

Este exemplo é algo máis avanzado e mostra outras opcións dispoñíbeis para a construción de táboas. Proba con estes atributos para comprobar o efecto. Porén, coidado con abusar porque por unha parte o exceso de formato pode confundir e por outra haberá quen queira modificar o artigo e non se lle debe complicar a vida demasiado.

<table border="1" cellpadding="5" cellspacing="0" align="center">
<caption>'''Táboa de exemplo'''</caption>
<tr>
<th style="background:#efefef;">Primeiro cabezallo</th>
<th colspan="2" style="background:#ffdead;">Segundo cabezallo</th>
</tr>
<tr>
<td>superior esquerdo</td>
<td> </td>
<td rowspan=2 style="border-bottom:3px solid grey;" valign="top">
lado dereito</td>
</tr>
<tr>
<td style="border-bottom:3px solid grey;">inferior esquerdo</td>
<td style="border-bottom:3px solid grey;">inferior centro</td>
</tr>
<tr>
<td colspan="3" align="center">
<table border="0">
<caption>''Unha táboa dentro dunha táboa''</caption>
<tr>
<td align="center" width="150px">[[Image:Wikibooks-logo.png]]</td>
<td align="center" width="150px">[[Image:Commons-logo-en.png]]</td>
</tr>
<tr>
<td align="center" colspan="2" style="border-top:1px solid red; 
border-right:1px solid red; border-bottom:2px solid red; 
border-left:1px solid red;">
Dous logos da Wikipedia</td>
</tr>
</table>
</td>
</tr>
</table>
</nowiki>

E así aparece:

Táboa de exemplo
Primeiro cabezallo Segundo cabezallo

superior esquerdo lado dereito

inferior esquerdo inferior centro

Unha táboa dentro dunha táboa

Dous logos da Wikipedia

A mesma táboa en código wiki sería así:

{| border="1" cellpadding="5" cellspacing="0" align="center"
| '''Táboa de exemplo'''
|-
! style="background:#efefef;" | Primeiro cabezado
! colspan="2" style="background:#ffdead;" | Segundo cabezado
|-
| superior esquerdo
|  
| rowspan=2 style="border-bottom:3px solid grey;" valign="top" |
lado dereito
|-
| style="border-bottom:3px solid grey;" | inferior esquerdo
| style="border-bottom:3px solid grey;" | inferior centro
|-
| colspan="3" align="center" |
{| border="0"
| ''Unha táboa dentro dunha táboa''
|-
| align="center" width="150px" | [[Ficheiro:Wikibooks-logo.png]]
| align="center" width="150px" | [[Ficheiro:Commons-logo-en.png]]
|-
| align="center" colspan="2" style="border-top:1px solid red; border-right:1px solid red; border-bottom:2px solid red; border-left:1px solid red;" |
Dous logos da Wikipedia
|}
|}

Código da Wikipedia

Existe un "wikicode" especial para táboas que pode resultar máis doado que o código HTML habitual. Ademais, a fonte é algo máis curta (10-20%). Observa este código wiki:

{| border="1" cellpadding="2"
!Nome
!Efecto
!Xogos nos que aparece
|-
|Pokeball
|Pokeball Normal
|Todas as versións
|-
|Gran Bóla
|Mellor que un Pokeball
|Todas as versións
|-
|Ultra Bóla
|Mellor ca unha Gran Bola
|Todas as versións
|-
|Bóla Mestra
|Captura calquera Pokémon sen fallar.
|Todas as versións
|}

... que se mostrará así no navegador:

Nome Efecto Xogos nos que aparece

Pokeball Pokeball Normal Todas as versións

Gran Bóla Mellor que un Pokeball Todas as versións

Ultra Bóla Mellor c unha Gran Bóla Todas as versións

Bóla Mestra Captura calquera Pokémon sen fallar. Todas as versións

Configuración da largura das columnas

Para forzar a anchura das columnas, no canto de aceptar o largo do elemento de texto máis longo das celas dunha columna, fai como segue. Como se pode ver, o texto pasa á liña seguinte de xeito automático e non hai que comezar unha liña nova.

{| border="1" cellpadding="2"
!width="50"|Nome
!width="225"|Efectos
!width="225"|Xogos nos que aparece
|-
|Pokeball
|Pokeball Normal
|Todas as versións
|-
|Gran Bóla
|Mellor ca un Pokeball
|Todas as versións
|}

Nome Efecto Xogos nos que aparece

Pokeball Pokeball Normal Todas as versións

Gran Bóla Mellor ca un Pokeball Todas as versións

Configuración dos parámetros

Ao iniciar unha cela, engade un parámetro seguido dunha liña vertical. Por exemplo, width=300px| fará que esa cela teña unha anchura de 300 píxeles. Para configurar máis de un parámetro, deixa un espazo entre eles. Olla para este exemplo:

{|
|-
| bgcolor=red|cell1 || width=300px bgcolor=blue|cell2 || bgcolor=green|cell3
|}

No navegador verase así:

cell1 cell2 cell3

Tipos de táboas

En función do uso que se faga da táboa, dos datos que se amosen e do contexto pódese elixir entre varios tipos de modelos.

Barras

Para amosar evolucións da poboación nas cidades, concellos ou países, ou a evolución da facturación de empresas un gráfico de barras pode axudar a interpretar os datos dun xeito moi visual.

<center>
<timeline>
Colors=
  id:AE value:red
  id:a value:gray(0.9)
  id:b value:gray(0.7)
  id:c value:rgb(1,1,1)
  id:d value:rgb(0.6,0.7,0.8)

ImageSize  = width:700 height:350
PlotArea   = left:50 bottom:30 top:30 right:30
DateFormat = x.y
Period     = from:0 till:95000
TimeAxis   = orientation:vertical
AlignBars  = justify
ScaleMajor = gridcolor:b increment:10000 start:0
ScaleMinor = gridcolor:a increment:2000 start:0
BackgroundColors = canvas:c

BarData=

  bar:1842 text:1842
  bar:1857 text:1857
  bar:1877 text:1877
  bar:1887 text:1887
  bar:1900 text:1900
  bar:1910 text:1910
  bar:1920 text:1920
  bar:1930 text:1930
  bar:1940 text:1940
  bar:1950 text:1950
  bar:1960 text:1960
  bar:1970 text:1970
  bar:1981 text:1981
  bar:1991 text:1991
  bar:2001 text:2001
  bar:2010 text:2010
  bar:2011 text:2011
  
PlotData=
  color:d width:20 align:left

  bar:1842 from:0 till: 4141
  bar:1857 from:0 till: 6623
  bar:1877 from:0 till: 20140
  bar:1887 from:0 till: 20550
  bar:1900 from:0 till: 22806
  bar:1910 from:0 till: 25072
  bar:1920 from:0 till: 28957
  bar:1930 from:0 till: 30821
  bar:1940 from:0 till: 36968
  bar:1950 from:0 till: 43221
  bar:1960 from:0 till: 50575
  bar:1970 from:0 till: 52562
  bar:1981 from:0 till: 65137
  bar:1991 from:0 till: 75148
  bar:2001 from:0 till: 74942
  bar:2010 from:0 till: 81981
  bar:2011 from:0 till: 82400 color:AE
  
PlotData=
  
  bar:1842 at: 4141 fontsize:s text: 4.141 shift:(-10,5)
  bar:1857 at: 6623 fontsize:s text: 6.623 shift:(-10,5)
  bar:1877 at: 20140 fontsize:s text: 20.140 shift:(-10,5)
  bar:1887 at: 20550 fontsize:s text: 20.550 shift:(-10,5)
  bar:1900 at: 22806 fontsize:s text: 22.806 shift:(-15,5)
  bar:1910 at: 25072 fontsize:s text: 25.072 shift:(-15,5)
  bar:1920 at: 28957 fontsize:s text: 28.957 shift:(-15,5)
  bar:1930 at: 30821 fontsize:s text: 30.821 shift:(-15,5)
  bar:1940 at: 36968 fontsize:s text: 36.968 shift:(-15,5)
  bar:1950 at: 43221 fontsize:s text: 43.221 shift:(-15,5)
  bar:1960 at: 50575 fontsize:s text: 50.575 shift:(-15,5)
  bar:1970 at: 52562 fontsize:s text: 52.562 shift:(-15,5)
  bar:1981 at: 65137 fontsize:s text: 65.137 shift:(-15,5)
  bar:1991 at: 75148 fontsize:s text: 75.148 shift:(-15,5)
  bar:2001 at: 74942 fontsize:s text: 74.942 shift:(-15,5)
  bar:2010 at: 81981 fontsize:s text: 81.981 shift:(-15,5)
  bar:2011 at: 82400 fontsize:m text: 82.400 shift:(-15,5)
  
TextData=
  pos:(150,310) text:Evolución demográfica de Pontevedra dende 1842

</timeline>
<br clear="left">
:<small>Fonte: [[Instituto Nacional de Estadística (España)|INE]]</small>
<small>Nota: Entre o censo de 1857 e o anterior medra o termo municipal porque incorpora a Verducido. Entre o censo de 1877 e o anterior incorpora Alba, Mourente e Salcedo, entre o de 1950 e o anterior incorpora a Xeve e no censo de 1960 é Ponte Sampaio o que xa está incorporado ao termo da cidade.</small>
</center>

No navegador verase así na páxina:

Fonte: INE

Nota: Entre o censo de 1857 e o anterior medra o termo municipal porque incorpora a Verducido. Entre o censo de 1877 e o anterior incorpora Alba, Mourente e Salcedo, entre o de 1950 e o anterior incorpora a Xeve e no censo de 1960 é Ponte Sampaio o que xa está incorporado ao termo da cidade.

Neste exemplo vemos a evolución da poboación da cidade de Pontevedra dende 1842 ata o 2011. As barras que indican a poboación pódense amosar no color que se desexe definíndoo entre os valores da táboa. Empregar unha cor diferente na última barra axuda a indicar cal é o último dato dispoñible, indica a súa actualización.

Despregables

Pode acontecer que os datos que teñamos non interesen nun primeiro momento ou que sexan interesantes só para ampliar información. Así pode ser moi útil indicar onde está a información e que sexa o lector quen decida o nivel de información ao que desexe acceder.

<center>
{| {{Táboabonita}}
|- valign="TOP"
|  colspan="1" align="center" | [[Ficheiro:Latvia districts numbered.png|500px]]
{| class="wikitable collapsible collapsed" colspan="3"
|- bgcolor="#EEEEEE"
!colspan=3 style="background:Snow" align="center" |{{LVAb}}  Mapa dos distritos de Letonia
|----
|1. [[Condado de Aizkraukles|Aizkraukles]]<br />2. [[Condado de Alūksnes|Alūksnes]].<br />3. [[Condado de Balvi|Balvi]].<br />4. [[Condado de Bauskas|Bauskas]].<br />5. [[Condado de Cēsis|Cēsis]].<br />6. [[Condado de Daugavpils|Daugavpils]].<br />7. [[Daugavpils]] (cidade).<br />8. [[Condado de Dobeles|Dobeles]].<br />9. [[Condado de Gulbenes|Gulbenes]].<br />10. [[Condado de Jēkabpils|Jēkabpils]].<br />11. [[Condado de Jelgava|Jelgava]].<br />
||12. [[Jelgava]] (cidade).<br />13. [[Jūrmala]] (cidade).<br />14. [[Condado de Kraslava|Krāslava]].<br />15. [[Condado de Kuldīga|Kuldīga]].<br />16. [[Condado de Liepaja|Liepāja]].<br />17. [[Liepāja]] (cidade).<br />18. [[Condado de Limbazu|Limbažu]].<br />19. [[Condado de Ludza|Ludza]].<br />20. [[Condado de Madonas|Madonas]].<br />21. [[Condado de Ogre|Ogre]].<br />22. [[Condado de Preili|Preiļi]].<br />
||23. [[Condado de Rezekne|Rēzekne]].<br />24. [[Rēzekne]] (cidade).<br />25. [[Distrito de Riga]].<br />26. [[Riga]] (cidade).<br />27. [[Condado de Saldus|Saldus]].<br />28. [[Condado de Talsi|Talsi]].<br />29. [[Condado de Tukuma|Tukuma]].<br />30. [[Condado de Valkas|Valkas]].<br />31. [[Condado de Valmieras|Valmieras]].<br />32. [[Condado de Ventspils|Ventspils]].<br />33. [[Ventspils]] (cidade).<br />
|----
|}
|}
</center>

No navegador verase así na páxina:

Mapa dos distritos de Letonia

1. Aizkraukles
2. Alūksnes.
3. Balvi.
4. Bauskas.
5. Cēsis.
6. Daugavpils.
7. Daugavpils (cidade).
8. Dobeles.
9. Gulbenes.
10. Jēkabpils.
11. Jelgava.
12. Jelgava (cidade).
13. Jūrmala (cidade).
14. Krāslava.
15. Kuldīga.
16. Liepāja.
17. Liepāja (cidade).
18. Limbažu.
19. Ludza.
20. Madonas.
21. Ogre.
22. Preiļi.
23. Rēzekne.
24. Rēzekne (cidade).
25. Distrito de Riga.
26. Riga (cidade).
27. Saldus.
28. Talsi.
29. Tukuma.
30. Valkas.
31. Valmieras.
32. Ventspils.
33. Ventspils (cidade).

Combinación dun mapa de Letonia cunha barra despregable onde se amosan (previa selección) os distritos de Letonia, pinchando sobre eles redireciónase á páxina wiki.

Usos combinados

As táboas poden empregarse de xeito flexible: columnas e filas ocupando distintas posicións e agrupándoas.

{| border="1" cellpadding="5" cellspacing="0"
|  táboa múltiple  <!-- Cabeceiro da táboa -->
|-
| Columna 1 || Columna 2 || Columna 3||rowspan="6"| Columna 4
|-
| rowspan="2" | A
| colspan="2" style="text-align: center;" | B
|-
| C <!-- columna 1 ocupada por celda A -->
| D
|-
| E
| rowspan="2" colspan="2" style="text-align: center;" |F
|-
| G <!-- columna 2 3 ocupando a celda F -->
|-
| colspan="3" style="text-align: center;" | H
|}

No navegador vese así:

táboa múltiple
Columna 1	Columna 2	Columna 3	Columna 4
A	B
	C	D
E	F
G
H

Mapas pinchables

Unha opción non moi empregada na Galipedia son as táboas que empregan imaxes e ligazóns pinchables.

**Mapa con ligazóns pinchables**
A Coruña Lugo Ourense Pontevedra Océano Atlántico

O código wiki sería así:

{| cols="2"
|- valign="top"
|<div style="width:108%; height:40em; overflow:auto; background:white; border:0px solid #B4B4B4">
{| style="border: 0px solid #BBB; margin: 0.1em 0 0 0em;"
| '''Mapa con ligazóns pinchables'''
|-
| valign="top" | <onlyinclude>{{Image label begin|image=Galicia Topo.svg|width=400|margin=0.4em 0pt 1.3em 1.3em|link=|alt=Mapa de Galiza físico}}
{{Image label small|x=0.4|y=0.25|scale=400|text=<font color="#0645AD">
[[Provincia da Coruña|<big>A Coruña</big>]]</font>}}
{{Image label small|x=0.7|y=0.4|scale=400|text=<font color="#0645AD">
[[Provincia de Lugo|<big>Lugo</big>]]</font>}}
{{Image label small|x=0.6|y=0.7|scale=400|text=<font color="#0645AD">
[[Provincia de Ourense|<big>Ourense</big>]]</font>}}
{{Image label small|x=0.2810|y=0.595|scale=400|text=<font color="#0645AD">
[[Provincia de Pontevedra|<big>Pontevedra</big>]]</font>}}
{{Image label small|x=0.1|y=0.1|scale=400|text=<font color="#0645AD">
<big>[[Océano Atlántico]]<big></font>}}
</center>
{{Image label end}}</onlyinclude>
|}
|}

Uso das táboas

As táboas constitúen elementos deseño perfectos para organizar información que se presenta máis adecuadamente en forma de fileiras e columnas. Exemplos disto son:

Táboas matemáticas
- Táboas de sumar
- Táboas de multiplicar
Listas de información
- Palabras equivalentes en dúas ou máis linguas
- O esquema Persoa, Data de nacemento, Traballo
- O esquema Artista, Álbum, Ano, Discográfica

Cando non usar táboas

As listas, porén, é mellor deixalas como listas moitas veces. Algúns artigos conteñen listas tan longas que resultarían moi difícil de modificar se estiveren en formato de táboa. Antes de darlle un formato de táboas a unha lista considera se esta é a maneira máis clara de transmitir a información. De non haber un beneficio claro no uso dunha táboa, non a uses.

Nas wikipedias as táboas non se deberían usar tampouco para a disposición gráfica, como se fai con frecuencia nas páxinas web. En particular, non se deben usar táboas para colocar unha descrición a pé de foto, reunir un grupo de ligazóns ou outros deseños semellantes. Os artigos resultarán máis difíciles de editar e non é ese o propósito co que se crearon as táboas.

Listas

Listas moi longas ou, simplemente, listas

Se unha lista é bastante longa, ou relativamente simple, usa un dos formatos de lista padrón das Wikipedia. As listas longas resultan difíciles de manter se van dentro dunha táboas e, de todos os xeitos, as listas simples non precisan do formato de fileira e columna que fornecen as táboas. Velaquí varios exemplos de cousas que resultaría mellor facer con listas e non con táboas.

Usando táboas (non fagas así)

1976 Fuxan os ventos

1977 O tequeletequele

1978 Galicia canta ó neno

1979 Sementeira

1981 Quen a soubera cantar

1984 Noutrora

1999 Sempre e máis despóis

Sen táboas (fai así)

1976: Fuxan os ventos

1977: O tequeletequele

1978: Galicia canta ó neno

1979: Sementeira

1981: Quen a soubera cantar

1984: Noutrora

1999: Sempre e máis despóis

Disposición das imaxes

Vense ás veces imaxes colocadas nun artigo mediante unha táboa. Isto faise porque, para situar a imaxe á dereita ou á esquerda, antes usábase o método de colocar unha táboa con dúas celas, unha co texto e outra coa imaxe. Pero isto era antes, con navegadores máis antigos e antes da aparición das follas de estilo. Pero agora a maioría dos navegadores procésannas sen problema. Recoméndase, polo tanto, dispor as imaxes usando un elemento chamado div.

Atoparás instrucións máis detalladas noutros lugares, pero aquí vai unha presentación rápida:

Usando táboas (non fagas así)

<table align="right" border="0" cellpadding="0"><tr><td>[[Image:Covalent.png]]</td></tr></table>

Sen táboas (fai así)

[[Image:Covalent.png|right|]]

Nos dous casos, o resultado é basicamente o mesmo; a imaxe "flota" cara a parte dereita da pantalla e o texto que a rodea québrase arredor dela. Nun navegador verase así:

O enlace covalente é unha forma de enlace químico caracterizado pola compartición de un ou máis pares de electróns entre átomos para producir unha atracción mútua que mantén unida a molécula resultante. Os átomos tenden a compartir electróns de tal maneira que se enchan as órbitas exteriores. Estes enlaces son sempre máis fortes que o enlace de hidróxeno intermolecular e semellantes en forza ou máis fortes que o enlace iónico.
Os enlaces covalentes danse con maior frecuencia entre átomos con electronegatividades semellantes (altas), nos que se require demasiada enerxía para tirarlle un electrón a un átomo. Os enlaces covalentes son máis comúns entre os non metais, mentres que o enlace iónico é máis común entre un átomo de metal e un átomo dun non metal.
O enlace covalente tende a ser máis forte que outros tipos de enlace, como o enlace iónico. Ao contrario que nos enlaces iónicos, nos que os ións se manteñen unidos por unha atracción culómbica non direccional, os enlaces covalentes son moi direccionais. Como resultado, as moléculas con enlaces covalentes tenden a formarse nun número pequeno de formas características, mostrando ángulos de enlace específicos.

Véxase tamén

Ligazóns externas

Explicación en Metawiki (en inglés).
Respecto a táboas ordenadas (en inglés).

Volver á páxina de axuda.