Foundation CSS es un marco front-end receptivo y de código abierto creado por ZURB en septiembre de 2011 que simplifica la creación de sorprendentes sitios web, aplicaciones y correos electrónicos receptivos que funcionan en cualquier dispositivo. Muchas empresas, como Facebook, eBay, Mozilla, Adobe e incluso Disney, lo utilizan. Este marco se basa en bootstrap, que es similar a SaaS. Es más complejo, versátil y configurable. También viene con una interfaz de línea de comandos, lo que facilita su uso con paquetes de módulos. El marco de correo electrónico le proporciona correos electrónicos HTML receptivos, que se pueden leer en cualquier dispositivo. Foundation for Apps le permite crear aplicaciones web totalmente receptivas. Tablas CSS básicasson la disposición de los datos tabulares en forma de filas y columnas. Podemos obtener fácilmente cualquier valor de tabla usando las filas y columnas. Podemos tener cualquier tipo de datos en la tabla, como texto, enlace, imagen, etc. En este artículo, discutiremos los conceptos básicos de las tablas en Foundation CSS.
Fundamentos de tablas CSS básicas Etiquetas:
- table: Se utiliza para crear la tabla.
- thead: Se utiliza para agrupar el contenido de la cabecera.
- tbody: Se utiliza para crear el contenido del cuerpo.
Sintaxis:
<table>
<thead>
....
</thead>
<tbody>
....
</tbody>
</table>
Ejemplo 1: El siguiente código demuestra los conceptos básicos de las tablas CSS de Foundation.
HTML
<!DOCTYPE html> <html> <head> <!-- Compressed CSS --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" crossorigin="anonymous" /> </head> <body> <center> <h2 style="color: green"> GeeksforGeeks </h2> <h3>Foundation CSS Tables Basics</h3> <table> <thead> <tr> <th>GFG Heading 1</th> <th>GFG Heading 2</th> <th>GFG Heading 3</th> </tr> </thead> <tbody> <tr> <td>A Computer Science</td> <td>programming articles</td> <td>Java</td> </tr> <tr> <td>Portal for geeks</td> <td>Coding</td> <td>computer science</td> </tr> <tr> <td>Javascript</td> <td>Web development</td> <td>App development</td> </tr> </tbody> </table> </center> </body> </html>
Producción:
Ejemplo 2: El siguiente código demuestra los conceptos básicos de las tablas CSS de Foundation utilizando el atributo de ancho .
HTML
<!DOCTYPE html> <html> <head> <!-- Compressed CSS --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" crossorigin="anonymous" /> </head> <body> <center> <h2 style="color: green"> GeeksforGeeks </h2> <h3>Foundation CSS Tables Basics</h3> <table> <thead> <tr> <th width="300">GFG Heading 1</th> <th width="200">GFG Heading 2</th> <th width="20">GFG Heading 3</th> <th width="100">GFG Heading 4</th> </tr> </thead> <tbody> <tr> <td>A Computer Science portal for geeks. GeeksforGeeks</td> <td>programming articles portal for geeks</td> <td>Java</td> <td>Flutter</td> </tr> <tr> <td>Portal for geeks</td> <td>Coding</td> <td>computer science</td> <td>GeeksforGeeks</td> </tr> <tr> <td>programming articles portal for geeks</td> <td>Web development</td> <td>App development</td> <td>Coding</td> </tr> </tbody> </table> </center> </body> </html>
Producción:
Referencia: https://get.foundation/sites/docs/table.html#basics
Publicación traducida automáticamente
Artículo escrito por singh_teekam y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA