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

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

Print Friendly, PDF & Email
Mi chuleta de instrucciones css útiles para estilizar table de html
5 (100%) 1 voto

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

Francesc Ricart
hola@francescricart.com

Soy un ingeniero industrial a quién le apasiona aprender y enseñar. En el mundo del marketing online he encontrado una de mis pasiones. Ejerzo como docente ocupacional y privado para empresas. Y también hago consultoría web para PIMES, autónomos y otros emprendedores como yo. Ayudo a las empresas en cualquier temática relacionada con su presencia digital y herramientas web. Aunque mi especialidad es el posicionamiento en buscadores (SEO). A nivel de formación lo que más feliz me hace es que un alumno haga de mi pasión una forma de vida y le ayude a encontrar trabajo. A nivel de negocios ayudo a empresarios a desenvolverse con soltura en el mundo digital y les animo a hacer cada vez más cosas que nunca hubieran imaginado que ellos también podían hacer. En este camino les ayudo haciendo todo aquello dónde ellos no llegan y crecemos juntos. Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.