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 la variación de celda seleccionable, podemos hacer que una celda de la tabla sea seleccionable, hacemos esto usando etiquetas de anclaje que permiten que la celda sea seleccionable, y también estos enlaces por defecto heredarán su color de celda.
Tabla de IU semántica Clase de variación de celda seleccionable:
- seleccionable: Esta clase permite que una celda de la tabla sea seleccionable.
Sintaxis:
<table class="ui table">
<tr>
<td class="selectable"></td>
...
</tr>
...
</table>
Ejemplo 1: este es un ejemplo básico que ilustra la variación de la celda seleccionable de la tabla creada con la interfaz de usuario semántica.
HTML
<!DOCTYPE html> <html> <head> <title>Semantic-UI Table Selectable Cell Variation</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body> <center> <h1 class="ui green header">GeeksforGeeks</h1> <strong>Semantic-UI Table Selectable Cell Variation</strong> </center> <table class="ui celled 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 class="selectable"><a>O(1)</a></td> <td>O(n)</td> <td>O(n)</td> <td>O(n)</td> </tr> <tr> <td>LinkedList</td> <td>O(n)</td> <td class="selectable"><a>O(1)</a></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 class="selectable"><a>O(log n)</a></td> <td>O(log n)</td> </tr> <tr> <td>HashMap</td> <td>N/A</td> <td>O(1)</td> <td>O(1)</td> <td class="selectable"><a>O(1)</a></td> </tr> <tr> <td>AVL Tree</td> <td class="selectable"><a>O(log n)</a></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 la variación de celda seleccionable de tabla colapsada creada con la interfaz de usuario semántica.
HTML
<!DOCTYPE html> <html> <head> <title>Semantic-UI Table Selectable Cell Variation</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body> <center> <h1 class="ui green header">GeeksforGeeks</h1> <strong>Semantic-UI Table Selectable Cell Variation</strong> </center> <table class="ui celled table collapsing"> <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 class="selectable positive"><a>O(1)</a></td> <td>O(n)</td> <td class="negative">O(n)</td> <td>O(n)</td> </tr> <tr> <td>LinkedList</td> <td class="negative">O(n)</td> <td class="selectable"><a>O(1)</a></td> <td class="positive">O(1)</td> <td class="negative">O(n)</td> </tr> <tr> <td>AVL Tree</td> <td>O(log n)</td> <td>O(log n)</td> <td class="selectable positive"><a>O(log n)</a></td> <td>O(log n)</td> </tr> <tr> <td>HashMap</td> <td>N/A</td> <td class="positive">O(1)</td> <td>O(1)</td> <td class="selectable positive"><a>O(1)</a></td> </tr> <tr> <td>AVL Tree</td> <td class="selectable negative"><a>O(log n)</a></td> <td>O(log n)</td> <td class="negative">O(log n)</td> <td>O(log n)</td> </tr> </tbody> </table> </body> </html>
Producción:
Referencia: https://semantic-ui.com/collections/table.html#selectable-cell
Publicación traducida automáticamente
Artículo escrito por tpraneeth2001 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA