Táboas

Este punto está dedicado ás táboas HTML, comezando pola súa estrutura e marcado básicos. Tamén se incluirán indicacións para utilizalas no deseño das páxinas web xa que, aínda que estea desaconsellado o seu uso con este propósito, aínda existen moitos sitios web que as usan con tal finalidade. Estes serán os elementos de táboa aos que faremos referencia neste capítulo:

• <table> - Crea unha táboa.
• <tr> - Fila de táboa.
• <td> - Cela de táboa.
• <th> - Cela de cabeceira de táboa.
• <caption> - Proporciona unha lenda de táboa.
• <thead> - Identifica unha cabeceira de táboa.
• <tbody> - Identifica o corpo da táboa.
• <tfoot> - Identifica o pe dunha táboa.

Estrutura básica das táboas

Pódese dicir que as táboas Web están feitas de celas dispostas en filas.

Os elementos mínimos para definir unha táboa son table para establecer a táboa en si, tr para declarar unha fila e td para crear celas dentro da fila.

Tamén se pode definir un elemento caption que debe estar xusto a continuación da etiqueta table, para establecer o título da táboa.

No estandar HTML5, defínense ademáis tres novas etiquetas thead, tbody e tfoot, para agrupar filas, segundo sexan encabezado, corpo ou pe da táboa.

table

  <table> ... </table>

Atributos:

• id, class, style, title

Atributos obsoletos (HTML5):

• align = "left | right | center"
• border = "número"
• cellpadding = "número de píxeles"
• cellspacing = "número de píxeles
• frame = "void | above | below | hsides | lhs | rhs | vsides | box | border"
• rules = "all | cols | groups | none | rows"
• summary = "texto"
• width = "número, porcentaxe"
• bgcolor = "#rrggbb" ou "nome color"

Atributos non estándar:

• height = "número, porcentaxe"

tr

  <tr> ... </tr>

Atributos:

• id, class, style, title

Atributos obsoletos (HTML5):

• bgcolor = "#rrggbb" ou "nome color"
• align = "left | center | right | justify | char"
• char = "caracter"
• charoff = "lonxitude"
• valign = "top | middle | bottom | baseline"

td

  <td> ... </td>

Atributos:

• id, class, style, title
• colspan = "número"
• rowspan = "número"

Atributos obsoletos (HTML5):

• abbr = "texto"
• align = "left | center | right | justify | char"
• axis = "texto"
• bgcolor = "#rrggbb" ou "nome color"
• char = "caracter"
• charoff = "lonxitude"
• headers = "referencias id"
• height = "píxeles, porcentaxe"
• nowrap = "nowrap"
• width = "píxeles, porcentaxe"
• scope = "row | col | rowgroup | colgroup"
• valign = "top | middle | bottom | baseline"

Vexamos un exemplo

Unha táboa sinxela pode ser a seguinte:

<table border="1">
  <tr>
    <td>cela 1</td>
    <td>cela 2</td>
  </tr>
  <tr>
    <td>cela 3</td>
    <td>cela 4</td>
  </tr>
</table>

Este código crea a seguinte táboa:

cela 1	cela 2
cela 3	cela 4

Expandir celas e columnas

Os elementos td pódense expandir en sentido vertical ou horizontal empregando os atributos rowspan e colspan.

Expandir columnas

Para expandir columnas empregamos o atributo colspan. Vexamos un exemplo:

<table border="1">
  <tr>
    <td colspan="2">cela 1</td>
  </tr>
  <tr>
    <td>cela 3</td>
    <td>cela 4</td>
  </tr>
</table>

Este código crea a seguinte táboa:

cela 1
cela 3	cela 4

• Se o parámetro colspan se axusta a un número maior que o número real de columnas (por exemplo poñer colspan = "4" no exemplo anterior) pode facer que algúns navegadores engadan columnas valeiras á táboa e que se rompa o aliñamento.

Expandir filas

