Tablas en HTML

 En esta entrada voy a enseñar cómo se crean las tablas en HTML (se puede utilizar en blogger en la vista en HTML) y a darlas un aspecto más agradable a la vista.

Creación

Para crear una tabla, se utiliza la etiqueta <table>

<table>

    <tr>

        <th></th>

    </tr>

    <tr>

        <td></td>

    </tr>

</table>

La etiqueta <tr> significa nueva fila de la tabla.

Las etiquetas <th> y <td> significan nueva columna, con la diferencia de que th es el título de esa columna y td se utiliza para los elementos pertenecientes a esa columna.

Hay que prestar especial atención a que ponemos en cada tr el mismo número de elementos (ya sea de th o de td), ya que no se define en ningún momento el número de columnas y podría estropearnos la estética como tabla.

Formato

Si os fijáis bien en los dos ejemplos anteriores, por defecto las tablas el navegador las pinta sin los bordes a los que estamos acostumbrados a ver en todas partes.

Esto puede ser útil si queremos organizar los diferentes apartados en un formulario, por ejemplo. Pero no si queremos que el usuario que visualiza la página sepa que esto es una tabla.

Para esto, hay que añadir CSS a nuestra página, ya sea con las etiquetas <style> o bien en una hoja de estilos a parte.

<style>

    table, th, td{

        border: 1px solid black;

        border-collapse: collapse;

    }

</style>

De esta forma estamos indicando que el navegador pinte el borde a la tabla, a las filas con el título de columna y al resto de las filas.

Con el collapse estamos indicando que queremos las líneas más finas. En el ejemplo os dejo comentada la parte del collapse para que veáis la diferencia, pero os invito a que lo comentéis y descomentéis para ver la diferencia. 

*Los comentarios en CSS se hacen poniendo // delante del código que queremos omitir al navegador sin borrarlo).

Con CSS se pueden dar estilos mejores a una tabla que no sea sólo las líneas. Por aquí os dejo algunos ejemplos.