8/6/2015

CSSEstilosdelastablas

CSS
Estilosdelastablas

Accesibilidad:

33.Estilosdelastablas
BenBuchanan.26deseptiembredel2008Publicadoen:fondo,cebra,error,bordes,alinear

Enocasiones,parecequeenelmundoactualdeldesarrolloweblastablasestnalgomarginadas.Sehace
tantocasoalanormade"noutilicistablas!"queaveceslagenteseolvidadequeenrealidadlafrasees:
"Noutilicistablasparalacomposicin".Lastablasvanmuybienparasuobjetivooriginal,queesmostrar
datostabulares.Porelloestilsabercmoaplicarlesestiloscorrectamente.
EstaguasecentraencmoaplicarCSSdemaneraeficazparaobtenerestilosdetablasdedatosclarosy
legibles.Adems,tambinhablaremosdealgunosrequisitoshabitualesdeldiseodetablas.
Nota
Puedequeosresultetildescargaroslosejemplosdecdigoparalastablasquese
muestran en este apartado desde el archivo "tableexamples.zip", de manera que
podisirsiguiendoelapartado.
Descargadlosejemplosen:"tableexamples.zip"

Loscontenidosdeesteapartadosonlossiguientes:
33.1.Estructuradelastablas
33.2.Conceptosbsicos
33.2.1.Anchuradetablaydecelda
33.2.2.Alineacindeltexto
33.2.3.Bordes
33.2.4.Relleno
33.2.5.Colocacindelcaption
33.2.6.Fondo
33.2.7.ArreglarelIEconestiloscondicionales
33.2.8.Undiseosencillo
33.3.Variacioneshabituales
33.3.1.Aplicarlneasdecebra
33.3.2.Parrillasincompletas
33.3.3.Parrillasinteriores
Parrillasinteriorescon:lastchild
Resumen
Preguntasderepaso
Lecturascomplementarias

33.1.Estructuradelastablas
Antes de centrarnos en el CSS, fijmonos en los elementos estructurales bsicos de las tablas a las que
deberisaplicarestilos:
Encabezamientosdelastablas.
Celdasdedatosdelastablas.
Ttulosdelastablas.
Cuando los usuarios de vuestro sitio lean vuestra tabla, deberan poder entender y seguir fcilmente su
estructura.Lamaneramssencilladeconseguirloesutilizarbordes,coloresdefondooambos.
No es necesario que sigis estas convenciones estilsticas, pero s deberais garantizar que existe una
diferenciaclaraentrelasceldas thy tdadems,el caption(ttulo)deberaestarasociadoclaramentecon
http://mosaic.uoc.edu/ac/le/es/m6/ud7/index.html

1/14

8/6/2015

CSSEstilosdelastablas

latablaydiferenciadodelrestodeltextodelapgina.

33.2.Conceptosbsicos
Fijaosencmoserepresentaestatablasinestilo:
RecentMajorVolcanicEruptionsinthePacificNorthwest
VolcanoName
Location
LastMajorEruption
TypeofEruption
California
191417
ExplosiveEruption
Mt.Lassen
Oregon
1790s
PyroclasticflowsandMudflows
Mt.Hood
Washington
1980
ExplosiveEruption
Mt.St.Helens
Compiledin2008byMsJen
Vedtambin
Podisverelmismoejemploenelapartado19delmdulo"EltextocentraldeHTML".

Losdatossoncomprensibles,perohayqueesforzarseunpocoparavercmovatodo.Aadmosleunos
estilosparahacerqueseamsfcildeleer.
33.2.1.Anchuradetablaydecelda
La primera decisin que hay que tomar es qu anchura debe tener la tabla. La opcin por defecto del
navegador es la misma que establecer table {width: auto; }, que da como resultado que la tabla se
extiendaaloanchodelcontenido.Esto,engeneral,quedadesordenado.
Pongamos por caso que nuestra tabla debe ir en una columna de contenido de 600 pxeles de anchura.
Especificamos que la tabla se ample hasta el 100% de la anchura disponible para aprovechar mejor el
espacio.Comohaycuatrocolumnas,establezcamostambinlaanchuradelasceldasdetablaenun25%
cadauna.
table{
width:100%;
}
th,td{
width:25%;
}

Dehecho,podislimitarosaestablecerlaanchuraparathyestodefinirlaanchuradetodaslascolumnas
aunas,siemprevabienserriguroso.Esteestilotansencillodarelresultadoqueseveenlafigura1:

Figura1.Latabladeejemploconunaconfiguracinsencilladeanchura

Ahora las celdas quedan con una anchura igualada. Ms adelante ya veremos cmo especificar anchos
desiguales,perodemomentoseguimosconelsiguientepaso.
33.2.2.Alineacindeltexto
Latablaanesunpococonfusadeleer,demaneraquevamosaespecificarquelaalineacindeltextosea
un poco ms clara. La norma adicional que se muestra a continuacin alinear a la izquierda los
encabezamientosparaqueencajenconelcontenido(pordefecto,losnavegadorescentranlosttulosdelas
tablas):
http://mosaic.uoc.edu/ac/le/es/m6/ud7/index.html

2/14

8/6/2015

CSSEstilosdelastablas

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

Asseclarificaunpocolatabla,comosepuedeverenlafigura2:

Figura2.Tablaconalineacinalaizquierda

Ahoramismo,todaslasceldasestnalineadasverticalmenteenelcentro.Siloprefers,podisdefinirque
el texto se alinee en la parte superior o inferior de la celda, o cualquier posicin de verticalalign que
queris.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 "Last Major Eruption"
quedaendoslneas.
33.2.3.Bordes
La tabla ya queda un poco mejor, pero an cuesta un poco leer cada lnea. Ahora aplicaremos algunos
bordesparahacerquetodoseamsfcildeleer.Debisestablecerlosbordesdemaneraindependiente
paracadapartedelatablaydespusdecidircmosedeberancombinar.
Paramostrarosdndequedarnlosbordes,lafigura4muestradiferentesbordespara table(solidblack,
negroslido), caption(solidgrey,grisslido), th(dashedblue, lnea discontinua azul) y td(dotted red,
lneadepuntosroja):

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

3/14

8/6/2015

CSSEstilosdelastablas

Figura4.Muestradelosdiferentesbordesenunatabla

Fijaosencmoelbordedela tablerecorreelcontornoexteriordetodaslasceldasdeencabezamientoy
dedatosydespuspasaentrelasceldasyelttulodelatabla.Tambinpodisverque,pordefecto,los
bordesthytdsedistancianunpocoelunodelotro.
Pasemos ahora a otro estilo de tabla. Podis crear un borde negro sencillo para la tabla y las celdas
mediantelapropiedadborder(borde).Estosehaceconlasreglassiguientes:
table{
width:100%;
border:1pxsolid#000;
}
th,td{
width:25%;
textalign:left;
verticalalign:top;
border:1pxsolid#000;
}

ydacomoresultadoloquesemuestraenlafigura4b:

Figura4b.Tablaconbordesnegrossencillos

Estoprovocaquelasfilasseanmsfcilesdeleer,peropuedequenoosgusteelespacioquequedaentre
lasceldas.Haydosmanerasdecambiarlo.
Primero,podislimitarosacerrarloshuecosutilizandolapropiedadborderspacing(espaciadodebordes),
porejemploas:
table{
width:100%;
border:1pxsolid#000;
}
th,td{
width:25%;
textalign:left;
verticalalign:top;
border:1pxsolid#000;
borderspacing:0;
}

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

4/14

8/6/2015

CSSEstilosdelastablas

Deestamanera,losbordessetocarnenlugardequedarseparados.Assecambiaelbordede1pxelpor
unbordede2pxeles,comoseveenlafigura5:

Figura5.Tablasinespaciadoentrebordesqueproduceunefectodebordede2
pxeles.

Tambinpodisaumentarelespacioentrelasceldasutilizando borderspacing,aunquehayqueteneren
cuentaqueestapropiedadnofuncionaconInternetExplorer.
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)definidopara
superponerseyasreducirelbordeen1pxel

Cuando definis que los bordes se superpongan, debis tener en cuenta que esto os puede causar
problemas si tenis estilos de bordes diferentes aplicados a celdas adyacentes. Cuando los estilos de
bordes diferentes se superponen unos sobre otros, entrarn en "conflicto" entre ellos. Esto se soluciona
mediantelasreglasderesolucindeconflictosdebordesdetabladelaespecificacindeCSS2delW3C,
quedeterminanquestilo"gana"cuandosesuperponen.
33.2.4.Relleno
Ahoraqueyahabisaplicadobordesenlasceldas,puedequequerisaadirunpocodeespacioenblanco
alasceldasdelttuloydelatabla.Parahacerlo,slodebisutilizarelpadding(relleno).
table{
width:100%;
border:1pxsolid#000;
}
http://mosaic.uoc.edu/ac/le/es/m6/ud7/index.html

5/14

8/6/2015

CSSEstilosdelastablas

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,puedequequeris
moverloaotrolugar.Pordesgracia,enIEnosepuedehacerhastalaversin8,peroentodoslosdems
navegadores podis cambiar la posicin del caption utilizando la propiedad captionside(ladodelttulo).
Las opciones posibles son: top (superior), bottom (inferior), left (izquierda) y right (derecha). Ahora lo
pondremosenlaparteinferior:
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:

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

6/14

8/6/2015

CSSEstilosdelastablas

Figura8.Tablaconelcaptionmovidoalaparteinferior

Paraelrestodeejemplos,dejaremoselcaptionenlapartesuperior.
33.2.6.Fondo
Otra manera muy sencilla de aplicar estilos a las tablas es aadir colores e imgenes de fondo. Esto se
hace con la propiedad background (fondo), aunque debis tener presente que las diferentes partes de la
tablaactuarncomo"capas"unaencimadelaotra.LaespecificacinCSS2explicalosefectosdecapasde
fondobastantedetalladamente,peroenpocaspalabras:losfondossetaparnlosunosalosotroseneste
orden:
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,elfondodelacelda
tapar el fondo de la tabla. Si habis establecido los bordes en collapse (superposicin), el fondo de la
tabla no se ver. No obstante, si habis establecido bordercollapseen separate, el fondo de la tabla se
verentrelosbordes.
Nota
Fijaosenqueelconceptodeelementosdiferentesunoencimadelotroenlapgina
es controlable podis controlar a qu altura de la "pila" queda un elemento en
relacinconlosdemscambiandosupropiedadzindex.
Vedtambin
Enelapartado37deestemduloaprenderismscosassobrezindex.

Imaginaosquedefinslatablademaneraquetengaunfondorojoylasceldasconfondoblanco.Entrela
separacindelasceldasseveelrojo,perolasceldassiguensiendoblancas,comosemuestraenlafigura
9:

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

7/14

8/6/2015

CSSEstilosdelastablas
Figura9.Tablaquedemuestracmoelelementodefondodetablarojoseveentre
losfondosblancosdelasceldas.

Tambinpodisutilizarunaimagendefondo.Porejemplo,siqueristenerunagradacinqueseveaentre
lasceldas,podraisdefinirthytdconfondosblancos,peroestablecerelfondode tableconunagradacin
decolores:
table{
bordercollapse:separate;
borderspacing:5px;
background:#000url("gradient.gif")bottomleftrepeatx;
color:#fff;
}
td,th{
background:#fff;
color:#000;
}

Fijaosenqueelcolordefondoseestableceennegro,quellenaelespacioenlapartesuperiordondeacaba
lagradacincromtica(siempredebistenerencuentaquelatablapuedesermsaltaquelaimagende
fondo). El color de delante del todo se establece en blanco por si en algn momento estos colores por
defecto se ven a travs del contenido de las celdas. En general, los estilos de las celdas cancelarn la
configuracindelcolordeltextodelestilode table{},perosiempresedeberandefinircoloresdefondoy
deprimerplanoquehagancontraste.
Estosestiloscreanunatablaquequedaracomoenlafigura10enlamayoradelosnavegadores.

Figura10.Tablaconunaimagendefondocongradacindecoloresqueseve
entrelasceldas

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

Figura11.Lasversionesanterioresala8deIEproporcionanmenosespacioentre
bordes.

Dependiendo de las circunstancias, puede que os conformis con esta diferencia de representacin entre
navegadores.Pero,lgicamente,esonosiempreesposible,porejemplocuandounclienteespecificaque
http://mosaic.uoc.edu/ac/le/es/m6/ud7/index.html

