css - estilos de las tablas.pdf

8/6/2015 CSSEstilosdelastablas

http://mosaic.uoc.edu/ac/le/es/m6/ud7/index.html 1/14

CSSEstilosdelastablas Accesibilidad: : :

33.EstilosdelastablasBenBuchanan.26deseptiembredel2008Publicadoen:fondo,cebra,error,bordes,alinear

Enocasiones,parecequeenelmundoactualdeldesarrolloweblastablasestnalgomarginadas.Sehacetantocasoalanormade"noutilicistablas!"queaveceslagenteseolvidadequeenrealidadlafrasees:"Noutilicistablasparalacomposicin".Lastablasvanmuybienparasuobjetivooriginal,queesmostrardatostabulares.Porelloestilsabercmoaplicarlesestiloscorrectamente.

EstaguasecentraencmoaplicarCSSdemaneraeficazparaobtenerestilosdetablasdedatosclarosylegibles.Adems,tambinhablaremosdealgunosrequisitoshabitualesdeldiseodetablas.

NotaPuedequeosresultetildescargaroslosejemplosdecdigoparalastablasquesemuestran en este apartado desde el archivo "tableexamples.zip", de manera quepodisirsiguiendoelapartado.Descargadlosejemplosen:"tableexamples.zip"

Loscontenidosdeesteapartadosonlossiguientes:

33.1.Estructuradelastablas33.2.Conceptosbsicos

33.2.1.Anchuradetablaydecelda33.2.2.Alineacindeltexto33.2.3.Bordes33.2.4.Relleno33.2.5.Colocacindelcaption33.2.6.Fondo33.2.7.ArreglarelIEconestiloscondicionales33.2.8.Undiseosencillo

33.3.Variacioneshabituales33.3.1.Aplicarlneasdecebra33.3.2.Parrillasincompletas33.3.3.Parrillasinteriores

Parrillasinteriorescon:lastchildResumenPreguntasderepasoLecturascomplementarias

33.1.Estructuradelastablas

AntesdecentrarnosenelCSS, fijmonosen loselementosestructuralesbsicosde las tablasa lasquedeberisaplicarestilos:

Encabezamientosdelastablas.

Celdasdedatosdelastablas.

Ttulosdelastablas.

Cuando los usuarios de vuestro sitio lean vuestra tabla, deberan poder entender y seguir fcilmente suestructura.Lamaneramssencilladeconseguirloesutilizarbordes,coloresdefondooambos.

No es necesario que sigis estas convenciones estilsticas, pero s deberais garantizar que existe unadiferenciaclaraentrelasceldasthytdadems,elcaption(ttulo)deberaestarasociadoclaramentecon



latablaydiferenciadodelrestodeltextodelapgina.

33.2.Conceptosbsicos

Fijaosencmoserepresentaestatablasinestilo:

RecentMajorVolcanicEruptionsinthePacificNorthwestVolcanoName Location LastMajorEruption TypeofEruption

Compiledin2008byMsJen

Mt.Lassen California 191417 ExplosiveEruptionMt.Hood Oregon 1790s PyroclasticflowsandMudflowsMt.St.Helens Washington 1980 ExplosiveEruption

Vedtambin

Podisverelmismoejemploenelapartado19delmdulo"EltextocentraldeHTML".

Losdatossoncomprensibles,perohayqueesforzarseunpocoparavercmovatodo.Aadmosleunosestilosparahacerqueseamsfcildeleer.

33.2.1.Anchuradetablaydecelda

La primera decisin que hay que tomar es qu anchura debe tener la tabla. La opcin por defecto delnavegador es lamisma que establecer table {width: auto; }, que da como resultado que la tabla seextiendaaloanchodelcontenido.Esto,engeneral,quedadesordenado.

Pongamosporcasoquenuestra tabladebe irenunacolumnadecontenidode600pxelesdeanchura.Especificamos que la tabla se ample hasta el 100%de la anchura disponible para aprovecharmejor elespacio.Comohaycuatrocolumnas,establezcamostambinlaanchuradelasceldasdetablaenun25%cadauna.

