viernes, 18 de julio de 2014

Como crear una tabla con HTML (table)


Bienvenid@s, hoy aprenderemos a crear tablas con HTML, para empezar tenemos que saber que la etiqueta principal para poder crear una tabla es "table" y que a esta etiqueta le preceden la etiqueta "tr" que nos servirá para incluir tantas filas como sean necesarias y por último las etiquetas "th" (restaltará el texto de la columna) o "td" (texto normal) para definir el valor de cada columna.

Supongamos que tenemos los siguiente datos que queremos agregar a una tabla HTML:

Nombre de las columnas (primera fila): Nombre - Apellidos - Edad

Y 3 filas: 

- Raúl   Rodríguez Fernández   23
- Fernando Torres Marente   50
- María Collado García   27

Lo primero que haremos es abrir las etiquetas "table" de apertura y de cierra:

<table>
</table>

Ok, ahora en el interior de estás etiquetas incluiremos las cuatros filas, la primera es para la identificación de cada una de las columnas y las tres restantes para incluir los datos de las personas:

<table>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
</table>

Bien, ahora que tenemos las filas incluidas empezaremos por la primera de ellas, para incluir el nombre de cada columna utilizaremos la etiqueta "th" que resaltará el texto:

<table>
<tr><th>Nombre</th><th>Apellidos</th><th>Edad</th></tr>
<tr></tr>
<tr></tr>
<tr></tr>
</table> 

A continuación incluiremos las filas con los datos de las personas:

<table>
<tr><th>Nombre</th><th>Apellidos</th><th>Edad</th></tr>
<tr><td>Raul</td><td>Rodríguez Fernández</td><td>23</td></tr>
<tr><td>Fernando</td><td>Torres Marente</td><td>50</td></tr>
<tr><td>María</td><td>Collado García</td><td>27</td></tr>
</table> 

Muy bien ahora guardamos nuestro documento HTML y lo vemos en el navegador:

Como crear una tabla con HTML (table)

Bien como podemos ver hemos creado una tabla HTML, también es importante conocer algunos atributos que podremos utilizar en la etiqueta "table", como son cellpadding (margen entre el borde de la celda y el contenido de la misma) cellspacing (margen entre celdas) y border (aplicar un borde), por ejemplo:

<table cellpadding="5" cellspacing="5" border="1">
<tr><th>Nombre</th><th>Apellidos</th><th>Edad</th></tr>
<tr><td>Raul</td><td>Rodríguez Fernández</td><td>23</td></tr>
<tr><td>Fernando</td><td>Torres Marente</td><td>50</td></tr>
<tr><td>María</td><td>Collado García</td><td>27</td></tr>
</table>

Como crear una tabla con HTML (table)