Color de fila alternativa de tabla CSS

Podemos colorear las filas alternativas para que nuestra tabla sea más fácil de usar y permitir que el usuario reduzca rápidamente los datos. Podemos usar la propiedad CSS para modificar el color de las filas alternativas para atraer la atención del usuario hacia ellos. Se utiliza un selector de estilo en CSS para cambiar las filas alternativas. Usando el selector de estilo CSS, puede modificar fácilmente el color de las filas alternativas. El selector nth-child () en CSS toma un parámetro uniforme o impar y luego cambia el color utilizando la propiedad de color de fondo dentro de este selector de estilo. En este tutorial, modificaremos el color de las filas pares y extrañas de varias maneras.

Sintaxis:

Ejemplo 1:

Cree un archivo HTML para crear tablas con filas y columnas. Use el selector de estilo CSS para cambiar el color de las filas alternativas. El código de Visual Studio es el software que utilizamos para ejecutar estos ejemplos. Como resultado, debemos crear un archivo HTML e ingresar el código HTML para hacer la tabla. El código HTML para construir la tabla se puede ver aquí, y el archivo debe guardar con el ".extensión HTML ”.

Aquí, creamos una tabla y llenamos sus filas y columnas con datos. El ""Se usa para definir las células de encabezado de la tabla, la""Se usa para definir las filas de la tabla y el""Se usa para crear la celda de datos en filas. Entonces, dentro del ""Etiqueta, agregamos los datos a estas celdas y estas""Las etiquetas están dentro del""Etiqueta, que representa una fila. Pueblamos todas las filas con los datos. Después de generar esta tabla simple, necesitamos diseñarla y modificar el color de las filas alternativas utilizando el selector de estilo.

El código dado se usa para colorear las filas alternativas de la tabla que generamos. Debido a que es nuestro archivo CSS en el que utilizamos el selector de estilo CSS para cambiar el color alternativo de las filas, se guarda con el ".Extensión del archivo de CSS ". Utilizamos la propiedad de "colapso del borde" para diseñar primero la tabla, que controla si el borde de la tabla se derrumba en un solo borde o si está dividido. Lo configuramos para "colapsar" en este caso. Como resultado de la utilización, ahora tenemos un solo borde de tabla. El ancho de esta tabla está establecido en "100 por ciento."

Luego, están "th" y "td" que representan el encabezado y las células simples, respectivamente. Ahora, diseñe estos aplicando la propiedad "Alineación de texto" que alinea el texto dentro de las celdas con la "izquierda" a medida que lo establecemos. También establecemos su "relleno" en "8px". Después de esto, para cambiar el color de las filas alternativas, utilizamos el selector de estilo CSS que damos a la propiedad ": nth-child" ". Por lo tanto, el color de las filas uniformes cambia. La propiedad de "color de fondo" se utiliza aquí para cambiar el color de la fila uniforme a "gris claro" y el código para este color es "#f2f2f2".

Al presionar el "Alt+B" dentro del archivo HTML que preparamos anteriormente, la salida se muestra en la pantalla. Las filas incluso aparecen en un color diferente, ya que aplicamos el selector de estilo a las filas incluso de la mesa.

Ejemplo #2:

En este ejemplo, modificamos el color de las filas extrañas de la tabla anterior que construimos en el primer ejemplo. No cambiamos la tabla; Simplemente cambiamos el color de la fila de las filas extrañas aquí. El ancho de la mesa es "100 por ciento."Entonces, tenemos el" th "y" td ". Establecimos el "Alineado de texto" en "Izquierda."El texto dentro de las celdas de la tabla se coloca en el lado izquierdo de la celda. El "relleno" crea un espacio entre el borde de la tabla y los datos que se escriben dentro de las celdas de la tabla.

Entonces, este "relleno" está configurado en "10px". Se utiliza para crear un búfer "10px" entre el contenido de la tabla y el borde. Ahora ajustamos el color de las filas "extrañas" de la mesa. Entonces, usamos la propiedad "nth-child ()" aquí. El color de las filas uniformes cambia si se lo damos a la propiedad ": nth-child". Aquí, la propiedad de "color de fondo" se utiliza para cambiar el color de la fila uniforme a "gris claro" usando el código de color "#F2F2F2."

Puede ver que el color de las filas impares cambia en esta salida porque se cambia el color de las filas alternativas "impares". Y el color de fondo de solo las filas impares se vuelve gris.

Ejemplo #3:

En nuestro tercer ejemplo, utilizamos el mismo selector de estilo CSS que utilizamos en los códigos anteriores para modificar los colores de las filas pares y impares. Sin embargo, usamos una sola tabla y cambiamos el color de las filas pares, pares impares. Aquí, el color del "borde" es "negro". El ancho de la frontera es aproximadamente "2px". Y el tipo de borde realizado es sólido en la propiedad "frontera" de CSS.

Además, el borde está "colapsado", por lo que aparece como un solo borde. El "100%" se selecciona como el "ancho". Luego, tenemos el "th" y "td" y alineamos su texto con el "centro" usando el "align de texto". Usamos el relleno "6px" para estos. Nuevamente, el borde para el encabezado y las celdas se establece en "2px" de tipo "ancho", tipo "sólido" y color "negro". El color de las filas cambia cuando usamos el selector de estilo. El selector de estilo se aplica al número "par" de filas. Establecemos el color de fondo de fila para las filas pares en "amarillo-verde" al principio. También queremos cambiar el color de las filas "impares", por lo que usamos este selector de estilo nuevamente y esta vez, ponemos el "impar" como el parámetro del selector "nth-child ()" y establecemos su "fondo- color "para" verde claro ". Como resultado, el color de las filas extrañas cambia a "verde claro".

Las filas alternativas en esta salida están coloreadas de manera diferente. Las filas uniformes son de color verde amarillo, mientras que las filas extrañas son de color verde claro. Al usar el selector de estilo CSS, puede cambiar el color de las filas alternativas.

Ejemplo #4:

Este es nuestro último ejemplo y vamos a crear una nueva tabla que contenga cuatro columnas y seis filas. Ahora, usamos los dos selectores aquí en este código para cambiar el color de la fila uniforme, así como el color de la fila impar.

Aquí, diseñamos un poco el encabezado utilizando la propiedad "Alinear de texto" y estableciéndola en el "Centro". Además, establecemos la fuente "Font-Family" a la fuente "Argeliana". El "color" de la fuente de este encabezado es "rojo". La fuente de "tabla" está establecida en "Arial" y el "colapso del borde" también está configurado en "colapsado" en este ejemplo. El "ancho" está configurado en "100px". Las propiedades utilizadas aquí para el "th" y "td" son las mismas que en los ejemplos anteriores. Aquí, el color de la fila "uniforme" se establece en "verde claro" y el color de la fila "impar" se establece en "verde marino de mar" al utilizar el selector "nth-child ()".

La salida se representa a continuación y observará que las filas incluso son del mismo color y las filas impares también son de los mismos colores. Este es el resultado de utilizar el selector "nth-child ()" en nuestro código CSS.

Conclusión

Esta guía demostró cómo cambiar los colores de la fila alternativa utilizando el selector CSS NTH-Child (). Cubrimos cómo funciona con un número impar de filas, así como con un número par de filas. Utilizamos la propiedad de "color de fondo" que se utiliza para modificar el color de las filas. Utilizamos el selector nth-child () para aplicar los diferentes colores a las filas alternativas en esta guía, y hemos repasado cada código en profundidad. También incluimos el código HTML y CSS, así como la salida. Como resultado, obtienes mucho conocimiento sobre el concepto CSS de cambiar el color de las filas alternativas.