style
Diferenciación visual
title
th
Estilos para encabezados
font-weight, background-color
grid_on
td
Estilos para celdas de datos
padding, text-align
format_align_center
text-align
Alineación del texto
left, center, right
format_bold
font-weight
Grosor del texto
normal, bold, 600
th {
background-color: #576CBC;
color: white;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
td {
padding: 12px 15px;
transition: all 0.2s ease;
}
td.highlight {
background-color: rgba(87,108,188,0.3);
font-weight: 600;
}
background-color: #576CBC;
color: white;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
td {
padding: 12px 15px;
transition: all 0.2s ease;
}
td.highlight {
background-color: rgba(87,108,188,0.3);
font-weight: 600;
}
visibility
Estilo estándar
| Producto | Precio | Stock |
|---|---|---|
| Laptop | $999 | 15 |
| Monitor | $299 | 23 |
| Teclado | $79 | 42 |
visibility
Estilo alternativo
| Producto | Precio | Stock |
|---|---|---|
| Laptop | $999 | 15 |
| Monitor | $299 | 23 |
| Teclado | $79 | 42 |
lightbulb
Buenas prácticas
• Contraste claro entre encabezados y datos
• Espaciado consistente para mejor legibilidad
• Estilos hover para mejorar interactividad
• Espaciado consistente para mejor legibilidad
• Estilos hover para mejorar interactividad