Bruno en 07:51 28 oct 2014

2014-10-28T07:51:45Z

Página nueva

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 ===
<source lang="html4strict">
<table> ... </table>
</source>

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 ===
<source lang="html4strict">
<tr> ... </tr>
</source>

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 ===
<source lang="html4strict">
<td> ... </td>
</source>

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:
<source lang="html4strict">
<table border="1">
<tr>
<td>cela 1</td>
<td>cela 2</td>
</tr>
<tr>
<td>cela 3</td>
<td>cela 4</td>
</tr>
</table>
</source>

Este código crea a seguinte táboa:
<div style="margin:0; background:#E6ECFF; font-size:100%; border:1px solid #cccccc; text-align:left; padding:0.2em 0.4em; -moz-border-radius:6px">
<table border = "1">
<tr>
<td>cela 1</td>
<td>cela 2</td>
</tr>
<tr>
<td>cela 3</td>
<td>cela 4</td>
</tr>
</table>
</div>

== 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:
<source lang="html4strict">
<table border="1">
<tr>
<td colspan="2">cela 1</td>
</tr>
<tr>
<td>cela 3</td>
<td>cela 4</td>
</tr>
</table>
</source>

Este código crea a seguinte táboa:
<div style="margin:0; background:#E6ECFF; font-size:100%; border:1px solid #cccccc; text-align:left; padding:0.2em 0.4em; -moz-border-radius:6px">
<table border = "1">
<tr>
<td colspan="2">cela 1</td>
</tr>
<tr>
<td>cela 3</td>
<td>cela 4</td>
</tr>
</table>
</div>

* 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:
<source lang="html4strict">
<table border="1">
<tr>
<td rowspan="2">cela 1</td>
<td>cela 2 </td>
</tr>
<tr>
<td>cela 4</td>
</tr>
</table>
</source>

Este código crea a seguinte táboa:
<div style="margin:0; background:#E6ECFF; font-size:100%; border:1px solid #cccccc; text-align:left; padding:0.2em 0.4em; -moz-border-radius:6px">
<table border="1">
<tr>
<td rowspan="2">cela 1</td>
<td>cela 2 </td>
</tr>
<tr>
<td>cela 4</td>
</tr>
</table>
</div>

* 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:
<source lang="html4strict">
<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>
</source>
Este código crea a seguinte táboa:
<div style="margin:0; background:#E6ECFF; font-size:100%; border:1px solid #cccccc; text-align:left; padding:0.2em 0.4em; -moz-border-radius:6px">
<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>
</div>

=== 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:
<source lang="html4strict">
<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>
</source>
Este código crea a seguinte táboa:
<div style="margin:0; background:#E6ECFF; font-size:100%; border:1px solid #cccccc; text-align:left; padding:0.2em 0.4em; -moz-border-radius:6px">
<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>
</div>

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:
<source lang="html4strict">
<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í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>
</source>
O código anterior da o seguinte resultado:
<div style="margin:0; background:#E6ECFF; font-size:100%; border:1px solid #cccccc; text-align:left; padding:0.2em 0.4em; -moz-border-radius:6px">
[[Imagen:tablaplanetaria.jpg]]

</div>

== 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:
<source lang="html4strict">
<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>
</source>
O código anterior daría o seguinte resultado:
<div style="margin:0; background:#E6ECFF; font-size:100%; border:1px solid #cccccc; text-align:left; padding:0.2em 0.4em; -moz-border-radius:6px">
<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>
</div>
* 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:
<source lang="html4strict">
<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>
</source>
O código anterior daría o seguinte resultado:
<div style="margin:0; background:#E6ECFF; font-size:100%; border:1px solid #cccccc; text-align:left; padding:0.2em 0.4em; -moz-border-radius:6px">
[[Imagen:tablacellpadding.jpg]]
</div>

=== 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.

--[[Usuario:Vieites|Vieites]] 8 xan 2009

Táboas - Historial de revisiones

Bruno en 07:51 28 oct 2014