Agregue CSS a Jupyter Notebook usando Pandas

En Jupyter Notebook, cuando imprimimos la tabla de salida de nuestros datos, muestra una tabla muy básica que contiene los datos. Pero, ¿y si queremos personalizar este estilo predeterminado? En este artículo, veremos cómo podemos agregar estilos a nuestra tabla de datos de salida.

Así es como se ve una tabla de datos predeterminada en Jupyter Notebook:

import pandas as pd
  
  
df = pd.DataFrame({'A':[1, 2, 3, 4, 5, 6, 7, 8], 
                   'B':[1, 2, 3, 4, 5, 6, 7, 8], 
                   'C':[1, 2, 3, 4, 5, 6, 7, 8],
                   'D':[1, 2, 3, 4, 5, 6, 7, 8]})
  
df.head()

Producción:

Ahora intentemos cambiar el estilo. Podemos hacerlo con el método set_table_styles del módulo pandas.

df.style.set_table_styles()

Ahora necesitamos pasar los ‘selectores’ y los ‘props’ como argumento a este método, es decir, debemos seleccionar las etiquetas CSS de la tabla (p. ej.: th, td, etc.) y cambiar los valores de sus propiedades (p. ej., background, color de fuente, familia de fuentes, etc.).

Entonces, si necesitamos cambiar la familia de fuentes del texto en la sección de datos de la tabla, podemos hacerlo así:

df.style.set_table_styles(
  
[{'selector': 'td',
  'props': [('font-family', 'Sans-serif')]},
])

 
Intentemos agregar más cambios y ver el resultado.

df = pd.DataFrame({'A':[1, 2, 3, 4, 5, 6, 7, 8], 
                   'B':[1, 2, 3, 4, 5, 6, 7, 8], 
                   'C':[1, 2, 3, 4, 5, 6, 7, 8],
                   'D':[1, 2, 3, 4, 5, 6, 7, 8],
                   'E':[1, 2, 3, 4, 5, 6, 7, 8]})
  
  
df.style.set_table_styles(
[
 {'selector': 'th',
  'props': [('background', '# 606060'), 
            ('color', 'white'), ]},
 {'selector': 'td',
  'props': [('color', 'blue')]},
])

Producción:

También podemos ocultar la columna de índice por método: hide_index()

df.style.set_table_styles(
[
 {'selector': 'th',
  'props': [('background', '# 606060'), 
            ('color', 'yellow'), ]},
 {'selector': 'td',
  'props': [('color', 'red')]},
]
).hide_index()

Producción:

Publicación traducida automáticamente

Artículo escrito por argha_c14 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *