Primer CSS es un marco CSS gratuito de código abierto que se basa en sistemas que crean la base de los elementos de estilo básicos, como el espaciado, la tipografía y el color. Este método sistemático garantiza que nuestros patrones sean estables e interoperables entre sí. Su enfoque de CSS está influenciado por los principios de CSS orientado a objetos, CSS funcional y arquitectura BEM. Es altamente reutilizable y flexible. Está creado con el sistema de diseño de GitHub.
Las tablas CSS de Primer se utilizan para crear la tabla HTML utilizando las etiquetas <thead>, <tfoot>, <tbody> y <th> . La etiqueta <tfoot> generalmente se coloca sobre la etiqueta <tbody> cuando queremos cargar el pie de página primero. En este artículo, discutiremos las tablas CSS de Primer.
Primer CSS Tablas Etiquetas:
- <table>: esta etiqueta se utiliza para crear la tabla.
- <thead>: esta etiqueta se utiliza para crear el encabezado de la tabla.
- <tfoot>: esta etiqueta se utiliza para crear el pie de página de la tabla.
- <tr>: esta etiqueta se utiliza para crear la fila de la tabla.
- <tbody>: esta etiqueta se utiliza para crear el cuerpo de la tabla.
Sintaxis:
<table>
<thead>
<tr>
..
</tr>
</thead>
<tbody>
<tr>
...
</tr>
</tbody>
<tfoot>
<tr>
...
</tr>
</tfoot>
</table>
Ejemplo 1: El siguiente ejemplo demuestra las tablas CSS de Primer.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Tables </title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> </head> <body class="m-2"> <h1 class="color-fg-success"> GeeksforGeeks </h1> <h3> Primer CSS Tables </h3> <br> <table> <thead> <tr> <th scope="col"> Header 1 </th> <th scope="col"> Header 2 </th> </tr> </thead> <tbody> <tr> <td> John </td> <td> 90 </td> </tr> <tr> <td> Jack </td> <td> 75 </td> </tr> </tbody> </table> </body> </html>
Producción:
Primer CSS Tablas
Ejemplo 2: El siguiente ejemplo demuestra las tablas CSS de Primer.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Tables </title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> </head> <body class="m-2"> <h1 class="color-fg-success"> GeeksforGeeks </h1> <h3> Primer CSS Tables </h3> <br> <table> <thead> <tr> <th scope="col"> Header 1 </th> <th scope="col"> Header 2 </th> <th scope="col"> Header 3 </th> </tr> </thead> <tbody> <tr> <td> <a href=""> Java </a> </td> <td class="color-bg-danger"> Python </td> <td> <a href=""> C++ </a> </td> </tr> <tr> <td class="color-bg-success"> App dev </td> <td> <a href=""> Web dev </a> </td> <td> <a href=""> Flutter </a> </td> </tr> </tbody> </table> </body> </html>
Producción:
Primer CSS Tablas
Referencia: https://primer.style/css/principles/html#tables
Publicación traducida automáticamente
Artículo escrito por harendra4373 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA