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

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

[vc_custom_heading text=»El código html» font_container=»tag:h3|text_align:left» use_theme_fonts=»yes»]

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

[vc_custom_heading text=»El código css» font_container=»tag:h3|text_align:left» use_theme_fonts=»yes»]

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.

¡Hola!

Querido lector,

¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!