20 Mar 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
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.
¡Hola!
Querido lector,
¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!
No Comments