8/14

8/6/2015

CSSEstilosdelastablas

quierequeundiseoquedeexactamenteigualentodoslosnavegadores.
33.2.7.ArreglarelIEconestiloscondicionales
Existe una manera de solucionar los problemas de IE que hemos mencionado antes. Hay que hurgar un
pocoyrequiereunahojadeestiloextra,perofunciona.Podisutilizarunaexpressionparahacerelespacio
ms ancho y despus cargar esta expresin mediante comentarios condicionales. La sintaxis de la
expresinessta:
table{
bordercollapse:expression("separate",cellSpacing="5px");
}

Este CSS slo sirve para IE, de manera que slo ste lo debe poder aplicar. La expresin tambin
invalidarlahojadeestilo,demaneraquelosdesarrolladoresprefierenaislarlasmanipulacionesdeIEen
unahojadeestiloapartequeslocargueIE.
Para hacerlo, cread una hoja de estilo nuevo que se llame ieonly.css ("slo IE") y enlazadla dentro de
comentarioscondicionales:
<![iflteIE7]><linkrel="stylesheet"media="screen"href="ieonly.css"/>
<![endif]>

Fijaosenque[iflteIE7]significa"simenosqueoigualalaversin7deIE".EstorevelaelcdigoenIE
7 y en todas las versiones anteriores de IE, pero el comentario de HTML que lo rodea oculta el cdigo a
todoslosdemsnavegadores.PodisajustarloacualquierversindeIEquenecesitis,porejemplo,sise
tratadelaversinIE6yanteriores,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, IE mostrar una tabla con espacios anchos entre las celdas. Slo debis acordaros de conservar la
configuracin de anchura adicional. Si actualizis vuestra hoja de estilo principal, tambin deberis
actualizar ieonly.css. Como es lgico, los comentarios condicionales permiten hacer muchas cosas ms
apartedeaplicarestilosalastablas,porquelahojadeestiloextrapuedeincluirtodoelCSSquenecesitis
paraarreglarerroresdelIE.
33.2.8.Undiseosencillo
Lamayoradelosdiseosutilizancombinacionessencillasdefondo.Porlotanto,ahoraaplicaremosalos
encabezamientosdelatablaunfondogrisycambiaremoselttulodemaneraqueseatextoblancosobre
fondonegro:
table{
width:100%;
border:1pxsolid#000;
}
th,td{
http://mosaic.uoc.edu/ac/le/es/m6/ud7/index.html

9/14

8/6/2015

CSSEstilosdelastablas

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.Tablaconttulodetextoblancosobrefondonegroyfondogrisclaroen
lasceldasdeencabezado

33.3.Variacioneshabituales
Enestesubapartadonoscentraremosenalgunosarquetiposdediseohabitualesqueverismuchasveces
enmuchastablasdelaweb.
33.3.1.Aplicarlneasdecebra
Algo que se suele pedir mucho en relacin con las tablas es crear filas de colores alternos. Se suelen
denominar "lneas de cebra". Aunque existe cierta polmica sobre si las lneas de cebra ayudan o no
realmenteallector,sonunestilomuypopular.Enlafigura13semuestraunejemplo:

Figura13.Tablacon"lneasdecebra",filasalternativasdecolorblancoogrisclaro

Lamaneramsfcildeaplicarelefectodelaslneasdecebraesaadirunaclaseparaalternarfilasdela
tablaydespusutilizarunselectordeCSScontextualparaaplicarestilosenlasceldasdeestasfilas.Antes
quenada,seaadenlasclases"par"(odd)e"impar"(even)alasfilasdelatabla,as:
http://mosaic.uoc.edu/ac/le/es/m6/ud7/index.html

10/14

8/6/2015

CSSEstilosdelastablas

...
<trclass="odd">
...
<trclass="even">
...

Podissaltaroslafiladelttuloporqueyatieneunestilopropio.Entoncesaadidunaclasecontextualpara
definirelfondodetodaslasceldasdelasfilasdelaclaseimpar(odd).
.oddth,.oddtd{
background:#eee;
}

staeslamaneramssencilladeaadirlneasdecebraaunatabladeHTMLquefuncioneentodoslos
navegadores,peronoesdeltodoperfectoporque,qusucedesidespusaadsunafilaalatabla?Pues
quedeberaisdesplazartodoslosnombresdeclaseoddyevenparaquetodoquedarabien.
Haydosopcionesalternativas:
PodisaadirlasclasesmedianteJavaScriptnoobstrusivocomosedemuestraenAListApart:Zebra
Tables.LamayoradelosframeworksdeJavaScripttambintienenunmtodoadecuado:ZebraTable
Showdowncomparatodaunagamadeimplementaciones.
Podis utilizar el selector de CSS3 :nthchild, pero an no lo reconocen todos los navegadores. De
todosmodos,conelpasodeltiempoesoirmejorando.
Podis encontrar ms informacin sobre las lneas de cebra con nthchild en un apartado de
dev.opera.com.
33.3.2.Parrillasincompletas
Algunosdiseosrespondenbienconparrilasdeaspectomsabiertoymenosestructurado.Unavariante
muysencillaconsisteeneliminarlosbordesverticalesydejarqueelfondolleneelttulo,comoenlafigura
14:

Figura14.Tablaconbordesgrisclarosloporlosextremosypordebajodecada
celda

ElCSSparaconseguiresteefectoes:
table{
width:100%;
border:1pxsolid#999;
textalign:left;
bordercollapse:collapse;
margin:001em0;
captionside:top;
}
caption,td,th{
padding:0.3em;
}
http://mosaic.uoc.edu/ac/le/es/m6/ud7/index.html

11/14

8/6/2015

CSSEstilosdelastablas

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

Tambinpodisirunpasomsallyeliminartodoslosbordesexceptoelbordesuperioreinferiorparadar
unpocomsdedefinicinalatablacentral.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;
}

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

