Táboas

De Manuais Informática - IES San Clemente.
Ir a la navegación Ir a la búsqueda

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:

Tablaplanetaria.jpg

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:

Tablacellpadding.jpg

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