HTML/Táboas

HTML
	Táboas

As táboas usan para amosar os datos en táboas e resulta moi habitual o seu uso para deseñar páxinas. Pódense inserir en calquera parte da páxina, mesmo dentro doutras táboas. Primeiro nos centraremos na creación dunha táboa básica, e a continuación lle engadiremos unha morea de etiquetas para ver como resultaría a táboa ao renderizala. Aquí trátase de experimentar. As etiquetas máis útiles ao crear táboas son <table> (táboa), <tr> (fila da táboa), <td> (cela da táboa) e <th> (título da táboa).

Táboa básica

Botémoslle unha ollada en primeiro lugar a exemplo rápido:

 <table>
 <tr><th>Comida</th><th>Custo</th></tr>
 <tr><td>Pan</td><td>0'60 €</td></tr>
 <tr><td>Leite</td><td>0'95 €</td></tr>
 </table>

Toda táboa comeza cunha etiqueta <table> e remata cunha etiqueta </table>. Na etiqueta table podemos definir atributos da táboa, como veremos máis adiante.

A táboa contén filas, cada unha das cales comeza coa etiqueta <tr> e remata opcionalmente coa etiqueta </table>. As filas han de estar dentro das táboas. Estas conteñen á súa vez celas, cada unha das cales comeza coa etiqueta <td> e remata opcionalmente coa etiqueta </td>. As celas teñen que estar dentro das filas.

Se se sitúa unha cela fóra dunha fila, ou se se esquece pechar unha cela, fila ou táboa os resultados serán impredecibles. O texto que debería estar na táboa podería aparecer nunha posición inesperada, fóra da táboa. Ou no peor dos casos, podería non amosarse ningún dos contidos da táboa.

Por exemplo, nalgúns dos navegadores máis utilizados:

• Unha cela fóra dunha fila interpŕetase coma unha fila aparte na posición correspondente.
• Todo contido fóra das celas, estea ou non nunha fila, ponse precedendo á táboa, na orde en que se sucede.

En todo caso, é recomendable incluír sempre as etiquetas </td> e </tr> cando corresponda, para evitar problemas. E en todo caso, non se debe esquecer que a etiqueta </table> é necesaria sempre.

Títulos

Comecemos cun exemplo sinxelo:

<table>
<caption>Fórmulas e resultados</caption>
<tr><th>Fórmula</th><th>Resultado</th></tr>
<tr><td>1 + 1</td><td>2</td></tr>
<tr><td>3 x 5</td><td>15</td></tr>
</table>

Os títulos son útiles para definir ou para describir o contido das táboas. Son opcionais. Para engadir un título a unha táboa, introdúcese o elemento caption despois da primeira etiqueta table que abre a táboa. O texto do título introdúcese deste xeito:

<table>
<caption>Título da táboa</caption>
...
</table>

Os títulos adoitan amosarse fóra dos bordos da táboa, na parte superior. O aspecto e situación concretos dos títulos pode modificarse mediante follas de estilo.

Encabezados

Os encabezados son un modo de definir o contido das columnas da táboa. Adoitan utilizarse a continuación do primeiro <tr>, a primeira fila da táboa. En vez de utilizar a etiqueta <td> para a cela, usaremos <th>.

Por defecto o texto destas celas estará centrado e con letra grosa. A sintaxe é <tr><th>texto</th><th>texto</th></tr>

Bordos

Os bordos das táboas son opcionais: ás veces axudan a definir a táboa, e ás veces a táboa está mellor sen eles. Así e todo, mentres se está a crear unha táboa, polo menos as primeiras veces, está ben deixar os bordos activados para facilitar o traballo coa táboa. Os bordos poden quitarse facilmente unha vez acabada a táboa.

Os bordos desta táboa son dun pixel de ancho.

Os bordos desta táboa son de 5 píxeles de ancho.

Por defecto, as táboas carecen de bordos, é dicir, o ancho dos bordos é 0. O valor do ancho dos bordos é un atributo que se insire dentro da etiqueta table. A súa sintaxe é <table border=X>, onde X é o valor do ancho dos bordos en píxeles, equivalendo 0 a non ter bordos a táboa.

Para outras tarefas relacionadas cos bordos, coma por exemplo establecer a súa cor, pódense usar follas de estilo.

Ancho e alto

