Tablas

Uso

Copias el snippet HTML y ten en cuenta:

1. El elemento con la clase nkn-table es el contenedor padre, debe de estar en la etiqueta <table>
2. El usuario elige si desea tener o no la etiqueta <caption>.

Ejemplo

Snippet HTML

<table class="nkn-table nkn-basic"> <caption>Ranking de los lenguajes de programación</caption> <thead> <tr> <th>Posición</th> <th>Lenguaje de Programación</th> <th>Rating (%)</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Java</td> <td>17.358%</td> </tr> <tr> <td>2</td> <td>C</td> <td>16.766%</td> </tr> <tr> <td>3</td> <td>Python</td> <td>9.345%</td> </tr> </tbody> </table>

Uso

Copias el snippet HTML y ten en cuenta:

1. El elemento <table> con la clases nkn-table nkn-vertical es el contenedor padre.
2. El encabezado de la tabla <thead> se esconde en pantallas pequeñas.
3. La celda <td> del cuerpo de la tabla (<tbody>) debe de tener la siguiente estructura:
   
   <td data-title = "titulo de la columna" > ... </td>

   Donde data-title = “titulo de la columna”, sirve para visualizar el título de la columna en pantallas pequeñas.

Ejemplo

Reduce el tamaño de tu pantalla para ver el estilo responsivo.

Snippet HTML

<table class="nkn-table nkn-vertical"> <caption>Ranking de los lenguajes de programación</caption> <thead> <tr> <th>Posición</th> <th>Lenguaje de Programación</th> <th>Rating (%)</th> </tr> </thead> <tbody> <tr> <td data-title="Posición">1</td> <td data-title="Lenguaje de Programación">Java</td> <td data-title="Rating (%)">17.358%</td> </tr> <tr> <td data-title="Posición">2</td> <td data-title="Lenguaje de Programación">C</td> <td data-title="Rating (%)">16.766%</td> </tr> <tr> <td data-title="Posición">3</td> <td data-title="Lenguaje de Programación">Python</td> <td data-title="Rating (%)">9.345%</td> </tr> </tbody> </table>

Uso

Copias el snippet HTML y ten en cuenta:

1. El elemento <table> con las clases nkn-table nkn-reduces es el contenedor padre.
2. Para indicar que celdas desea visualizar, se usa las clases:
   • nkn-title: Campo principal o de mayor relevancia, usada sólo en una (1) celda.
   • nkn-description: Descripción y/o información secundaria complementaria al título, puede ser usada en más de una (1) celda.
   • nkn-right-top: información adicional que se quiera mostrar, debe ser corta, también pueden ser iconos.

Ejemplo

Reduce el tamaño de tu pantalla para ver el estilo responsivo.

Snippet HTML

<table class="nkn-table nkn-reduced"> <caption>Ranking de los lenguajes de programación</caption> <thead> <tr> <th>Posición</th> <th>Lenguaje de Programación</th> <th>Rating (%)</th> </tr> </thead> <tbody> <tr> <td class="nkn-title">1</td> <td class="nkn-description">Java</td> <td class="nkn-right-top">17.358%</td> </tr> <tr> <td class="nkn-title">2</td> <td class="nkn-description">C</td> <td class="nkn-right-top">16.766%</td> </tr> <tr> <td class="nkn-title">3</td> <td class="nkn-description">Python</td> <td class="nkn-right-top">9.345%</td> </tr> </tbody> </table>