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.
La variación de apilamiento de tablas de la interfaz de usuario semántica especifica cómo esa tabla apila el contenido de la tabla de manera receptiva.
Clases de variación de apilamiento de tabla de interfaz de usuario semántica:
- apilable: esta clase apila la tabla de forma receptiva.
- unstackable: esta clase divide cada fila de nuestra tabla en celdas separadas.
Sintaxis:
<table class="ui stackable table">
<tr>
<td></td>
...
</tr>
...
</table>
Ejemplo 1: este es un ejemplo básico que ilustra la diferencia entre una tabla no apilable normal y una tabla apilable en dispositivos de tamaño de tableta creados con la interfaz de usuario semántica.
HTML
<!DOCTYPE html> <html> <head> <title>Semantic-UI Table Stacking 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 Stacking Variation</strong> </center> <b>Normal Table</b> <table class="ui unstackable table"> <thead> <tr> <th>Names</th> <th>Maths Marks</th> <th>Physics Marks</th> <th>Chemistry Marks</th> </tr> </thead> <tbody> <tr> <td>Ravi</td> <td>48</td> <td>84</td> <td>63</td> </tr> <tr> <td>Srihita</td> <td>55</td> <td>97</td> <td>74</td> </tr> </tbody> </table> <b>Stackable Table</b> <table class="ui tablet stackable table"> <thead> <tr> <th>Names</th> <th>Maths Marks</th> <th>Physics Marks</th> <th>Chemistry Marks</th> </tr> </thead> <tbody> <tr> <td>Ravi</td> <td>48</td> <td>84</td> <td>63</td> </tr> <tr> <td>Srihita</td> <td>55</td> <td>97</td> <td>74</td> </tr> </tbody> </table> </body> </html>
Producción:
Variación de apilamiento de tabla de interfaz de usuario semántica
Ejemplo 2: este es un ejemplo básico que ilustra una variación de tabla apilable coloreada (invertida) en dispositivos de tamaño de tableta creados con la interfaz de usuario semántica.
HTML
<!DOCTYPE html> <html> <head> <title>Semantic-UI Table Stacking 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 Stacking Variation</strong> </center> <table class="ui tablet inverted blue stackable table"> <thead> <tr> <th>Names</th> <th>Maths Marks</th> <th>Physics Marks</th> <th>Chemistry Marks</th> </tr> </thead> <tbody> <tr> <td>Ravi</td> <td>48</td> <td>84</td> <td>63</td> </tr> <tr> <td>Srihita</td> <td>55</td> <td>97</td> <td>74</td> </tr> </tbody> </table> </body> </html>
Producción:
Variación de apilamiento de tabla de interfaz de usuario semántica
Referencia: https://semantic-ui.com/collections/table.html#stacking
Publicación traducida automáticamente
Artículo escrito por tpraneeth2001 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA