Estilos CSS en filas pares e impares de una tabla HTML

Home/CSS, How to..., HTML/Estilos CSS en filas pares e impares de una tabla HTML

Usando las tablas

Hace ya tiempo que las tablas no se usan para maquetar un sitio web, dejando a los divs y el CSS la tarea de realizar la maquetación del sitio. Esto no significa que debamos dejar de usar las tablas. Como todo son útiles si son usadas como lo que son: tablas.

Una vez que hemos dejado de usar las tablas “para todo”, podemos empezar a usarlas para lo que fueron ideadas. Presentar datos de forma tabulada: listados de productos y precios, clasificaciones deportivas… multitud de datos susceptibles de ser organizados en una serie de filas y columnas.

Sin embargo, como toda etiqueta HTML, necesita que la dejemos “bonita” por medio de CSS.

Empezando con las tablas

Una tabla esta compuesta de varias etiquetas anidadas:

  • table: define la tabla como tal, y envuelve el resto de etiquetas de la tabla.
  • tr: define cada linea de la tabla y esta dividida a su vez en celdas, que formarán las columnas.
  • td: define cada una de las celdas de la tabla.

Estas son las etiquetas básicas, existen más etiquetas que nos podrán ayudar a definir la estructura de la tabla (thead, tfoot, tbody, th…) pero no son necesarias para este ejemplo sencillo.

Una vez conocidas estas etiquetas, veremos como quedaría el código de una tabla sencilla:

Con esto crearíamos una tabla sin ningún tipo de borde, con todas las propiedades por defecto. A partir de aquí podemos jugar con los distintos estilos para ir asignando bordes a las celdas, filas y a la tabla, colores de fondo, fuentes… podemos aplicar el estilo que queramos por CSS. Una de las primeras cosas que me gusta hacer, es quitar el espaciado de las celdas, como explico en esta otra entrada: Eliminar Cellpadding y Cellspacing de las tablas HTML con CSS.

Aplicando distintos estilos a filas pares e impares

Uno de los estilos que más habitualmente se aplican a las tablas, sobre todo si estás no tienen bordes, es darles un color de fondo distinto a las filas pares y a las impares. Habitualmente se puede hacer asignando distintas clases cuando generas la tabla, con lo que quedaría así:

De esa forma podríamos definir el color de fondo en las clases CSS tr.par y tr.impar. Sin embargo, usando este método, debemos comprobar si la fila es par o impar a la hora de generar la tabla, y asignar la clase. Aunque no cuesta mucho hacerlo, es más sencillo hacerlo directamente desde CSS.

Además, asignando distintas clases, si luego mediante JavaScript eliminamos una o varias filas de la tabla, habría que modificar las clases del resto de filas para que quedasen como queremos.

Es por eso, que podemos utilizar el siguiente selector en CSS: :nth-child(n). Este selector aplica el estilo a cada elemento n que encuentre. Este parámetro n puede ser:

  • Un simple número :nth-child(2), con lo que se aplicaría a ese elemento solamente.
  • Una función :nth-child(3n+1), con lo que se aplicaría cada n elementos, empezando (en este caso) en el 1.
  • O si el indicie es par o impar :nth-child(odd) o:nth-child(even), que aplicaría el estilo a los elementos pares o impares.

En el caso que tratamos, nos interesa la ultima forma de indicar n. Con la que podemos indicar un color de fondo a las filas pares, y otro distinto para las impares. El código sería el siguiente:

CSS

HTML

Con este código de ejemplo, conseguiremos una tabla en la que una fila sea negra con el texto blanco, y la siguiente blanca con el texto negro. A partir de aquí solo queda empezar a “jugar” con esta nueva propiedad, y con poco esfuerzo conseguiremos tablas mucho más atractivas para los usuarios.
By | 2017-06-28T14:03:31+00:00 12 de Septiembre de 2012|CSS, How to..., HTML|7 Comments

About the Author:

Programador web [PHP · MySQL · Javascript · AJAX]

7 Comments

  1. juan boris 19 Enero, 2013 at 6:12 - Reply

    compañero y la demo ??? .. la tabla que indicas quedaría como la de aquí …
    http://www.ideaschile.cl/tecnologia/3.php saludos desde chile

  2. Heimys 8 Mayo, 2014 at 23:03 - Reply

    Excelente aporte, muchas gracias… Funciono a la perfección…

  3. Gilbestia 8 Abril, 2015 at 7:02 - Reply

    Excelente muy buen tips, me facilito el trabajo grandemente, (Y)

  4. David 10 Agosto, 2015 at 3:43 - Reply

    Huy que bueno, de hecho tenia un libro, pero me dio flojera y busque en internet. era para http://cuandosejuntan.blogspot.com y ya esta

    • Alfredo Peña Alonso 21 Noviembre, 2015 at 0:25 - Reply

      Me alegró que te haya ayudado David! Yo también uso internet como primera fuente de documentación.

      Un saludo!

Deja un comentario

Más en CSS, How to..., HTML
HTML Code
Eliminar Cellpadding y Cellspacing de las tablas HTML con CSS

Veremos como eliminar el cellspacing y cellpadding de las tablas HTML mediante CSS. También veremos como editar estos dos atributos...

Cerrar