table{width:100%;}th,td{width:25%;}

Dehecho,podislimitarosaestablecerlaanchuraparathyestodefinirlaanchuradetodaslascolumnasaunas,siemprevabienserriguroso.Esteestilotansencillodarelresultadoqueseveenlafigura1:

Figura1.Latabladeejemploconunaconfiguracinsencilladeanchura

Ahora las celdas quedan con una anchura igualada.Ms adelante ya veremos cmoespecificar anchosdesiguales,perodemomentoseguimosconelsiguientepaso.

33.2.2.Alineacindeltexto

Latablaanesunpococonfusadeleer,demaneraquevamosaespecificarquelaalineacindeltextoseaun poco ms clara. La norma adicional que se muestra a continuacin alinear a la izquierda losencabezamientosparaqueencajenconelcontenido(pordefecto,losnavegadorescentranlosttulosdelastablas):



table{width:100%;}th,td{width:25%;textalign:left;}

Asseclarificaunpocolatabla,comosepuedeverenlafigura2:

Figura2.Tablaconalineacinalaizquierda

Ahoramismo,todaslasceldasestnalineadasverticalmenteenelcentro.Siloprefers,podisdefinirqueel texto se alinee en la parte superior o inferior de la celda, o cualquier posicindeverticalalign quequeris.Lassiguientesreglasestablecenqueeltextosealineeenlapartesuperior.

table{width:100%;}th,td{width:25%;textalign:left;verticalalign:top;}

Ahoralatablaquedacomoseveenlafigura3:

Figura3.Latablaconalineacinvertical

Fijaos en cmo todos los ttulos de la fila superior quedan tocando arriba aunque "LastMajor Eruption"quedaendoslneas.

33.2.3.Bordes

La tabla ya quedaunpocomejor, pero an cuesta un poco leer cada lnea.Ahora aplicaremosalgunosbordesparahacerquetodoseamsfcildeleer.Debisestablecerlosbordesdemaneraindependienteparacadapartedelatablaydespusdecidircmosedeberancombinar.

Paramostrarosdndequedarnlosbordes,lafigura4muestradiferentesbordesparatable(solidblack,negroslido),caption(solidgrey,grisslido),th(dashedblue, lneadiscontinuaazul)ytd(dottedred,lneadepuntosroja):



Figura4.Muestradelosdiferentesbordesenunatabla

Fijaosencmoelbordedelatablerecorreelcontornoexteriordetodaslasceldasdeencabezamientoydedatosydespuspasaentre lasceldasyel ttulode la tabla.Tambinpodisverque,pordefecto, losbordesthytdsedistancianunpocoelunodelotro.

Pasemos ahora a otro estilo de tabla. Podis crear un borde negro sencillo para la tabla y las celdasmediantelapropiedadborder(borde).Estosehaceconlasreglassiguientes:

