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
8/6/2015 CSSEstilosdelastablas
http://mosaic.uoc.edu/ac/le/es/m6/ud7/index.html 2/14
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):
8/6/2015 CSSEstilosdelastablas
http://mosaic.uoc.edu/ac/le/es/m6/ud7/index.html 3/14
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):
8/6/2015 CSSEstilosdelastablas
http://mosaic.uoc.edu/ac/le/es/m6/ud7/index.html 4/14
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;}
8/6/2015 CSSEstilosdelastablas
http://mosaic.uoc.edu/ac/le/es/m6/ud7/index.html 5/14
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;}
8/6/2015 CSSEstilosdelastablas
http://mosaic.uoc.edu/ac/le/es/m6/ud7/index.html 6/14
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:
8/6/2015 CSSEstilosdelastablas
http://mosaic.uoc.edu/ac/le/es/m6/ud7/index.html 7/14
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:
8/6/2015 CSSEstilosdelastablas
http://mosaic.uoc.edu/ac/le/es/m6/ud7/index.html 8/14
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
8/6/2015 CSSEstilosdelastablas
http://mosaic.uoc.edu/ac/le/es/m6/ud7/index.html 9/14
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{
8/6/2015 CSSEstilosdelastablas
http://mosaic.uoc.edu/ac/le/es/m6/ud7/index.html 10/14
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:
8/6/2015 CSSEstilosdelastablas
http://mosaic.uoc.edu/ac/le/es/m6/ud7/index.html 11/14
...
...
...
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;}
8/6/2015 CSSEstilosdelastablas
http://mosaic.uoc.edu/ac/le/es/m6/ud7/index.html 12/14
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;}
8/6/2015 CSSEstilosdelastablas
http://mosaic.uoc.edu/ac/le/es/m6/ud7/index.html 13/14
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:
8/6/2015 CSSEstilosdelastablas
http://mosaic.uoc.edu/ac/le/es/m6/ud7/index.html 14/14
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.
: :
Top Related