Una mesa con rayas de cebra es una mesa que tiene filas (o columnas) alternas en un tono de color diferente. Los beneficios de usar tablas con rayas de cebra son muchos, como aumentar la legibilidad de las filas (o columnas), enfatizar un conjunto específico de filas (o columnas), etc.
Este artículo le dirá cómo crear una tabla con rayas de cebra (filas o columnas) en una página web usando solo HTML y CSS.
Mesa con filas Zebra Stripped:
- Toque en el elemento tr (fila de la tabla) es CSS.
- Use el selector nth-child() y agregue el color de fondo de su elección a todas las filas de la tabla impares (o pares).
Ejemplo: las filas alternas obtienen un color de fondo diferente, creando así una tabla con filas con rayas de cebra.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Zebra-Stripped Table</title>
<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
padding: 5px;
}
tr:nth-child(odd) {
background-color: #8F9AA5;
}
</style>
</head>
<body>
<table>
<tr>
<td>Model</td>
<td>Make</td>
<td>Year</td>
<td>Transmission Type</td>
</tr>
<tr>
<td>Urus</td>
<td>Lamborghini</td>
<td>2017</td>
<td>Automatic</td>
</tr>
<tr>
<td>Cayenne Turbo</td>
<td>Porsche</td>
<td>2018</td>
<td>Automatic</td>
</tr>
<tr>
<td>Durango SRT</td>
<td>Dodge</td>
<td>2018</td>
<td>Automatic</td>
</tr>
<tr>
<td>Juke Nismo RS</td>
<td>Nissan</td>
<td>2014</td>
<td>Manual</td>
</tr>
<tr>
<td>Escalade ESV</td>
<td>Cadillac</td>
<td>2012</td>
<td>Automatic</td>
</tr>
<tr>
<td>Levante S</td>
<td>Maserati</td>
<td>2017</td>
<td>Automatic</td>
</tr>
</table>
</body>
</html>
Producción:
Mesa con columnas Zebra Stripped:
- Toca el elemento td (tabla de datos) en CSS.
- Use el selector nth-child() y agregue un color de fondo de su elección a todas las celdas de datos de la tabla impares (o pares).
Ejemplo: las celdas alternativas obtienen un color de fondo diferente, lo que hace que el color de las columnas alternas sea diferente, creando así una tabla con columnas con rayas de cebra.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Zebra-Stripped Table</title>
<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
padding: 5px;
}
td:nth-child(odd) {
background-color: #8F9AA5;
}
</style>
</head>
<body>
<table>
<tr>
<td>Model</td>
<td>Make</td>
<td>Year</td>
<td>Transmission Type</td>
</tr>
<tr>
<td>Urus</td>
<td>Lamborghini</td>
<td>2017</td>
<td>Automatic</td>
</tr>
<tr>
<td>Cayenne Turbo</td>
<td>Porsche</td>
<td>2018</td>
<td>Automatic</td>
</tr>
<tr>
<td>Durango SRT</td>
<td>Dodge</td>
<td>2018</td>
<td>Automatic</td>
</tr>
<tr>
<td>Juke Nismo RS</td>
<td>Nissan</td>
<td>2014</td>
<td>Manual</td>
</tr>
<tr>
<td>Escalade ESV</td>
<td>Cadillac</td>
<td>2012</td>
<td>Automatic</td>
</tr>
<tr>
<td>Levante S</td>
<td>Maserati</td>
<td>2017</td>
<td>Automatic</td>
</tr>
</table>
</body>
</html>
</html>
Producción
Publicación traducida automáticamente
Artículo escrito por deep9narayan y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA