Arribi en 15:16 26 nov 2010

2010-11-26T15:16:04Z

Página nueva

Para controlar a presentación das táboas temos as seguintes propiedades: ''caption-side'', ''table-layout'', ''border-collapse'', ''border-spacing'', ''empty-cells'' e ''display''.

== Caption con CSS ==
Para indicar onde se pon o título da táboa empregamos a propiedade ''caption-side''.
<source lang="css">
table caption {caption-side: bottom; }
</source>
* Pode ter os valores: ''top'', ''bottom'', ''left'' e ''right''.
* A recomendación CSS2.1 recolle a posibilidade de desprazar o contido da etiqueta ''caption'' á esquerda ou dereita con ''text-align'', pero sempre manténdose encima ou debaixo da táboa.

== Celas baleiras ==
* Por defecto unha táboa HTML non debuxa as celas que están baleiras.
* Isto soluciónase poñendo no seu interior '''&nbsp;'''.
* Con CSS pódese solucionar:
<source lang="css">
table {empty-cells: show; >
</source>
* Os valores que admite son ''show'', e así debuxaranse os bordes e fondos como nas celas normais; ''hide'' e así os bordes ou fondos non se debuxarán ao redor/detrás das celas baleiras; ou ''inherit''.

== Bordes separados ou unidos: ''border-collapse'' ==
En CSS hai dous modos de traballar cós bordes das táboas: separados e xuntos. No modelo "separado", os bordes sitúanse ao redor de celas individuais, mentres que no modelo "xunto" as celas comparten bordes.

Coa propiedade ''border-collapse'' elixiremos un dos dous:
* Os bordes que rodean as celas están separados entre si:
<source lang="css">
table {
/* Para que os bordes aparezan */
border:#000 solid thin;
/* Bordes separados */
border-collapse: separate;
}
</source>
* Os bordes "colapsan" e se fan un:
<source lang="css">
table {
/* Para que os bordes aparezan */
border:#000 solid thin;
/* Bordes xuntos */
border-collapse: collapse;
}
</source>

== Separación de celas contiguas con ''border-spacing'' ==
Os valores para ''border-spacing'' son dúas medidas de lonxitude. O valor de espaciado horizontal vai en primeiro lugar e o valor vertical vai en segundo lugar. Cun valor só, configúrase o mesmo para horizontal e para vertical.
<source lang="css">
table{
/* Para que os bordes aparezan */
border:#000 solid thin;
/* Bordes separados */
border-collapse: separate;
/* Configuración da separación dos bordes */
border-spacing: 0.5em 1em;
}
</source>
* Como esta propiedade non ten bo soporte para o IE6, normalmente séguese a empregar a propiedade (X)HTML ''cellspacing''.

== Definir o modo no que o navegador debuxa a táboa con ''table-layout'' ==
O navegador pode "debuxar" unha táboa con un dos dous sistemas posibles:
* Pode fiarse das medidas indicadas no código fonte e debuxala en consecuencia: '''''table-layout:fixed'''''.
* Ou ben pode ler o contido da táboa e calcular o deseño en base a este contido: '''''table-layout:auto'''''.
Se non se especifica o valor desta propiedade, o sistema por defecto é ''auto'', aínda que ''fixed'' é mais rápido.

== Exemplo de configuración completa dos estilos dunha táboa ==
O primeiro é comezar creando unha táboa axeitada en (X)HTML.
{| border="0" cellspacing="0" cellpadding="5" align="center" width="95%"

| [[Imagen:taboa-inicial.JPG|left|Táboa Inicial]]
| [[Imagen:taboa-final.jpg|right|Táboa Final]]
|}

Tendo en conta a aparencia da táboa inicialmente '''(¡¡Ollo!!: A táboa inicial ten a propiedade ''border="1" para que se vexa a súa estrutura)''' e a aparencia ao final, vemos que precisamos, ademais de crear a táboa "básica", debemos introducir as etiquetas ''caption'', ''thead'', ''tfoot'', ''tbody'' e, ademais, introducir unha clase que me diferencie as filas impares que chamaremos, por exemplo, ''fimpar''. O resultado do código html que precisamos será algo así:
<source lang="html4strict">
<table>
<caption>Distancias planetarias</caption>
<thead>
<tr>
<th>Planeta</th>
<th>Distancia dende a Terra</th>
<th>Web</th>
</tr>
</thead>

<tfoot>
<tr>
<td colspan="3">Astronomía IES San Clemente</td>
</tr>
</tfoot>

<tbody>
<tr class="fimpar">
<td>Venus</td>
<td>108 Millóns de Kilómetros</td>
<td>
<a href="http://es.wikipedia.org/wiki/Venus_(planeta)">Web Venus</a>
</td>
</tr>
<tr>
<td>Saturno</td>
<td>1.281 Millóns de Kilómetros</td>
<td>
<a href="http://es.wikipedia.org/wiki/Saturno_(planeta)">Web Saturno</a>
</td>
</tr>
<tr class="fimpar">
<td>Urano</td>
<td>2.720 Millóns de Kilómetros</td>
<td>
<a href="http://es.wikipedia.org/wiki/Urano_(planeta)">Web Urano</a>
</td>
</tr>
<tr>
<td>Neptuno</td>
<td>4.504 Millóns de Kilómetros</td>
<td>
<a href="http://es.wikipedia.org/wiki/Neptuno_(planeta)">Web Neptuno</a>
</td>
</tr>
</tbody>
</table>
</source>
* Primeiramente configuramos o estilo e a cor do borde da táboa en si, facemos que os bordes de todas as celas colapsen, configúrase o tipo de letra de toda a táboa en xeral e a cor do fondo.
<source lang="css">
table {
border-collapse: collapse;
border: 1px solid #03476F;
font: normal 11px verdana, arial, helvetica, sans-serif;
color: #363636;
background: #92C428;
}
</source>
* O seguinte é configurar o "caption" da táboa:
<source lang="css">
caption {
text-align: center;
font: bold 14px arial, helvetica, sans-serif;
background: transparent;
padding:6px 4px 8px 0px;
color: #03476F;
text-transform: uppercase;
}
</source>
* Facemos unha configuración xeral de todas as celas, tanto as nomeadas como ''td'' como ''th'':
<source lang="css">
td, th {
border: 1px dotted #03476F;
padding: .4em;
color: #363636;
}
</source>
* Agora configuramos todo o relacionado coas celas pertencentes ao encabezamento (''thead th'') e coas celas pertencentes ao pé (''tfoot td''):
<source lang="css">
thead th {
font: bold 11px verdana, arial, helvetica, sans-serif;
border: 1px solid #03476F;
text-align: left;
background: #4591AD;
color: #FFFFFF;
padding-top:3px;
}

tfoot td {
border: 1px solid #03476F;
text-align:center;
background: #4591AD;
padding-top:3px;
color: #FFFFFF;
}
</source>
* Aliñamos vertical e horizontalmente o texto das celas ''td'' pertencentes a ''tbody'':
<source lang="css">
tbody td {
vertical-align: top;
text-align: left;
}
</source>
* Facemos que as filas de clase '''''fimpar''''' teñan unha cor de fondo distinta:
<source lang="css">
tr.fimpar {
background: #AEE239;
}
</source>
* Facemos que, cando se pase o rato por riba das celas pertencentes a '''tbody''' estas cambien de aparencia:
<source lang="css">
tbody tr:hover {
background: #FFD800;
border: 1px solid #03476F;
color: #FFF;
}
</source>
* Por último, cambiamos como mostra os enlaces o navegador:
<source lang="css">
tbody td a:link, tbody td a:visited {
background: transparent;
text-decoration: none;
color: #363636;
}
tbody td a:hover, tbody td a:active {
background: #C2F64D;
color: #363636;
}
</source>
* '''Xa estaría rematada a configuración do estilo desta táboa, quedando así o estilo completo do seguinte xeito:'''
<source lang="css">
table {
border-collapse: collapse;
border: 1px solid #03476F;
font: normal 11px verdana, arial, helvetica, sans-serif;
color: #363636;
background: #92C428;
}
caption {
text-align: center;
font: bold 14px arial, helvetica, sans-serif;
background: transparent;
padding:6px 4px 8px 0px;
color: #03476F;
text-transform: uppercase;
}
td, th {
border: 1px dotted #03476F;
padding: .4em;
color: #363636;
}
thead th {
font: bold 11px verdana, arial, helvetica, sans-serif;
border: 1px solid #03476F;;
text-align: left;
background: #4591AD;
color: #FFFFFF;
padding-top:3px;
}
tfoot td {
border: 1px solid #03476F;
text-align:center;
background: #4591AD;
padding-top:3px;
color: #FFFFFF;
}
tbody td {
vertical-align: top;
text-align: left;
}
tr.fimpar {
background: #AEE239;
}
tbody tr:hover {
background: #FFD800;
border: 1px solid #03476F;
color: #FFFFFF;
}
tbody td a:link, tbody td a:visited {
background: transparent;
text-decoration: none;
color: #363636;
}
tbody td a:hover, tbody td a:active {
background: #C2F64D;
color: #363636;
}
</source>

== Enlaces interesantes ==
* [http://icant.co.uk/csstablegallery/index.php Galería de táboas]

--[[Usuario:Vieites|Manuel Vieites]] e -- [[Usuario:Veiga|Rafael Veiga]] feb 2008

CSS para táboas - Historial de revisiones

Arribi en 15:16 26 nov 2010