Por defecto, o ancho das táboas correspóndese co ancho dos datos que conteñen. Pero podemos cambiar tanto o ancho coma o alto das táboas para que adquiran as proporcións que queiramos. Os valores das medidas podemos dálos non só en píxeles, senón en porcentaxe relativo ao tamaño da pantalla. A sintaxe é <table height=ALTO width=ANCHO>, onde se subtituiría ALTO e ANCHO polos seus respectivos valores ben en píxeles ben en porcentaxe.

Tamén podemos controlar o tamaño de celas e filas da táboa por separado. Por exemplo, con <tr height=80> para unha fila e <td width="50%"> para unha cela.

Espazos das celas

O valor do atributo cellspacing define o espazo de separación que haberá entre as celas dunha táboa (en píxeles). Este atributo colócase dentro da etiqueta table. O seu valor por defecto é 2.

O valor do atributo cellpadding define o espazo de separación que haberá entre os límites da cela e o seu contido (en píxeles). Este atributo colócase dentro da etiqueta table. O seu valor por defecto é 2.

Aliñamento das celas

O aliñamento por defecto das celas é dende a esquerda e centrado verticalmente. Se queres cambiar o aliñamento, tes que facelo en cada unha das celas individuais. O atributo que modifica o aliñamento inclúese dentro da etiqueta <td>.

O valor do aliñamento horizontal establécese mediante align="POSICIÓN", onde posición pode substituírse por left (esquerda), center (centrado), right (dereita) ou justify (para que os textos ocupen todo o ancho posible).

O valor do aliñamento vertical establécese mediante valign="POSICIÓN", onde posición pode substituírse por top (arriba), middle (altura media) ou bottom (abaixo).

Tamén se pode especificar o aliñamento dunha fila de celas especificando o aliñamento na etiqueta <tr>. Así mesmo poden usarse os atributos de aliñamento na etiqueta <table>. Pero neste último caso, hai que ter en conta que align="left" e align="right" non definen a aliñación dos contidos da táboa, senón a aliación da táboa con respecto da páxina.

Expansión das celas

Todas as filas teñen que ter o mesmo número de celas, pero ás veces queremos que unha cela ocupe o que varias celas. Para estas ocasións utilízanse os atributos rowspan e colspan, aos que se lles dá un valor.

			<-- Esta fila ten tres celas.
			<-- Esta fila ten dúas celas. Na primeira incluíuse o atributo colspan="2"
			<-- Esta fila ten tres celas, pero unha ocupa dúas filas porque se lle deu o atributo rowspan="2"
			<-- Esta fila só ten dúas celas, posto que a primeira a definimos na fila anterior.

A sintaxe sería:

• <td colspan=X> onde X é o número de columnas que ocupa a cela.
• <td rowspan=X> onde X é o número de filas que ocupa a cela.

Formatar columnas

Para espeficar un formato para toda unha columna, poden usarse as etiquetas <col> e <colgroup>. Estas sitúanse na parte superior da táboa, e establecen o formato por defecto que terá cada columna.

A primeira etiqueta <col> indicará o formato da primeira columna, a segunda etiqueta a da segunda columna, e así. <colgroup> funciona de xeito semellante, pero inclúe ademais a etiqueta span para afectar a varias columnas.

Só se recomenda o uso destas etiquetas cos atributos span e width.

Cabeceira, corpo e pé

A cabeceira, o corpo e o pé dunha táboa poden definirse respectivamente mediante os elementos thead, tbody e tfoot. Todo o que vaia dentro das etiquetas <thead> e </thead> situarase ao principio da táboa, e todo o que vaia entre as etiquetas <tfoot> e </tfoot> situarase ao final.

Exemplos

No seguinte exemplo pode observarse o uso destes elementos nunha táboa:

<table>
  <caption>Título da táboa</caption>
  <thead>
    <tr>
      <td>Cabeceira 1</td>
    </tr>
    <tr>
      <td>Cabeceira 2 (primeira columna)</td>
      <td>Cabeceira 2 (segunda columna)</td>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>Pé</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Columna 1</td>
      <td>Columna 2</td>
    </tr>
  </tbody>
</table>

Atributos

Atributos desaconsellados

Algúns atributos das táboas están desaconsellados, posto que as súas funcións agora recaen en follas de estilo. Por exemplo:

align

Este atributo serve para establecer a aliñación da táboa. Os seus valores poden ser left (esquerda), center (centro) ou right (dereita). As táboas alíñanse por defecto á esquerda.

Notas

HTML
	Táboas