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.
La interfaz de usuario semántica tiene un montón de componentes para el diseño de la interfaz de usuario. Uno de ellos es el componente Tabla . 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. Hay diferentes variaciones de tablas disponibles en Semantic UI.
Variaciones de la tabla de IU semántica:
- Línea única : esta variación se utiliza para mostrar el contenido de la tabla en una sola línea.
- Corregido : esta variación no cambia el tamaño de la tabla según su contenido.
- Apilamiento : esta variación se usa para apilar el contenido de la tabla de manera receptiva.
- Fila seleccionable : esta variación se utiliza para hacer que una fila o filas de la tabla aparezcan seleccionadas.
- Celda seleccionable : esta variación se utiliza para que la celda de la tabla aparezca seleccionada.
- Alineación vertical : esta variación permite al usuario alinear el contenido de la tabla verticalmente según sus necesidades.
- Alineación de texto : esta variación permite al usuario alinear el contenido de la tabla horizontalmente según sus necesidades.
- A rayas : esta variación crea una mesa con colores contrastantes para alternar filas.
- En celdas : esta variación se utiliza para componer cada fila en diferentes celdas.
- Básico : esta variación se usa para crear tablas simples con mucho menos estilo para aumentar la legibilidad.
- Colapsar celda : esta variación se usa para colapsar el tamaño de celda de la tabla igual a su contenido.
- Recuento de columnas : esta variación permite al usuario definir el recuento de columnas de la tabla de antemano.
- Ancho de columna : esta variación se utiliza para establecer el ancho de la columna individual de la tabla.
- Colapso : esta variación se utiliza para crear tablas con un espacio igual al número de filas definidas.
- De colores : Esta variación se utiliza para dar diferentes colores a las mesas.
- Invertido : esta variación se utiliza para invertir el color de la tabla.
- Ordenable : esta variación permite al usuario ordenar el contenido de una tabla haciendo clic en su encabezado.
- Encabezado/Pie de página de ancho completo : esta variación se utiliza para definir el encabezado/pie de página de ancho completo de la tabla.
- Acolchado : esta variación se utiliza para aumentar el relleno de filas para que las filas sean más visibles.
- Compacto : esta variación se usa para reducir el relleno de filas para que se vean más filas en una sola página.
- Tamaño : esta variación se utiliza para crear tablas pequeñas o grandes.
Sintaxis :
<table class="Table Variations Class">
<tr>
<td>...</td>
</tr>
...
</table>
El siguiente ejemplo ilustra las diferentes variaciones de las tablas.
Ejemplo 1 : este ejemplo describe algunas de las variaciones de la tabla en la interfaz de usuario semántica.
HTML
<!DOCTYPE html> <html> <head> <title>Semantic UI Table 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> <u>Semantic UI Table Variations</u> </strong> <br /><br /> <strong> Colored, Celled, Large, Collapsing Report Data Table </strong> <table class="ui yellow celled large collapsing table"> <thead> <tr> <th>ID</th> <th>1</th> <th>2</th> <th>3</th> <th>4</th> </tr> </thead> <tbody> <tr> <td>Name</td> <td>Rahul</td> <td>Suraj</td> <td>Nitin</td> <td>Gourav</td> </tr> <tr> <td>Total Marks</td> <td>70 %</td> <td>82 %</td> <td>90 %</td> <td>30 %</td> </tr> <tr> <td >Status</td> <td class="positive">Pass</td> <td class="positive">Pass</td> <td class="positive">Pass</td> <td class="negative">Fail</td> </tr> </tbody> </table> </center> </body> </html>
Producción:
Variaciones de mesa
Ejemplo 2: este ejemplo describe algunas de las variaciones de la tabla en la interfaz de usuario semántica.
HTML
<!DOCTYPE html> <html> <head> <title>Semantic UI Table 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> <u>Semantic UI Table Variations</u> </strong> <br /><br /> <strong> Colored, Celled, Striped, Collapsing Table </strong> <table class="ui green celled collapsing striped 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>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>HashMap</td> <td>N/A</td> <td>O(1)</td> <td>O(1)</td> <td>O(1)</td> </tr> </tbody> </table> </center> </body> </html>
Producción:
Variaciones de mesa
Referencia: https://semantic-ui.com/collections/table.html
Publicación traducida automáticamente
Artículo escrito por namankedia y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA