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!
Deja una respuesta