Semantic UI es un marco de código abierto que utiliza CSS y jQuery para crear excelentes interfaces de usuario. Es lo mismo que un bootstrap para usar y tiene grandes elementos diferentes para usar para hacer que su sitio web se vea más increíble. Utiliza una clase para agregar CSS a los elementos.
Las tablas son una excelente manera de agrupar un conjunto de elementos similares en filas y columnas. Muchas bases de datos como SQL, Postgresql, etc. utilizan tablas para almacenar datos. La interfaz de usuario semántica nos proporcionó una tabla con estilo. Echemos un vistazo a las clases de variación fija de la tabla .
Clases de variación fija de la tabla de IU semántica:
- solucionado: esta clase se usa para crear una tabla única que no cambia el tamaño de las celdas de la tabla en respuesta al contenido.
Sintaxis:
<table class="ui fixed table">
<thead>
...
</thead>
<tbody>
...
</tbody>
</table>
Ejemplo 1: En el siguiente ejemplo, hemos creado una tabla fija estándar.
HTML
<!DOCTYPE html> <html> <head> <title>Semantic UI Table Fixed Variation</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body> <div class="ui container"> <h2 class="ui green header">GeeksforGeeks</h2> <h4>Semantic UI Table Fixed Variation</h4> <hr> <table class="ui fixed table"> <thead> <tr> <th>Language</th> <th>Release Date</th> <th>Link</th> <th>About</th> </tr> </thead> <tbody> <tr> <td>Node.js</td> <td>2009</td> <td>https://www.geeksforgeeks.org/nodejs/</td> <td>Node.js is an open-source and cross-platform runtime environment built on Chrome's V8 JavaScript engine for executing JavaScript code outside of a browser. </td> </tr> <tr> <td>C++</td> <td>1985</td> <td>https://www.geeksforgeeks.org/c-plus-plus/</td> <td>C++ is a general purpose programming language and widely used now a days for competitive programming. It has imperative, object-oriented and generic programming features. </td> </tr> <tr> <td>Java</td> <td>1996</td> <td>https://www.geeksforgeeks.org/java/</td> <td>Java has been one of the most popular programming languages for many years. Java is Object Oriented. However, it is not considered as pure object-oriented as it provides support for primitive data types </td> </tr> </tbody> </table> </div> </body> </html>
Producción:
Variación fija de la tabla de interfaz de usuario semántica
Ejemplo 2: En el siguiente ejemplo, hemos creado una tabla fija de una sola línea .
HTML
<!DOCTYPE html> <html> <head> <title>Semantic UI Table Fixed Variation</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body> <div class="ui container"> <h2 class="ui green header">GeeksforGeeks</h2> <h4>Semantic UI Table Fixed Variation</h4> <hr> <table class="ui single line fixed table"> <thead> <tr> <th>Language</th> <th>Release Date</th> <th>Link</th> <th>About</th> </tr> </thead> <tbody> <tr> <td>Node.js</td> <td>2009</td> <td>https://www.geeksforgeeks.org/nodejs/</td> <td>Node.js is an open-source and cross-platform runtime environment built on Chrome's V8 JavaScript engine for executing JavaScript code outside of a browser. </td> </tr> <tr> <td>C++</td> <td>1985</td> <td>https://www.geeksforgeeks.org/c-plus-plus/</td> <td>C++ is a general purpose programming language and widely used now a days for competitive programming. It has imperative, object-oriented and generic programming features. </td> </tr> <tr> <td>Java</td> <td>1996</td> <td>https://www.geeksforgeeks.org/java/</td> <td>Java has been one of the most popular programming languages for many years. Java is Object Oriented. However, it is not considered as pure object-oriented as it provides support for primitive data types </td> </tr> </tbody> </table> </div> </body> </html>
Producción:
Variación fija de la tabla de interfaz de usuario semántica
Enlace de referencia: https://semantic-ui.com/collections/table.html#fixed
Publicación traducida automáticamente
Artículo escrito por coder_srinivas y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA