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 de interfaz de usuario semántica tienen la misma estructura.
Tablas CSS básicas:
- Conceptos básicos : esta es la tabla CSS de Foundation normal.
- Estado de desplazamiento : Esto se usa para oscurecer ligeramente las filas de la tabla al pasar el mouse.
- Rayas : esto significa que las filas de la tabla tienen colores de fondo blancos y grises alternos que aparecen como rayas.
- Tabla apilada : este es un diseño de tabla que apila sus celdas una encima de la otra en pantallas pequeñas para que el diseño responda.
- Tabla de desplazamiento : Esto permite el desplazamiento horizontal en nuestra tabla.
Sintaxis:
<table class="CSS-Tables-class">
<thead>
...
</thead>
<tbody>
...
</tbody>
</table>
Nota: Utilice la sintaxis anterior según la necesidad mediante una combinación de las clases mencionadas anteriormente. Consulte los ejemplos a continuación para una mejor comprensión de las clases.
Ejemplo 1: este es un ejemplo básico que ilustra los conceptos básicos de tablas creados con Foundation CSS.
HTML
<!DOCTYPE html> <html> <head> <title>Foundation CSS Tables</title> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" crossorigin="anonymous"> <script src= "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"> </script> <script src= "https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/js/foundation.min.js" crossorigin="anonymous"> </script> </head> <body> <center> <h2 style="color:green;">GeeksforGeeks</h2> <h3>Foundation CSS Tables</h3> </center> <b>Table Basics</b> <table> <thead> <tr> <th>Data Structures</th> <th>Access</th> <th>Insertion</th> <th>Deletion</th> <th>Search</th> </tr> </thead> <tbody> <tr> <td>Array</td> <td>O(1)</td> <td>O(n)</td> <td>O(n)</td> <td>O(n)</td> </tr> <tr> <td>LinkedList</td> <td>O(n)</td> <td>O(1)</td> <td>O(1)</td> <td>O(n)</td> </tr> <tr> <td>AVL Tree</td> <td>O(log n)</td> <td>O(log n)</td> <td>O(log n)</td> <td>O(log n)</td> </tr> <tr> <td>HashMap</td> <td>N/A</td> <td>O(1)</td> <td>O(1)</td> <td>O(1)</td> </tr> <tr> <td>AVL Tree</td> <td>O(log n)</td> <td>O(log n)</td> <td>O(log n)</td> <td>O(log n)</td> </tr> </tbody> </table> </body> </html>
Producción:
Ejemplo 2: este es un ejemplo básico que ilustra una tabla Hover State creada con Foundation CSS.
HTML
<!DOCTYPE html> <html> <head> <title>Foundation CSS Tables</title> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" crossorigin="anonymous"> <script src= "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"> </script> <script src= "https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/js/foundation.min.js" crossorigin="anonymous"> </script> </head> <body> <center> <h2 style="color: green;">GeeksforGeeks</h2> <h3>Foundation CSS Tables</h3> </center> <b>Table Hover State</b> <table class="hover"> <thead> <tr> <th>Data Structures</th> <th>Access</th> <th>Insertion</th> <th>Deletion</th> <th>Search</th> </tr> </thead> <tbody> <tr> <td>Array</td> <td>O(1)</td> <td>O(n)</td> <td>O(n)</td> <td>O(n)</td> </tr> <tr> <td>LinkedList</td> <td>O(n)</td> <td>O(1)</td> <td>O(1)</td> <td>O(n)</td> </tr> <tr> <td>AVL Tree</td> <td>O(log n)</td> <td>O(log n)</td> <td>O(log n)</td> <td>O(log n)</td> </tr> <tr> <td>HashMap</td> <td>N/A</td> <td>O(1)</td> <td>O(1)</td> <td>O(1)</td> </tr> <tr> <td>AVL Tree</td> <td>O(log n)</td> <td>O(log n)</td> <td>O(log n)</td> <td>O(log n)</td> </tr> </tbody> </table> </body> </html>
Producción:
Ejemplo 3: este es un ejemplo básico que ilustra Table Stripes creado con Foundation CSS.
HTML
<!DOCTYPE html> <html> <head> <title>Foundation CSS Tables</title> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" crossorigin="anonymous"> <script src= "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"> </script> <script src= "https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/js/foundation.min.js" crossorigin="anonymous"> </script> </head> <body> <center> <h2 style="color:green;">GeeksforGeeks</h2> <h3>Foundation CSS Tables</h3> </center> <b>Table with Stripes</b> <table> <thead> <tr> <th>Data Structures</th> <th>Access</th> <th>Insertion</th> <th>Deletion</th> <th>Search</th> </tr> </thead> <tbody> <tr> <td>Array</td> <td>O(1)</td> <td>O(n)</td> <td>O(n)</td> <td>O(n)</td> </tr> <tr> <td>LinkedList</td> <td>O(n)</td> <td>O(1)</td> <td>O(1)</td> <td>O(n)</td> </tr> <tr> <td>AVL Tree</td> <td>O(log n)</td> <td>O(log n)</td> <td>O(log n)</td> <td>O(log n)</td> </tr> </tbody> </table> <b>Table without Stripes</b> <table class="unstriped"> <thead> <tr> <th>Data Structures</th> <th>Access</th> <th>Insertion</th> <th>Deletion</th> <th>Search</th> </tr> </thead> <tbody> <tr> <td>Array</td> <td>O(1)</td> <td>O(n)</td> <td>O(n)</td> <td>O(n)</td> </tr> <tr> <td>LinkedList</td> <td>O(n)</td> <td>O(1)</td> <td>O(1)</td> <td>O(n)</td> </tr> <tr> <td>AVL Tree</td> <td>O(log n)</td> <td>O(log n)</td> <td>O(log n)</td> <td>O(log n)</td> </tr> </tbody> </table> </body> </html>
Producción:
Ejemplo 4: este es un ejemplo básico que ilustra una tabla apilada en un dispositivo de tamaño pequeño creado con Foundation CSS.
HTML
<!DOCTYPE html> <html> <head> <title>Foundation CSS Tables</title> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" crossorigin="anonymous"> <script src= "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"> </script> <script src= "https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/js/foundation.min.js" crossorigin="anonymous"> </script> </head> <body> <center> <h2 style="color: green;">GeeksforGeeks</h2> <h3>Foundation CSS Tables</h3> </center> <b>Stacked Table</b> <table class="stack"> <thead> <tr> <th>Data Structures</th> <th>Access</th> <th>Insertion</th> <th>Deletion</th> <th>Search</th> </tr> </thead> <tbody> <tr> <td>Array</td> <td>O(1)</td> <td>O(n)</td> <td>O(n)</td> <td>O(n)</td> </tr> <tr> <td>LinkedList</td> <td>O(n)</td> <td>O(1)</td> <td>O(1)</td> <td>O(n)</td> </tr> </tbody> </table> </body> </html>
Producción:
Ejemplo 5: este es un ejemplo básico que ilustra una tabla de desplazamiento creada con Foundation CSS.
HTML
<!DOCTYPE html> <html> <head> <title>Foundation CSS Tables</title> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" crossorigin="anonymous"> <script src= "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"> </script> <script src= "https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/js/foundation.min.js" crossorigin="anonymous"> </script> </head> <body> <center> <h2 style="color: green;">GeeksforGeeks</h2> <h3>Foundation CSS Tables </h3> </center> <b>Scrolling Table</b> <div class="table-scroll"> <table> <thead> <tr> <th>Data Structures</th> <th>Access</th> <th>Insertion</th> <th>Deletion</th> <th>Search</th> <th>Access</th> <th>Insertion</th> <th>Deletion</th> <th>Search</th> <th>Access</th> <th>Insertion</th> <th>Deletion</th> <th>Search</th> <th>Access</th> <th>Insertion</th> <th>Deletion</th> <th>Search</th> <th>Access</th> <th>Insertion</th> <th>Deletion</th> <th>Search</th> </tr> </thead> <tbody> <tr> <td>Array</td> <td>O(1)</td> <td>O(n)</td> <td>O(n)</td> <td>O(n)</td> <td>O(1)</td> <td>O(n)</td> <td>O(n)</td> <td>O(n)</td> <td>O(1)</td> <td>O(n)</td> <td>O(n)</td> <td>O(n)</td> <td>O(1)</td> <td>O(n)</td> <td>O(n)</td> <td>O(n)</td> <td>O(1)</td> <td>O(n)</td> <td>O(n)</td> <td>O(n)</td> </tr> <tr> <td>LinkedList</td> <td>O(n)</td> <td>O(1)</td> <td>O(1)</td> <td>O(n)</td> <td>O(n)</td> <td>O(1)</td> <td>O(1)</td> <td>O(n)</td> <td>O(n)</td> <td>O(1)</td> <td>O(1)</td> <td>O(n)</td> <td>O(n)</td> <td>O(1)</td> <td>O(1)</td> <td>O(n)</td> <td>O(n)</td> <td>O(1)</td> <td>O(1)</td> <td>O(n)</td> </tr> <tr> <td>AVL Tree</td> <td>O(log n)</td> <td>O(log n)</td> <td>O(log n)</td> <td>O(log n)</td> <td>O(log n)</td> <td>O(log n)</td> <td>O(log n)</td> <td>O(log n)</td> <td>O(log n)</td> <td>O(log n)</td> <td>O(log n)</td> <td>O(log n)</td> <td>O(log n)</td> <td>O(log n)</td> <td>O(log n)</td> <td>O(log n)</td> <td>O(log n)</td> <td>O(log n)</td> <td>O(log n)</td> <td>O(log n)</td> </tr> <tr> <td>HashMap</td> <td>N/A</td> <td>O(1)</td> <td>O(1)</td> <td>O(1)</td> <td>N/A</td> <td>O(1)</td> <td>O(1)</td> <td>O(1)</td> <td>N/A</td> <td>O(1)</td> <td>O(1)</td> <td>O(1)</td> <td>N/A</td> <td>O(1)</td> <td>O(1)</td> <td>O(1)</td> <td>N/A</td> <td>O(1)</td> <td>O(1)</td> <td>O(1)</td> </tr> </tbody> </table> </div> </body> </html>
Producción:
Referencia: https://get.foundation/sites/docs/table.html