{"id":270,"date":"2010-11-04T10:24:49","date_gmt":"2010-11-04T08:24:49","guid":{"rendered":"https:\/\/blogs.ua.es\/pi\/?p=270"},"modified":"2010-11-04T10:26:24","modified_gmt":"2010-11-04T08:26:24","slug":"tablas-con-estilo-cebra","status":"publish","type":"post","link":"https:\/\/blogs.ua.es\/pi\/2010\/11\/04\/tablas-con-estilo-cebra\/","title":{"rendered":"Tablas con estilo cebra"},"content":{"rendered":"<p>Una <strong>tabla con estilo cebra<\/strong> es una tabla en la que se va alternando el color de fondo de las filas en funci\u00f3n de su posici\u00f3n. Normalmente se emplea una alternancia par\/impar, aunque tambi\u00e9n se podr\u00eda realizar en base a otra numeraci\u00f3n:<\/p>\n<p><a href=\"https:\/\/blogs.ua.es\/pi\/files\/2010\/11\/example1.gif\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blogs.ua.es\/pi\/files\/2010\/11\/example1-300x172.gif\" alt=\"\" width=\"300\" height=\"172\" class=\"aligncenter size-medium wp-image-271\" srcset=\"https:\/\/blogs.ua.es\/pi\/files\/2010\/11\/example1-300x172.gif 300w, https:\/\/blogs.ua.es\/pi\/files\/2010\/11\/example1.gif 348w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>En el art\u00edculo <a href=\"http:\/\/www.alistapart.com\/articles\/zebratables\/\">Zebra Tables<\/a> y en su mejora <a href=\"http:\/\/www.validweb.nl\/articles\/better-zebra-tables\/\">Better Zebra Tables<\/a> se explican varias formas cl\u00e1sicas de lograrlo, mediante una combinaci\u00f3n de CSS y JavaScript. Sin embargo, estas soluciones son un poco laboriosas y dependientes de la programaci\u00f3n.<\/p>\n<p>Desde hace bastantes a\u00f1os (podemos verlo en el art\u00edculo <a href=\"http:\/\/www.w3.org\/Style\/Examples\/007\/evenodd.html\">CSS: Even and odd rules<\/a>) existe el selector <strong>nth-child()<\/strong> (<a href=\"http:\/\/www.w3.org\/TR\/css3-selectors\/#nth-child-pseudo\">W3C Selectors Level 3 6.6.5.2. :nth-child() pseudo-class<\/a>) que permite lograr ese efecto con s\u00f3lo utilizar CSS. Sin embargo, no es hasta hace poco que se puede usar con seguridad, ya que funciona en casi todos los navegadores (en Internet Explorer no, pero en el art\u00edculo <a href=\"http:\/\/css-tricks.com\/how-nth-child-works\/\">How nth-child Works<\/a> se explica c\u00f3mo solucionarlo).<\/p>\n<p>Un ejemplo sencillo de uso de este selector es:<\/p>\n<p><code>tr:nth-child(even) {background: #CCC}<br \/>\ntr:nth-child(odd) {background: #FFF}<\/code><\/p>\n<p>Y para terminar, <a href=\"http:\/\/www.smashingmagazine.com\/2006\/12\/29\/css-based-tables-modern-solutions\/\">CSS-Based Tables: Modern Solutions<\/a> ofrece 30 ejemplos de tablas dise\u00f1adas con CSS.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Una tabla con estilo cebra es una tabla en la que se va alternando el color de fondo de las filas en funci\u00f3n de su posici\u00f3n. Normalmente se emplea una alternancia par\/impar, aunque tambi\u00e9n se podr\u00eda realizar en base a &hellip;<\/p>\n<p class=\"read-more\"> <a class=\"more-link\" href=\"https:\/\/blogs.ua.es\/pi\/2010\/11\/04\/tablas-con-estilo-cebra\/\"> <span class=\"screen-reader-text\">Tablas con estilo cebra<\/span> Leer M\u00e1s  &raquo;<\/a><\/p>\n","protected":false},"author":40,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-270","post","type-post","status-publish","format-standard","hentry","category-general"],"_links":{"self":[{"href":"https:\/\/blogs.ua.es\/pi\/wp-json\/wp\/v2\/posts\/270","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.ua.es\/pi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.ua.es\/pi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.ua.es\/pi\/wp-json\/wp\/v2\/users\/40"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.ua.es\/pi\/wp-json\/wp\/v2\/comments?post=270"}],"version-history":[{"count":2,"href":"https:\/\/blogs.ua.es\/pi\/wp-json\/wp\/v2\/posts\/270\/revisions"}],"predecessor-version":[{"id":273,"href":"https:\/\/blogs.ua.es\/pi\/wp-json\/wp\/v2\/posts\/270\/revisions\/273"}],"wp:attachment":[{"href":"https:\/\/blogs.ua.es\/pi\/wp-json\/wp\/v2\/media?parent=270"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.ua.es\/pi\/wp-json\/wp\/v2\/categories?post=270"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.ua.es\/pi\/wp-json\/wp\/v2\/tags?post=270"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}