14 Abr Ejercicio css dar formato a una tabla de precios con display:table
En este ejercicio vamos a practicar como dar formato a una tabla de datos sin usar las etiquetas clásicas de tablas html.
Existen algunas razones para no usar tablas html y si hacerlo con css.
- Es más fácil conseguir que la tabla sea responsive.
- Es más fácil que todas las filas tengan la misma altura.
- Incluso cuando se reduce el ancho disponible las filas siguen teniendo la misma altura y los textos quedan centrados.
Para poder hacer este ejercicio son interesantes estas lecturas.
- El bueno, el feo y el malo. Estrategia de pricing.
- Como aplicar estilos display:table a una no tabla.
Entremos en materia.
Enunciado
Un consultor web quiere ofrecer sus tarifas en su página web.
Para ello ha pensado en 3 servicios: uno feo (demasiado pelado en comparación a los otros servicios) , uno bueno (el que quiere que le contraten) y otro malo (el que no quiere que le contraten).
Ha realizado un primer borrador en excel de su tabla de servicios y ahora quiere transformarlo a lenguaje web.
¿Puedes ayudarle?
Solución del ejercicio
Es importante que tengas en cuenta que no existe un único modo de hacerlo.
A continuación se propone una posible solución.
¿Como queda el documento html?
<!DOCTYPE html>
<html>
<head>
<title>Ejercicio tabla de precios</title>
<meta charset="utf-8"/>
<meta name="author" content="francesc ricart"/>
<style>
/* Escribe aquí el css */
</style>
</head>
<body>
<div class="table">
<div class="theader">
<div class="tr">
<div class="th"></div>
<div class="th verde">Plan básico</div>
<div class="th rojo">Plan económico</div>
<div class="th azul">Plan plus</div>
</div>
</div>
<div class="tbody">
<div class="tr">
<div class="th">Publicaciones mensuales</div>
<div class="td">1</div>
<div class="td">2</div>
<div class="td">4</div>
</div>
<div class="tr">
<div class="th">Asistencia intermediarios</div>
<div class="td">No</div>
<div class="td">No</div>
<div class="td">Si</div>
</div>
<div class="tr">
<div class="th">Respuestas</div>
<div class="td">Email</div>
<div class="td">Email</div>
<div class="td">Teamviewer</div>
</div>
<div class="tr">
<div class="th">Envío de newsletters</div>
<div class="td">0</div>
<div class="td">1</div>
<div class="td">1</div>
</div>
<div class="tr">
<div class="th">Minitareas</div>
<div class="td">0</div>
<div class="td">0</div>
<div class="td">1</div>
</div>
<div class="tr">
<div class="th">¿Quieres añadir el alojamiento web?</div>
<div class="td">1</div>
<div class="td">1</div>
<div class="td">1</div>
</div>
</div>
<div class="tfooter">
<div class="tr">
<div class="td"></div>
<div class="td">0€</div>
<div class="td">0€</div>
<div class="td">0€</div>
</div>
</div>
</div>
</body>
</html>¿Como queda el css?
.table{display:table;}
.theader{
display:table-header-group;
font-size:1.2em;
}
.tbody{display:table-row-group;}
.tfooter{
display:table-footer-group;
font-weight:bold;
font-size:1.2em;
}
.tr{
display:table-row;
}
.td,.th{
display:table-cell;
width:150px;
height:32px;
padding:4px;
vertical-align: middle;
}
.td{
text-align:center;
}
.th{
font-weight:bold;
text-align:right;
}
.theader .th{
text-align:center;
}
.tr .td:nth-child(3){
font-size:1.2em;
border-left:1px solid #000;
border-right:1px solid #000;
}
.tfooter .tr .td:nth-child(3){
font-size:2em;
}
.verde{color:green;}
.rojo{color:red;}
.azul{color:blue;}Si juntamos todas las piezas resolvemos el ejercicio.
Como observaciones:
- Se ha usado un interesante selector :nth-child(3) para seleccionar el tercer hijo de todas las filas y que coincide con el plan económico.
- El plan económico tiene un tamaño de fuente mayor para hacerlo resaltar.
¡Hola!
Querido lector,
Deseo que te haya sido de utilidad.
Este ejercicio es en realidad el embrión de una sección que próximamente programaré con javascript en mi propia web.
¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!
¿Te ha gustado esta publicación?
¡Valora sobre 5 estrellas esta publicación!
Todavía no hay votos. Sé el primero en valorar la entrada.
Vaya, parece que hay puntos a corregir
¿Me ayudas a mejorar?
¡Gracias por tu feedback!
Entradas relacionadas:
Existen distintas formas de indicar los colores que queremos dar a los elementos de un documento. Básicamente necesitamos dominar los colores RGB, RGBa y Hexadecimal. Se muestran varios ejemplos de us...
En CSS existen una serie de normas que dan prioridad a las instrucciones que afectan a cada etiqueta html en función de su importancia, grado de especificidad y orden de aparición. Veámoslo.
Existen 3 mecanismos para mezclar html y css. Veamos como se hace.
¿Problemas para memorizar colores hexadecimales? Vemos un ejemplo de como usar las variables de css3 para definir los colores de un proyecto web.
En las fases iniciales de aprender html, css y javascript nos vemos abrumados por tanta información. Con la entrada de hoy hacemos un resumen sobre como comentar código en los principales lenguajes de...
Ejercicio css en el que se muestra como mostrar logotipos sencillos mediante el uso de paletas de colores adecuadas y tipografías de google fonts.
No hay comentarios