Ejercicio css dar formato a una tabla de precios con display:table

14 Abr Ejercicio css dar formato a una tabla de precios con display:table

Publicado a las 23:08h en Ejercicios CSS, Tutorial CSS. Aprende a decidir como se visualizarán tus páginas web. por Francesc Ricart 0 Comentarios

Valora esta entrada

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.

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?

enunciado ejercicio css — Enunciado de tabla de precios para dar estilos css mediante display:table;

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!

Entradas relacionadas:

Cuidado con los tutoriales pdf obsoletos sobre html, css y javascript
En internet se encuentra mucho material de gran calidad para aprender lenguajes como html, css, y javascript. ¿Pero todos los pdf sirven?

Resumen de propiedades css para hacer tablas con display:table
El uso de tablas html no está muy bien visto si no es estrictamente para tabular contenidos. Pero también lo podemos hacer mediante display:table de c...

Estilizar una lista usando iconos
Si no te atrae la idea de usar list-style-image para decorar listas, entonces puedes hacerlo con ::before y el uso de iconos de fontawesome.

Como hacer un dropcap (letra capital) con css
La letra capital es un recurso medieval que no es de mi devoción pero que me sirve para darte un par de ejemplos prácticos de uso del pseudoselector :...

Ejemplo de efecto parallax mediante propiedades de background
Como generar un parallax en una página web. Incluye ejemplo.

Como terminar la última línea con puntos suspensivos "..." en CSS
Se muestran dos soluciones simples que usan exclusivamente CSS para el conocido reto de terminar un contenido con 3 puntos suspensivos. "..."

Francesc Ricart

hola@francescricart.com

Aprender y enseñar. Enseñar y aprender. En el ámbito docente soy docente ocupacional. En el ámbito profesional consultor web. Ofrezco servicios de mejora continua y mantenimiento web. ¿Qué quieres aprender hoy? Encontraréis más acerca de mi en la página sobre mi