filas alternas estilo de una tabla con CSS

En este artículo, vamos a aprender cómo filas alternas estilo de una tabla con CSS ? El uso de CSS que puede mejorar la experiencia del usuario al peinar filas alternas de una tabla diferente de otras filas.

tablas se utilizan para presentar los datos en forma de tabla en la página web. El estilo class que ofrece el navegador no es bien parecido. Cuando tenemos un montón de datos que muestran en la tabla, el estilo default podría no ser muy legible por el usuario. El uso de CSS que puede mejorar la experiencia del usuario al peinar filas alternas de una tabla diferente de otras filas.

Tenemos un CSS pseudo default llamada : nth-de-tipo () cuales basa en el parámetro que se le pasa, el estilo aplicado únicamente a los elementos. Supongamos, queremos artículos impares de estilo en una lista, podemos hacerlo con el siguiente código CSS.

Código – CSS

ul li:nth-of-type(odd) {
color: blue;
}

Utilizando esta propiedad, vamos a labrar las filas alternas de una mesa. Podemos elegir cualquiera de ellos desde incluso y extraña ya que crearán un efecto alterna. Aquí está la estructura HTML que define etiquetado de la tabla class.

Código – HTML

<table>
<tr>
<th>Name</th>
<th>Country</th>
</tr>
<tr>
<td>Abhinav</td>
<td>India</td>
</tr>
<tr>
<td>Sam</td>
<td>Russia</td>
</tr>
<tr>
<td>John</td>
<td>USA</td>
</tr>
</table>

Aquí definimos la tabla usando etiquetado de la tabla estándar. El & lt; tr & gt; define los etiqueta filas y & lt; td & gt; de datos define la etiqueta class cada columna. El & lt; º & gt; etiqueta define los encabezados de la tabla, class permitiendo a los usuarios conocer el nombre de la columna. Ahora tenemos que aplicar CSS class efecto fila alternativo.

Código – CSS

table {
border-collapse: collapse;
}
td, th {
border: 1px solid #aaa;
padding: 5px 10px;
}
table tr:nth-of-type(even) {
background: #ddd;
}

En primer lugar, el colapso de la frontera de la tabla usando border-collapse propiedad. Ayuda a reunir a los contenidos de la tabla y hacer que se vea como una sola tabla. A continuación, definimos las propiedades for td y º y definir las fronteras y propiedades de relleno class que darle una buena y amplia mirada.

A continuación, nos dirigimos a los elementos tr que denota la fila de la tabla. Aplicar las enésimo-de-tipo (incluso) a estas filas y vamos a obtener el resultado deseado. Vea una demostración para verlo en acción.

DEMO

HTML con CSS

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>CSS Table Demo</title>
<style>
table {
border-collapse: collapse;
}
td, th {
border: 1px solid #aaa;
padding: 5px 10px;
}
table tr:nth-of-type(even) {
background: #ddd;
}
</style>
</head>
<body>
<table>
<tr>
<th>Name</th>
<th>Country</th>
</tr>
<tr>
<td>Abhinav</td>
<td>India</td>
</tr>
<tr>
<td>Sam</td>
<td>Russia</td>
</tr>
<tr>
<td>John</td>
<td>USA</td>
</tr>
</table>
</body>
</html>

salida

Style alternate rows of a table with CSS - 4

Esperanza usted tiene gusto del artículo. Comparte tu opinión en los comentarios a continuación.


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *