Foundation CSS es un marco front-end receptivo y de código abierto creado por la fundación ZURB en septiembre de 2011, que facilita el diseño de hermosos sitios web, aplicaciones y correos electrónicos receptivos que se ven increíbles y pueden ser accesibles para cualquier dispositivo. Es utilizado por muchas empresas como Facebook, eBay, Mozilla, Adobe e incluso Disney. El marco se basa en un arranque similar a Saas. Es más sofisticado, flexible y fácilmente personalizable. También viene con CLI, por lo que es fácil de usar con paquetes de módulos. Ofrece la herramienta Fastclick.js para una renderización más rápida en dispositivos móviles.
Las tablas son una manera fácil de organizar una gran cantidad de datos. 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. Las tablas son útiles para diversas tareas, como presentar información de texto y datos numéricos. Se puede utilizar para comparar dos o más elementos en el diseño de formulario tabular.
Las tablas se utilizan para crear bases de datos. Una tabla HTML y una tabla Foundation CSS son estructuralmente iguales. Las rayas de las tablas significan que las filas de la tabla tienen colores de fondo blancos y grises alternos que aparecen como rayas.
Clases de tablas de Foundation CSS:
- striped: esta clase ayuda a habilitar el estilo de franjas de nuestra tabla, que está presente de forma predeterminada en una tabla Foundation CSS.
- unstriped: esta clase ayuda a eliminar el estilo de rayas de nuestra tabla que, por lo tanto, está presente en una tabla Foundation CSS.
Sintaxis:
<table class="striped">
<thead>
...
</thead>
<tbody>
...
</tbody>
</table>
Nota:
- Siempre el elemento <thead> debe tener al menos un elemento <tr> .
- Aunque estructuralmente las tablas de HTML y Foundation CSS son iguales, se aplica cierto estilo a la tabla en Foundation CSS.
- Las tablas Foundation CSS tienen modificadores de respuesta para ayudar a resolver algunos de los problemas de diseño en función de las necesidades de su tabla.
Ejemplo 1: Este es un ejemplo básico que ilustra tablas con clases divididas usando Foundation CSS.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Foundation CSS Tables Stripes</title> <!-- Compressed CSS --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"> </head> <body> <center> <h1 style="color:green;">GeeksforGeeks</h1> <strong>Foundation CSS Tables</strong> <br/><br/> <table style="width:90%" class="striped"> <tr> <th>Student Name</th> <th>Branch</th> <th>RollNo</th> </tr> <tr> <td>Ravi</td> <td>CSE</td> <td>001</td> </tr> <tr> <td>Naveen</td> <td>CSE</td> <td>002</td> </tr> <tr> <td>Srihita</td> <td>ECE</td> <td>003</td> </tr> <tr> <td>Aman</td> <td>MECH</td> <td>004</td> </tr> </table> </center> </body> </html>
Producción:
Foundation CSS Tablas Rayas
Ejemplo 2: Este es un ejemplo básico que ilustra una tabla sin bandas usando una clase sin bandas usando Foundation CSS.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Foundation CSS Tables Stripes</title> <!-- Compressed CSS --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"> </head> <body> <center> <h1 style="color:green;">GeeksforGeeks</h1> <strong>Foundation CSS Tables</strong> <br/><br/> <table style="width:90%" class="unstriped"> <tr> <th>Student Name</th> <th>Branch</th> <th>RollNo</th> </tr> <tr> <td>Ravi</td> <td>CSE</td> <td>001</td> </tr> <tr> <td>Naveen</td> <td>CSE</td> <td>002</td> </tr> <tr> <td>Srihita</td> <td>ECE</td> <td>003</td> </tr> <tr> <td>Aman</td> <td>MECH</td> <td>004</td> </tr> </table> </center> </body> </html>
Producción:
Foundation CSS Tablas Rayas
Referencia: https://get.foundation/sites/docs/table.html
Publicación traducida automáticamente
Artículo escrito por tpraneeth2001 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA