Mi chuleta de instrucciones css útiles para estilizar table de html

Mi chuleta de instrucciones css útiles para estilizar table de html

5
(3)

Es cierto que las tablas han visto tiempos mejores.

Pero no seré yo quien te diga si debes elegir entre la propiedad display:table; de la que se habla en esta entrada o la etiqueta <table> de toda la vida.

Si hay que tabular contenido entonces su uso es el adecuado.

En este escrito muestro un ejemplo de tabla estilizada y comparto mi chuleta de instrucciones css útiles para estilizar tablas.

Mi chuleta de instrucciones css para estilizar tablas

Existen propiedades css que son exclusivas para estilizar tablas.

A continuación las detallo junto con sus valores más comunes.


border-collapse:collapse | separate;
border-spacing: distanciaVertical  distanciaHorizontal;
caption-side: top | bottom;
empty-cells: show | hide;

text-align:left | center | right;
vertical-align: top | middle | bottom;

/*pseudoclases útiles*/
tr:nth-child(even) td /*td pares*/
tr:nth-child(odd)  td /*td impares*/

Ejemplo común de tabla estilizada con css

Se ha preparado una tabla de 4 columnas y 4 filas.

Hay una fila de encabezado y 3 con datos.

Se muestra como se visualiza la tabla antes de aplicar estilos (para que sea bien se ha aplicado  un border de 1p, sólido y negro a todas las celdas y cabeceras.

La idea es estilizarla pintando las filas impares de color gris #eee.

Veamos por separado el código css y el código html

Punto de partida. Tabla no estilizada.
Punto de partida. Tabla no estilizada.

El código html

<table>
	<thead>
		<tr>
			<th>Nombres</th>
			<th>Edad</th>
			<th>Trabaja</th>
			<th>Localidad</th>
		</tr>
	</thead>
	<tbody>	
		<tr>
			<td>Maria</td>
			<td>24</td>
			<td>No</td>
			<td>Tarragona</td>
		</tr>
		<tr>
			<td>Manolo</td>
			<td>42</td>
			<td>No</td>
			<td>Zaragoza</td>
		</tr>
	</tbody>
		<tr>
			<td>Cristina</td>
			<td>35</td>
			<td>Si</td>
			<td>Mérida</td>
		</tr>
</table>

El código css

table{border-collapse:collapse;}
th,tr,td{
	border:1px solid #000;
	width:150px;
	height:45px;
	vertical-align:middle;
	text-align:center;
}
th{
	color:#fff;
	background-color: #252525;
}

tr:nth-child(odd) td{
	background-color:#eee;
}

En todas las celdas se han colapsado los bordes.

Se ha determinado el ancho y altura de cada celda y se ha organizado el contenido. Para centrar verticalmente y horizontalmente el contenido se han usado las propiedades text-align (horizontal)  y vertical-align (vertical).

El selector tr:nth-child(odd) td significa todas las celdas que se encuentren anidadas en algún momento dentro de cualquier fila tr impar.

Resultado final tabla html tras aplicar css
Resultado final tras aplicar estilos

¡Hola!

Querido lector,

¡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!

Puntuación media 5 / 5. Votos: 3

Todavía no hay votos. Sé el primero en valorar la entrada.

Si te ha gustado este contenido...

¡Sígueme en las redes!

Vaya, parece que hay puntos a corregir

¿Me ayudas a mejorar?

¿Dónde he fallado?

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

No Comments

Post A Comment