Una tabla es una disposición de datos en filas y columnas, o posiblemente en una estructura más compleja. Las tablas se utilizan ampliamente en la comunicación, la investigación y el análisis de datos. En Pure CSS, agregaremos una clase de «tabla pura» para agregar estilos a la tabla. Esta clase agrega relleno y bordes a los elementos de la tabla y enfatiza el encabezado.
Clase de tabla despojada de CSS puro:
- pure-table-odd: esta clase se usa con la etiqueta <tr> para cambiar el fondo de la fila y crear un efecto de estilo cebra.
- pure-table-stripped: esta clase se usa con la etiqueta de tabla para crear una tabla despojada. Esta clase se usa con la clase de «tabla pura».
Sintaxis:
<table class="pure-table">
<thead>
<tr>
<td></td>
. . .
</tr>
</thead>
<tbody>
<tr class="Stripped Table Classd">
<td></td>
. . .
</tr>
. . .
</tbody>
</table>
Ejemplo 1:
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= "https://unpkg.com/purecss@2.0.6/build/pure-min.css" integrity= "sha384-Uu6IeWbM+gzNVXJcM9XV3SohHtmWE+3VGi496jvgX1jyvDTXfdK+rfZc8C1Aehk5" crossorigin="anonymous"> </head> <body> <center> <h1 style="color: green;"> GeeksforGeeks </h1> <h3>Pure CSS Stripped Table</h3> <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 class="pure-table-odd"> <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 class="pure-table-odd"> <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> </center> </body> </html>
Producción:
Tabla despojada de CSS puro
Ejemplo 2:
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= "https://unpkg.com/purecss@2.0.6/build/pure-min.css" integrity= "sha384-Uu6IeWbM+gzNVXJcM9XV3SohHtmWE+3VGi496jvgX1jyvDTXfdK+rfZc8C1Aehk5" crossorigin="anonymous"> </head> <body> <center> <h1 style="color: green;"> GeeksforGeeks </h1> <h3>Pure CSS Stripped Table</h3> <table class="pure-table pure-table-stripped"> <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> </center> </body> </html>
Producción:
Tabla despojada de CSS puro
Referencia: https://purecss.io/tables/#stripped-table