O atributo rowspan estira unha cela para que pase a ocupar o espazo de varias celas, esta vez en sentido vertical. Vexamos un exemplo:

<table border="1">
  <tr>
    <td rowspan="2">cela 1</td>
    <td>cela 2 </td>
  </tr>
  <tr>
    <td>cela 4</td>
  </tr>
</table>

Este código crea a seguinte táboa:

cela 1	cela 2
	cela 4

• Pódense combinar os atributos colspan e rowspan para crear unha cela que expanda filas e columnas.

Elementos descritivos

O modelo de táboa básico tamén inclúe dous elementos que proporcionan descricións dos contidos de táboa.

• As celas de cabeceira de táboa th empréganse para describir as celas da fila ou columna á que preceden.
• O elemento caption dá título a toda a táboa.

Cabeceiras de táboa

O elemento th acepta a mesma lista de atributos que td. Vexamos un exemplo:

<table border="1">
  <tr>
    <th>Planeta</th>
    <th>Distancia dende a Terra</th>
  </tr>
  <tr>
    <td>Venus</td>
    <td>42 Millóns de Kilómetros</td>
  </tr>
  <tr>
    <td>Neptuno</td>
    <td>4,3 Millóns de Kilómetros</td>
  </tr>
</table>

Este código crea a seguinte táboa:

Planeta	Distancia dende a Terra
Venus	42 Millóns de Kilómetros
Neptuno	4,3 Millóns de Kilómetros

Lendas

O elemento caption dá un título ou unha descrición breve á táboa.

Atributos:

• id, class, style, title.

Atributos obsoletos:

• align = "top | bottom | left | right"

Este elemento debe ir despois da etiqueta de inicio table e preceder ao resto dos elementos da táboa.

Podemos agora modificar o exemplo anterior do seguinte xeito:

<table border="1">
<caption>Distancias planetarias</caption>
  <tr>
    <th>Planeta</th>
    <th>Distancia dende a Terra</th>
  </tr>
  <tr>
    <td>Venus</td>
    <td>42 Millóns de Kilómetros</td>
  </tr>
  <tr>
    <td>Neptuno</td>
    <td>4,3 Millóns de Kilómetros</td>
  </tr>
</table>

Este código crea a seguinte táboa:

Distancias planetarias

Planeta	Distancia dende a Terra
Venus	42 Millóns de Kilómetros
Neptuno	4,3 Millóns de Kilómetros

Por defecto a lenda aparece na parte superior da táboa e o seu ancho está determinado polo ancho da táboa pódese empregar a propiedade de estilo caption-side para mover a lenda baixo a táboa ou tamén está o atributo obsoleto align, que fai o mesmo.

Grupos de filas

Existen tres elementos de grupo de filas que permiten organizar as filas nunha cabeceira de táboa (thead), nun pé (tfoot) e nun ou varios corpos de táboa (tbody).

Todos estes elementos comparten sintaxe e atributos.

Atributos:

• id, class, style, title
• align = "left | center | right | justify | char"
• char = "caracter"
• charoff = "lonxitude"
• valign = "top | middle | bottom | baseline"

Dicir que o W3C esixe que o elemento tfoot (se existe) apareza antes de tbody no marcado para que a táboa poida renderizar o pé antes de descargar todas as filas de datos.

Vexamos un exemplo:

<table border="1">
<caption>Distancias planetarias</caption>
<thead>
  <tr>
    <th>Planeta</th>
    <th>Distancia dende a Terra</th>
  </tr>
</thead>

<tfoot>
  <tr>
    <td colspan="2">Astronom&iacute;a IES San Clemente</td>
  </tr>
</tfoot>

<tbody>
  <tr>
    <td>Venus</td>
    <td>42 Millóns de Kilómetros</td>
  </tr>
  <tr>
    <td>Neptuno</td>
    <td>4,3 Millóns de Kilómetros</td>
  </tr>
</tbody>
</table>

O código anterior da o seguinte resultado:

Presentación de táboas

Existen varios atributos non obsoletos que poden empregarse para controlar a separación de celas, as súas dimensións, bordes e aliñación (aínda que practicamente todos teñen as súas alternativas CSS).

Espaciado de celas

Hai dous tipos de espacio que pode engadirse en e ao redor das celas:

• Recheo de cela, ou cellpadding, isto é a marxe interior ou o espazo entre unha cela e o seu contido.
• O espazo entre celas ou cellspacing.

Así, cellpadding e cellspacing emprégase có elemento table e aplícase a toda a táboa.

• A cantidade de espazo entre as celas dunha táboa especifícase coa propiedade cellspacing no elemento table. O valor por defecto é de 2 píxeles. Vexamos un exemplo:

<table border="1" cellspacing="10">
<caption>Táboa con <em>cellspacing</em> a 10</caption>
  <tr>
    <td>Venus</td>
    <td>42 Millóns de Kilómetros</td>
  </tr>
  <tr>
    <td>Neptuno</td>
    <td>4,3 Millóns de Kilómetros</td>
  </tr>
</table>

O código anterior daría o seguinte resultado:

Táboa con cellspacing a 10

Venus	42 Millóns de Kilómetros
Neptuno	4,3 Millóns de Kilómetros

• O recheo das celas indica os píxeles existentes entre o borde de cela e o seu contido. Especifícase empregando a propiedade cellpadding no elemento table. O valor por defecto é de 1 píxel. Vexamos un exemplo:

<table border="1" cellpadding="10">
<caption>Táboa con <em>cellpadding</em> a 10</caption>
  <tr>
    <td>Venus</td>
    <td>42 Millóns de Kilómetros</td>
  </tr>
  <tr>
    <td>Neptuno</td>
    <td>4,3 Millóns de Kilómetros</td>
  </tr>
</table>

O código anterior daría o seguinte resultado:

Dimensións de táboa e cela

• Por defecto, unha táboa axústase automaticamente para que todo o seu contido colla no seu interior.
• Así e todo, pódese especificar o ancho dunha táboa empregando o atributo width no elemento table.
• As especificacións HTML non ofrecen ningún modo de especificar a altura dunha táboa, preferindo que a altura sexa determinada automaticamente polos contidos da táboa. Sen embargo, hai un atributo height non estándar que proporciona a altura mínima para a táboa.
• Pódese controlar a altura e a anchura de cada unha das celas empregando os atributos width e height no elemento th ou td. Os valores de altura considéranse alturas mínimas e as celas poden expandirse cara abaixo para acomodar os seus contidos.

Bordes

O elemento table acepta os seguintes atributos para controlar bordes e liñas entre celas e contorno da táboa. Ningún dos seguintes atributos está obsoleto pero recoméndase o uso de CSS no canto deles:

• borde - Controla o ancho do marco en torno á táboa. O valor predeterminado é 1.
• frame - Especifica os lados da táboa nos que se debe renderizar o marco. O atributo frame utiliza os seguintes valores de palabra clave:

- void : Lados horizontais.

- lhs : Lado esquerdo.

- rhs : Lado dereito.

- vsides : Lados verticais.

- hsides : Lados horizontais.

- border : Os catro lados.

• rules - Especifica que liñas se renderizan entre as celas da táboa. Os valores aceptados para o atributo rules son: all, cols, groups, none e rows.

Aliñación horizontal

O atributo align é o empregado para aliñar o contido de cada cela, este atributo acepta os valores habituais: left, right, center e justify.

Aliñación vertical

O atributo valign utilízase para especificar a posición vertical dos contidos de cada cela, os seus valores poden ser:

• top - Superior.
• bottom - Inferior.
• middle - Centro.

Fondos

Para configurar unha cor de fondo a unha cela, fila ou táboa pódese empregar o atributo bgcolor. Así e todo este atributo está obsoleto e recoméndase empregar a propiedade CSS background para aplicar cores e imaxes de fondo.

--Vieites 8 xan 2009