table{width:100%;border:1pxsolid#000;}th,td{width:25%;textalign:left;verticalalign:top;border:1pxsolid#000;}

ydacomoresultadoloquesemuestraenlafigura4b:

Figura4b.Tablaconbordesnegrossencillos

Estoprovocaquelasfilasseanmsfcilesdeleer,peropuedequenoosgusteelespacioquequedaentrelasceldas.Haydosmanerasdecambiarlo.

Primero,podislimitarosacerrarloshuecosutilizandolapropiedadborderspacing(espaciadodebordes),porejemploas:

table{width:100%;border:1pxsolid#000;}th,td{width:25%;textalign:left;verticalalign:top;border:1pxsolid#000;borderspacing:0;}



Deestamanera,losbordessetocarnenlugardequedarseparados.Assecambiaelbordede1pxelporunbordede2pxeles,comoseveenlafigura5:

Figura5.Tablasinespaciadoentrebordesqueproduceunefectodebordede2pxeles.

Tambinpodisaumentarelespacioentrelasceldasutilizandoborderspacing,aunquehayquetenerencuentaqueestapropiedadnofuncionaconInternetExplorer.

Siquerismantenerelefectodebordede1pxel,necesitarisdefinirlatablademaneraquelosbordesse"colapsen" los unos sobre los otros. Podis conseguirlo utilizando la propiedad bordercollapse(superposicindebordes)enlugardeladeborderspacing(espaciadodebordes):

table{width:100%;border:1pxsolid#000;}th,td{width:25%;textalign:left;verticalalign:top;border:1pxsolid#000;bordercollapse:collapse;}

Deestamanera,obtendrisunatablaconunbordede1pxelcomoseobservaenlafigura6:

Figura6.Tablaconbordercollapse(superposicindebordes)definidoparasuperponerseyasreducirelbordeen1pxel

Cuando definis que los bordes se superpongan, debis tener en cuenta que esto os puede causarproblemas si tenis estilos de bordes diferentes aplicados a celdas adyacentes. Cuando los estilos debordes diferentes se superponen unos sobre otros, entrarn en "conflicto" entre ellos. Esto se solucionamediantelasreglasderesolucindeconflictosdebordesdetabladelaespecificacindeCSS2delW3C,quedeterminanquestilo"gana"cuandosesuperponen.

33.2.4.Relleno

Ahoraqueyahabisaplicadobordesenlasceldas,puedequequerisaadirunpocodeespacioenblancoalasceldasdelttuloydelatabla.Parahacerlo,slodebisutilizarelpadding(relleno).

table{width:100%;border:1pxsolid#000;}



th,td{width:25%;textalign:left;verticalalign:top;border:1pxsolid#000;bordercollapse:collapse;padding:0.3em;}caption{padding:0.3em;}

Estohacequeeltexto"respire"unpoco,comoseveenlafigura7:

Figura7.Tablaconrellenoaplicadoatodaslasceldas

33.2.5.Colocacindelcaption

Hastaahora,elcaptionhaestadosiempreenlapartesuperiordelatabla.Sinembargo,puedequequerismoverloaotrolugar.Pordesgracia,enIEnosepuedehacerhastalaversin8,peroentodoslosdemsnavegadorespodiscambiar laposicindelcaptionutilizando lapropiedadcaptionside (ladodel ttulo).Las opciones posibles son: top (superior),bottom (inferior),left (izquierda) y right (derecha). Ahora lopondremosenlaparteinferior:

table{width:100%;border:1pxsolid#000;}th,td{width:25%;textalign:left;verticalalign:top;border:1pxsolid#000;bordercollapse:collapse;padding:0.3em;captionside:bottom;}caption{padding:0.3em;}

Enlafigura8semuestraelresultado:



Figura8.Tablaconelcaptionmovidoalaparteinferior

Paraelrestodeejemplos,dejaremoselcaptionenlapartesuperior.

33.2.6.Fondo

Otramaneramuysencilladeaplicarestilosa las tablasesaadir colorese imgenesde fondo.Estosehacecon lapropiedadbackground (fondo), aunquedebis tener presenteque lasdiferentespartesde latablaactuarncomo"capas"unaencimadelaotra.LaespecificacinCSS2explicalosefectosdecapasdefondobastantedetalladamente,peroenpocaspalabras:losfondossetaparnlosunosalosotrosenesteorden:

1. tabla(quequeda"alfondodeltodo"o"detrsdetodo"),

2. gruposdecolumnas,

3. columnas,

4. gruposdefilas,

5. filas,

6. celdas(por"encima"o"delante"detodo,esdecir,quesufondotapaatodoslosdems).

Porlotanto,siestablecisunfondoparalatablayuncolordiferenteparalasceldas,elfondodelaceldataparel fondode la tabla.Si habis establecido losbordesencollapse (superposicin), el fondode latablanosever.Noobstante,sihabisestablecidobordercollapseenseparate,el fondode la tablaseverentrelosbordes.

NotaFijaosenqueelconceptodeelementosdiferentesunoencimadelotroenlapginaes controlable podis controlar a qu altura de la "pila" queda un elemento enrelacinconlosdemscambiandosupropiedadzindex.

Vedtambin

Enelapartado37deestemduloaprenderismscosassobrezindex.

Imaginaosquedefinslatablademaneraquetengaunfondorojoylasceldasconfondoblanco.Entrelaseparacindelasceldasseveelrojo,perolasceldassiguensiendoblancas,comosemuestraenlafigura9:



Figura9.Tablaquedemuestracmoelelementodefondodetablarojoseveentrelosfondosblancosdelasceldas.

Tambinpodisutilizarunaimagendefondo.Porejemplo,siqueristenerunagradacinqueseveaentrelasceldas,podraisdefinirthytdconfondosblancos,peroestablecerelfondodetableconunagradacindecolores:

table{bordercollapse:separate;borderspacing:5px;background:#000url("gradient.gif")bottomleftrepeatx;color:#fff;}td,th{background:#fff;color:#000;}

Fijaosenqueelcolordefondoseestableceennegro,quellenaelespacioenlapartesuperiordondeacabalagradacincromtica(siempredebistenerencuentaquelatablapuedesermsaltaquelaimagendefondo). El color de delante del todo se establece en blanco por si en algnmomento estos colores pordefecto se ven a travs del contenido de las celdas. En general, los estilos de las celdas cancelarn laconfiguracindelcolordeltextodelestilodetable{},perosiempresedeberandefinircoloresdefondoydeprimerplanoquehagancontraste.

Estosestiloscreanunatablaquequedaracomoenlafigura10enlamayoradelosnavegadores.

Figura10.Tablaconunaimagendefondocongradacindecoloresqueseveentrelasceldas

Por defecto, con las versiones anteriores a la 8 de IE no se ver tanto el fondo porque no reconocenborderspacing.Sinembargo,seconsigueelmismoefecto,talcomoseobservaenlafigura11:

Figura11.Lasversionesanterioresala8deIEproporcionanmenosespacioentrebordes.

Dependiendode lascircunstancias,puedequeosconformisconestadiferenciaderepresentacinentrenavegadores.Pero,lgicamente,esonosiempreesposible,porejemplocuandounclienteespecificaque



quierequeundiseoquedeexactamenteigualentodoslosnavegadores.

33.2.7.ArreglarelIEconestiloscondicionales

Existeunamaneradesolucionar losproblemasde IEquehemosmencionadoantes.Hayquehurgarunpocoyrequiereunahojadeestiloextra,perofunciona.Podisutilizarunaexpressionparahacerelespacioms ancho y despus cargar esta expresin mediante comentarios condicionales. La sintaxis de laexpresinessta:

table{bordercollapse:expression("separate",cellSpacing="5px");}

Este CSS slo sirve para IE, de manera que slo ste lo debe poder aplicar. La expresin tambininvalidarlahojadeestilo,demaneraquelosdesarrolladoresprefierenaislarlasmanipulacionesdeIEenunahojadeestiloapartequeslocargueIE.

Para hacerlo, cread una hoja de estilo nuevo que se llame ieonly.css ("slo IE") y enlazadla dentro decomentarioscondicionales:

Fijaosenque[iflteIE7]significa"simenosqueoigualalaversin7deIE".EstorevelaelcdigoenIE7yen todas lasversionesanterioresde IE,peroelcomentariodeHTMLque lo rodeaocultaelcdigoatodoslosdemsnavegadores.PodisajustarloacualquierversindeIEquenecesitis,porejemplo,sisetratadelaversinIE6yanteriores,utilizad:[iflteIE6].

Envuestrahojadeestiloprincipal,establecedelestilonormal:

table{border:1pxsolid#000;bordercollapse:separate;borderspacing:5px;background:#000url("gradient.gif")bottomleftrepeatx;}

yentoncesestablecedelestilonicamenteparaIEcomoieonly.css:

table{bordercollapse:expression("separate",cellSpacing="5px");}

As, IEmostraruna tablaconespaciosanchosentre lasceldas.Slodebisacordarosdeconservar laconfiguracin de anchura adicional. Si actualizis vuestra hoja de estilo principal, tambin deberisactualizarieonly.css.Comoes lgico, loscomentarioscondicionalespermitenhacermuchascosasmsapartedeaplicarestilosalastablas,porquelahojadeestiloextrapuedeincluirtodoelCSSquenecesitisparaarreglarerroresdelIE.

33.2.8.Undiseosencillo

Lamayoradelosdiseosutilizancombinacionessencillasdefondo.Porlotanto,ahoraaplicaremosalosencabezamientosdelatablaunfondogrisycambiaremoselttulodemaneraqueseatextoblancosobrefondonegro:

table{width:100%;border:1pxsolid#000;}th,td{



width:25%;textalign:left;verticalalign:top;border:1pxsolid#000;bordercollapse:collapse;padding:0.3em;captionside:bottom;}caption{padding:0.3em;color:#fff;background:#000;}th{background:#eee;}

Estoquedacomoseveenlafigura12:

Figura12.Tablaconttulodetextoblancosobrefondonegroyfondogrisclaroenlasceldasdeencabezado

33.3.Variacioneshabituales

Enestesubapartadonoscentraremosenalgunosarquetiposdediseohabitualesqueverismuchasvecesenmuchastablasdelaweb.

33.3.1.Aplicarlneasdecebra

Algo que se suele pedir mucho en relacin con las tablas es crear filas de colores alternos. Se suelendenominar "lneas de cebra". Aunque existe cierta polmica sobre si las lneas de cebra ayudan o norealmenteallector,sonunestilomuypopular.Enlafigura13semuestraunejemplo:

Figura13.Tablacon"lneasdecebra",filasalternativasdecolorblancoogrisclaro

LamaneramsfcildeaplicarelefectodelaslneasdecebraesaadirunaclaseparaalternarfilasdelatablaydespusutilizarunselectordeCSScontextualparaaplicarestilosenlasceldasdeestasfilas.Antesquenada,seaadenlasclases"par"(odd)e"impar"(even)alasfilasdelatabla,as:



...

...

...

Podissaltaroslafiladelttuloporqueyatieneunestilopropio.Entoncesaadidunaclasecontextualparadefinirelfondodetodaslasceldasdelasfilasdelaclaseimpar(odd).

.oddth,.oddtd{background:#eee;}

staeslamaneramssencilladeaadirlneasdecebraaunatabladeHTMLquefuncioneentodoslosnavegadores,peronoesdeltodoperfectoporque,qusucedesidespusaadsunafilaalatabla?Puesquedeberaisdesplazartodoslosnombresdeclaseoddyevenparaquetodoquedarabien.

Haydosopcionesalternativas:

PodisaadirlasclasesmedianteJavaScriptnoobstrusivocomosedemuestraenAListApart:ZebraTables.LamayoradelosframeworksdeJavaScripttambintienenunmtodoadecuado:ZebraTableShowdowncomparatodaunagamadeimplementaciones.

Podisutilizarel selectordeCSS3:nthchild,peroanno lo reconocen todos losnavegadores.Detodosmodos,conelpasodeltiempoesoirmejorando.

Podis encontrar ms informacin sobre las lneas de cebra con nthchild en un apartado dedev.opera.com.

33.3.2.Parrillasincompletas

Algunosdiseosrespondenbienconparrilasdeaspectomsabiertoymenosestructurado.Unavariantemuysencillaconsisteeneliminarlosbordesverticalesydejarqueelfondolleneelttulo,comoenlafigura14:

Figura14.Tablaconbordesgrisclarosloporlosextremosypordebajodecadacelda

ElCSSparaconseguiresteefectoes:

table{width:100%;border:1pxsolid#999;textalign:left;bordercollapse:collapse;margin:001em0;captionside:top;}caption,td,th{padding:0.3em;}



th,td{borderbottom:1pxsolid#999;width:25%;}caption{fontweight:bold;fontstyle:italic;}

Tambinpodisirunpasomsallyeliminartodoslosbordesexceptoelbordesuperioreinferiorparadarunpocomsdedefinicinalatablacentral.Podisverlafigura15:

Figura15.Tablaconbordessloenlapartesuperioreinferiordelatablacentral

ElCSSparaconseguiresteefectoeselsiguiente:

table{width:100%;textalign:left;bordercollapse:collapse;margin:001em0;captionside:top;}caption,td,th{padding:0.3em;}tbody{bordertop:1pxsolid#000;borderbottom:1pxsolid#000;}tbodyth,tfootth{border:0;}th.name{width:25%;}th.location{width:20%;}th.lasteruption{width:30%;}th.eruptiontype{width:25%;}tfoot{textalign:center;color:#555;fontsize:0.8em;}



33.3.3.Parrillasinteriores

Puedequeenocasionesosintereseeliminarelbordeexteriorperoconservarlaparrillainteriordebordescomoenlafigura16:

Figura16.Tablaconundiseodeparrillainterior

Paraaplicaresteefectoatodoslosnavegadoresactuales,debisaadirunaclasealasceldasthytdqueaparecenenelltimolugardecadafila,as:

...

VolcanoNameLocationLastMajorEruptionTypeofEruption

...

Entonces utilizamos la clase para eliminar el borde derecho de estas celdas. El CSS completo es elsiguiente:

table{width:100%;textalign:left;bordercollapse:collapse;margin:001em0;captionside:top;}caption,td,th{padding:0.3em;}th,td{borderbottom:1pxsolid#000;borderright:1pxsolid#000;}th.last,td.last{borderright:0;}tfootth,tfoottd{borderbottom:0;textalign:center;}th{width:25%;}

Parrillasinteriorescon:lastchild

Cuandomejorelacompatibilidaddelosnavegadores,podremosutilizarelpseudoselector:lastchildparaconseguiresteefectosinclases.ElCSSsera:



table{width:100%;textalign:left;bordercollapse:collapse;margin:001em0;captionside:top;}caption,td,th{padding:0.3em;}th,td{borderbottom:1pxsolid#000;borderright:1pxsolid#000;}th:lastchild,td:lastchild{borderright:0;}th{width:25%;}

Esto ya funciona actualmente en las ltimas versiones de todos los navegadores (el ltimo navegadorsignificativoquenolosoportaeslaversin8deIE).

Preguntasderepaso

Preguntasalasquedeberaispoderresponder:

1. Cmosecontrolaelespacioentrelatablaylosbordesdelasceldas?

2. Qusucedecuandotable(tabla)tieneuncolordefondo,lasceldasthytdtienenotrocolordefondoybordercollapse(superposicindebordes)estestablecidoencollapse(superposicin)?

3. Cmopuedenestablecerseanchosdiferentesparacadacolumna?

Lecturascomplementarias

W3C:CSS2Tables,sobretodoelapartadoquehablasobrelascapasdefondodetabladeCSS2.

"ADaoofWebDesignletthewebbetheweb".AListApart.Unartculoclsicoqueexplicaporquunadiferenciade1pxelentrenavegadoresnoesrealmenteimportante.

"ZebraTables"y"Zebrastriping:DoesitReallyHelp?".En:AListApart.

"ZebrastripingtableswithCSS3"

"SupportingIEwithconditionalcomments"

"ACSSstyledtable"y"ACSSstyledcalendar".En:Veerle'sblog

"CSSTableGallery"muestraunaseriedediseosparatablas(aunquehayquetenerencuentaquemuchasnocumplenlasrecomendacionesdecontrastedecolordelW3C).

LoscontenidosrecogidosenesteartculoestnsujetosaunalicenciaCreativeCommonsReconocimiento,NocomercialCompartirbajolamismalicencia3.0Noadaptada.

: :

css - estilos de las tablas.pdf

Documents