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 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.
En el caso de un tipo de definición de tabla, se formatea para enfatizar una primera columna que define el contenido de una fila.
Clase de tipo de definición de tabla de IU semántica:
- definición: Esta clase define que el tipo de tabla es la definición.
Sintaxis:
<table class="ui definition table">
<tr>
<td></td>
...
</tr>
...
</table>
Ejemplo 1: este es un ejemplo básico que ilustra el tipo de definición de tabla creado con la interfaz de usuario semántica.
HTML
<!DOCTYPE html> <html> <head> <title>Semantic UI Table Definition Type</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet"/> <script src= "https://code.jquery.com/jquery-3.1.1.min.js" integrity= "sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </head> <body> <center> <h1 class="ui green header">GeeksforGeeks</h1> <strong>Semantic UI Table Definition Type</strong> </center> <table class="ui definition table celled"> <thead> <tr><th></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> </tbody> </table> </body> </html>
Producción:
Ejemplo 2: este es un ejemplo básico que ilustra el tipo de definición de tabla con diferentes estados creados con la interfaz de usuario semántica.
HTML
<!DOCTYPE html> <html> <head> <title>Semantic UI Table Definition Type</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet"/> <script src= "https://code.jquery.com/jquery-3.1.1.min.js" integrity= "sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </head> <body> <center> <h1 class="ui green header">GeeksforGeeks</h1> <strong>Semantic UI Table Definition Type</strong> </center> <table class="ui definition table celled"> <thead> <tr><th></th> <th>Access</th> <th>Insertion</th> <th>Deletion</th> <th>Search</th> </tr></thead> <tbody> <tr> <td>Array</td> <td class="active">O(1)</td> <td class="error">O(n)</td> <td class="error">O(n)</td> <td class="error">O(n)</td> </tr> <tr> <td>LinkedList</td> <td class="error">O(n)</td> <td class="active">O(1)</td> <td class="active">O(1)</td> <td class="error">O(n)</td> </tr> <tr> <td>AVL Tree</td> <td class="active">O(log n)</td> <td class="active">O(log n)</td> <td class="active">O(log n)</td> <td class="active">O(log n)</td> </tr> <tr> <td>HashMap</td> <td class="error">N/A</td> <td class="active">O(1)</td> <td class="active">O(1)</td> <td class="active">O(1)</td> </tr> </tbody> </table> </body> </html>
Producción:
Referencia: https://semantic-ui.com/collections/table.html#definition
Publicación traducida automáticamente
Artículo escrito por tpraneeth2001 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA