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.