12/14

8/6/2015

CSSEstilosdelastablas

33.3.3.Parrillasinteriores
Puedequeenocasionesosintereseeliminarelbordeexteriorperoconservarlaparrillainteriordebordes
comoenlafigura16:

Figura16.Tablaconundiseodeparrillainterior

Paraaplicaresteefectoatodoslosnavegadoresactuales,debisaadirunaclasealasceldas thy tdque

aparecenenelltimolugardecadafila,as:
...
<tr>
<thscope="col">VolcanoName</th>
<thscope="col">Location</th>
<thscope="col">LastMajorEruption</th>
<thscope="col"class="last">TypeofEruption</th>
</tr>
...

Entonces utilizamos la clase para eliminar el borde derecho de estas celdas. El CSS completo es el
siguiente:
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 :lastchildpara
conseguiresteefectosinclases.ElCSSsera:
http://mosaic.uoc.edu/ac/le/es/m6/ud7/index.html

13/14

8/6/2015

CSSEstilosdelastablas

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 navegador
significativoquenolosoportaeslaversin8deIE).

Preguntasderepaso
Preguntasalasquedeberaispoderresponder:
1. Cmosecontrolaelespacioentrelatablaylosbordesdelasceldas?
2. Qusucedecuandotable(tabla)tieneuncolordefondo,lasceldasthytdtienenotrocolordefondo
ybordercollapse(superposicindebordes)estestablecidoencollapse(superposicin)?
3. Cmopuedenestablecerseanchosdiferentesparacadacolumna?

Lecturascomplementarias
W3C:CSS2Tables,sobretodoelapartadoquehablasobrelascapasdefondodetabladeCSS2.
"ADaoofWebDesignletthewebbetheweb".AListApart.Unartculoclsicoqueexplicaporqu
unadiferenciade1pxelentrenavegadoresnoesrealmenteimportante.
"ZebraTables"y"Zebrastriping:DoesitReallyHelp?".En:AListApart.
"ZebrastripingtableswithCSS3"
"SupportingIEwithconditionalcomments"
"ACSSstyledtable"y"ACSSstyledcalendar".En:Veerle'sblog
"CSSTableGallery"muestraunaseriedediseosparatablas(aunquehayquetenerencuentaque
muchasnocumplenlasrecomendacionesdecontrastedecolordelW3C).

LoscontenidosrecogidosenesteartculoestnsujetosaunalicenciaCreativeCommons
Reconocimiento,NocomercialCompartirbajolamismalicencia3.0Noadaptada.

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

14/14