Las tablas en html, aunque para muchas personas podrían considerarse en desuso, a mi parecer siguen siendo geniales al momento de mostrar información desde una base de datos, su estructura básica es la siguiente:
<table>
<tr>
<th>Nombre</th>
<th>Apellido</th>
</tr>
<tr>
<td>Homer</td>
<td>Simpson</td>
</tr>
</table>
Obviamente el resultado no es nada estético, por lo que en esta ocasión nos daremos a la tarea de dar algunos consejos sobre cómo dar una mejor presentación a nuestras tablas por medio de CSS, para empezar, podríamos utilizar lo siguiente para indicar que el borde será color azul:
<style type="text/css">
table,th,td
{
border:1px solid blue;
}
</style>
Como podrán observar dice literalmente “blue”, afortunadamente para nosotros, eso lo podemos cambiar por nuestro tono favorito en hexadecimal, para no tener que estar atados a solo unos cuantos colores.
En el estilo anteriormente mostrado, nos aparecen un par de líneas como separación, para ajustarlo a que solo se muestre una, podemos utilizar el siguiente código con el uso del “border-collapse:collapse”
<style type="text/css">
table
{
border-collapse:collapse;
}
table, td, th
{
border:1px solid blue;
}
</style>
Siguiendo nuestro ejemplo, con la propiedad “width” podremos controlar ya sea por medio de un porcentaje o pixeles, el ancho que tendrá el elemento y mediante “height” podremos establecer la altura de nuestra tabla, esto se logrará de la siguiente manera:
<style type="text/css">
table
{
width:100%;
}
th
{
height:50px;
}
</style>
La forma correcta de alinear el texto, ya sea en el centro, a la derecha o a la izquierda, es mediante el atributo “text-align”, en el ejemplo se muestra de cómo se tendría que alinear al centro:
<style type="text/css">
td
{
text-align:center;
}
</style>
Finalmente teniendo en cuenta los atributos básicos, podemos ponerle color a los elementos de la tabla, mediante el atributo “background-color” se definirá cuál será el color del fondo a diferencia de “color”, que nos mostrará de qué color será el texto, en el ejemplo muestro como se tendría que hacer para tener un fondo azul con letras blancas:
<style type="text/css">
table, td, th
{
border:1px solid blue;
}
th
{
background-color:blue;
color:white;
}
</style>
Aunque solo hemos presentado lo básico, con eso se tiene más que suficiente para tener un buen diseño.