Introducción: Antes de empezar con Pure debemos conocer los conceptos básicos de CSS simple . Básicamente, Pure CSS es un marco de hoja de estilo en cascada desarrollado por YAHOO. La razón principal para desarrollar Pure CSS se utiliza para desarrollar sitios web receptivos y reactivos como Bootstrap , que también es compatible con dispositivos móviles y es un marco CSS de código abierto y de uso gratuito. Puede ser la mejor alternativa a Materialise CSS .
En este artículo, entenderemos qué es Pure CSS Table. y aprender a usarlo en nuestro proyecto.
Cuando pensamos en la creación de páginas web, sabemos que las tablas son una forma agradable y fácil de organizar una gran cantidad de datos en los sitios web en forma de filas y columnas. Al utilizar el marco Pure CSS, podremos diseñar diferentes tipos de tablas.
Pure CSS proporciona una serie de clases de utilidad para diseñar tablas, básicamente hay 5 clases principales que se enumeran a continuación:
- pure-table: esta clase se usa para diseñar la tabla con relleno predeterminado y asignar bordes a los elementos de la tabla con un encabezado enfatizado.
- pure-table-bordered: esta clase se utiliza para dibujar bordes en la tabla verticales y horizontales para todas las celdas de la tabla.
- pure-table-horizontal: Esta clase se usa para dibujar la tabla con solo líneas horizontales.
- pure-table-odd: esta clase se utiliza para crear una tabla rayada con el efecto de estilo cebra que es más visible y atractiva para los usuarios.
- pure-table-striped: Básicamente se utiliza para mostrar tablas rayadas. Seccionó automáticamente una tabla después de pasar al elemento <table> junto con la clase de tabla pura .
Ejemplos: ahora aquí aprendemos cómo usar clases de tabla en HTML.
1. Tabla predeterminada: la clase de tabla pura se usa en la etiqueta <table> para crear una tabla básica con un estilo CSS básico, estas tablas son como las tablas HTML normales con algo de relleno y borde agregado a los elementos de la tabla con el encabezado.
HTML
<!DOCTYPE html>
<html>
<head>
<!-- Import Pure CSS -->
<link rel="stylesheet"
href="https://unpkg.com/purecss@2.0.6/build/pure-min.css"
integrity="sha384-Uu6IeWbM+gzNVXJcM9XV3SohHtmWE+3VGi496jvgX1jyvDTXfdK+rfZc8C1Aehk5"
crossorigin="anonymous"
origin="anonymous"
/>
<!-- Used to optimized Website for mobile -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
.container {
margin-top: 20px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
h1 {
color: green;
}
</style>
</head>
<body>
<div class="container">
<h1>GeeksforGeeks</h1>
<h2>Default Table</h2>
<!-- Here pure-table class is used -->
<table class="pure-table">
<thead>
<tr>
<th>Rank</th>
<th>Name</th>
<th>Runs</th>
<th>Centuries</th>
<th>Strike Rate</th>
<th>Avg</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Rohit</td>
<td>10000</td>
<td>29</td>
<td>97</td>
<td>55</td>
</tr>
<tr>
<td>2</td>
<td>Virat</td>
<td>12000</td>
<td>40</td>
<td>91</td>
<td>49</td>
</tr>
<tr>
<td>3</td>
<td>Rahul</td>
<td>5000</td>
<td>8</td>
<td>85</td>
<td>45</td>
</tr>
<tr>
<td>4</td>
<td>Rishabh</td>
<td>4000</td>
<td>2</td>
<td>89</td>
<td>39</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Producción:
2. Tabla bordeada: aquí usamos la clase pure-table-bordeded para crear una tabla bordeada. Esta clase agregará bordes verticales y horizontales a todas las celdas de la tabla.
HTML
<!DOCTYPE html>
<html>
<head>
<!-- Import Pure CSS -->
<link rel="stylesheet"
href="https://unpkg.com/purecss@2.0.6/build/pure-min.css"
integrity="sha384-Uu6IeWbM+gzNVXJcM9XV3SohHtmWE+3VGi496jvgX1jyvDTXfdK+rfZc8C1Aehk5"
crossorigin="anonymous"
origin="anonymous"
/>
<!-- Used to optimized Website for mobile -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
.container {
margin-top: 20px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
h1 {
color: green;
}
</style>
</head>
<body>
<div class="container">
<h1>GeeksforGeeks</h1>
<h2>Bordered Table</h2>
<!-- Here pure-table and pure-table-bordered class is used -->
<table class="pure-table pure-table-bordered">
<thead>
<tr>
<th>Rank</th>
<th>Name</th>
<th>Runs</th>
<th>Centuries</th>
<th>Strike Rate</th>
<th>Avg</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Rohit</td>
<td>10000</td>
<td>29</td>
<td>97</td>
<td>55</td>
</tr>
<tr>
<td>2</td>
<td>Virat</td>
<td>12000</td>
<td>40</td>
<td>91</td>
<td>49</td>
</tr>
<tr>
<td>3</td>
<td>Rahul</td>
<td>5000</td>
<td>8</td>
<td>85</td>
<td>45</td>
</tr>
<tr>
<td>4</td>
<td>Rishabh</td>
<td>4000</td>
<td>2</td>
<td>89</td>
<td>39</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Producción:
3. Tabla con bordes horizontales: aquí usamos la clase pure-table-horizontal para crear este tipo de tabla. Esto creará una tabla con líneas horizontales solamente.
HTML
<!DOCTYPE html>
<html>
<head>
<!-- Import Pure CSS -->
<link rel="stylesheet"
href="https://unpkg.com/purecss@2.0.6/build/pure-min.css"
integrity="sha384-Uu6IeWbM+gzNVXJcM9XV3SohHtmWE+3VGi496jvgX1jyvDTXfdK+rfZc8C1Aehk5"
crossorigin="anonymous"
origin="anonymous"
/>
<!-- Used to optimized Website for mobile -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
.container {
margin-top: 20px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
h1 {
color: green;
}
</style>
</head>
<body>
<div class="container">
<h1>GeeksforGeeks</h1>
<h2>Horizontal Bordered Table</h2>
<!-- Here pure-table and pure-table-horizontal class is used -->
<table class="pure-table pure-table-horizontal">
<thead>
<tr>
<th>Rank</th>
<th>Name</th>
<th>Runs</th>
<th>Centuries</th>
<th>Strike Rate</th>
<th>Avg</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Rohit</td>
<td>10000</td>
<td>29</td>
<td>97</td>
<td>55</td>
</tr>
<tr>
<td>2</td>
<td>Virat</td>
<td>12000</td>
<td>40</td>
<td>91</td>
<td>49</td>
</tr>
<tr>
<td>3</td>
<td>Rahul</td>
<td>5000</td>
<td>8</td>
<td>85</td>
<td>45</td>
</tr>
<tr>
<td>4</td>
<td>Rishabh</td>
<td>4000</td>
<td>2</td>
<td>89</td>
<td>39</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Producción:
4. Tabla rayada: Para una mejor visualización de las tablas de gran tamaño podemos utilizar celdas rayadas. Para una tabla rayada aquí, usamos la clase Pure CSS pure-table-odd en la etiqueta de cada elemento <tr> para cambiar el fondo de las filas impares. Esto creará una tabla rayada con el efecto de estilo cebra que es más visible y atractiva para una gran cantidad de datos para el usuario.
HTML
<!DOCTYPE html>
<html>
<head>
<!-- Import Pure CSS -->
<link rel="stylesheet"
href="https://unpkg.com/purecss@2.0.6/build/pure-min.css"
integrity="sha384-Uu6IeWbM+gzNVXJcM9XV3SohHtmWE+3VGi496jvgX1jyvDTXfdK+rfZc8C1Aehk5"
crossorigin="anonymous"
origin="anonymous"
/>
<!-- Used to optimized Website for mobile -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
.container {
margin-top: 20px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
h1 {
color: green;
}
</style>
</head>
<body>
<div class="container">
<h1>GeeksforGeeks</h1>
<h2>Horizontal Bordered Table</h2>
<!-- Here pure-table class is used -->
<table class="pure-table">
<thead>
<tr>
<th>Rank</th>
<th>Name</th>
<th>Runs</th>
<th>Centuries</th>
<th>Strike Rate</th>
<th>Avg</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Rohit</td>
<td>10000</td>
<td>29</td>
<td>97</td>
<td>55</td>
</tr>
<!--Here pure-table-odd class used
to change background of row-->
<tr class="pure-table-odd">
<td>2</td>
<td>Virat</td>
<td>12000</td>
<td>40</td>
<td>91</td>
<td>49</td>
</tr>
<tr>
<td>3</td>
<td>Rahul</td>
<td>5000</td>
<td>8</td>
<td>85</td>
<td>45</td>
</tr>
<tr class="pure-table-odd">
<td>4</td>
<td>Rishabh</td>
<td>4000</td>
<td>2</td>
<td>89</td>
<td>39</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Producción:
En este artículo, aprendemos qué es Pure CSS Table, sus clases y cómo usarlo en varias tablas.
Publicación traducida automáticamente
Artículo escrito por ankushingle8523 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA