En este artículo, aprenderemos cómo mostrar datos de tablas en formato de rayas y trazos. Para mostrar los datos de la tabla en formato de franjas y trazos, configure data-role=”table” y data-mode=”reflow” usando las clases table-stripe , table-stroke , ui-responsive .
Modo de reflujo: la clase ui-responsive se usa para crear tablas receptivas. Los datos en las tablas receptivas presentados están en dos modos, redistribución y cambio de columna . En esta sesión, nos centraremos en el modo de reflujo.
El modo de reflujo reformatea las columnas de la tabla en anchos estrechos, de modo que cada fila de la tabla se muestra como un bloque de pares de datos. La información de las tablas con formato de datos más complejo o extenso que no necesita comparación entre filas de datos se puede presentar en modo redistribuido.
Sintaxis:
<table data-role=”table” data-mode=”reflow” class=”ui-responsive”>
Las clases table-stripe , table-stroke darán a las filas de una tabla un efecto de rayas de cebra. Las filas alternas estarán en dos tonos diferentes.
Enlace CDN:
<enlace rel=”hoja de estilo” href=”https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css”>
<script src=”https://code. jquery.com/jquery-1.11.3.min.js”></script>
<script src=”https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min. js”></script>
Acercarse:
- En primer lugar, agregue los enlaces jQuery y jQuery Mobile CDN anteriores al script o descárguelos a su máquina local.
- Cree una etiqueta de tabla y establezca el atributo de función de datos en «tabla» y el atributo de modo de datos en «reflujo».
- Establezca las clases de etiqueta de tabla en table-stripe , table-stroke , ui-responsive .
- La clase ui-responsive hará que la tabla responda.
- Table-stripe y table-stroke dan el efecto de rayas de cebra a la mesa.
- Cree los nombres de las columnas usando la etiqueta thead y la etiqueta th .
- Los datos de la tabla se agregan usando la etiqueta del cuerpo .
- Las filas se crean usando la etiqueta tr .
Ejemplo:
HTML
<html> <head> <link rel="stylesheet" href= "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src= "https://code.jquery.com/jquery-1.11.3.min.js"> </script> <script src= "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"> </script> </head> <body> <h2 style="color:green">GeeksforGeeks</h2> <strong>Table data in stripes and strokes</strong> <br> <table data-role="table" data-mode="reflow" class="table-stripe table-stroke ui-responsive"> <thead> <tr> <th>Course Name</th> <th>Instructor</th> <th>Course fee</th> </tr> </thead> <tbody> <tr> <td>D.S.A</td> <td>Mohan</td> <td>4500</td> </tr> <tr> <td>D.B.M.S</td> <td>Rahul</td> <td>2500</td> </tr> <tr> <td>O.S</td> <td>Rohan</td> <td>3500</td> </tr> <tr> <td>C.Networks</td> <td>Sandeep</td> <td>2500</td> </tr> </tbody> </table> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por pulamolusaimohan y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA