Crear una tabla en HTML

23/May/2012 HTML , , 5 Comentarios

Las tablas son elementos que nos sirven en HTML para mostrar datos organizados. Si trabajas con programas de ofimática estarás familiarizado con su funcionamiento y las utilidades que puede tener una tabla.

Por ejemplo podemos tener una tabla que nos muestre los artículos que tenemos en un almacén. Algo parecido a:

El elemento HTML que preresenta a una tabla es TABLE. Con lo cual TABLE será el elemento padre a la hora de crear una tabla en HTML.

  1. <table>...</table>

Ahora hay que conocer otros dos elementos que hay dentro de la tabla. El primero es TR. Este elemento representa una fila. Así que dentro del elemento TABLE tendremos tantos elementos TR como filas tenga nuestra tabla. Nosotros como tenemos 5 filas, pues ponemos 5 veces el elemento TR:

  1. <tr>...</tr>
  2. <tr>...</tr>
  3. <tr>...</tr>
  4. <tr>...</tr>
  5. <tr>...</tr>
  6. </table>

Una vez que tenemos las filas definidas mediante el elemento TR vamos a poner las celdas. Las celdas se definen mediante el elemento TD. Dentro del elemento TD irá el contenido de la celda en cuestión.

De esta manera nuestra primera fila se representaría de la siguiente forma:

  1. <td>Art&iacute;culo</td>
  2. <td>Cantidad</td>
  3. </tr>

Y la segunda fila de la siguiente forma:

  1. <td>Zapatillas</td>
  2. <td>1.500</td>
  3. </tr>

Como vemos la tabla en HTML es una secuencia de elementos TR representando las filas y TD representando las celdas.

El código completo de nuestra tabla en HTML será el siguiente:

  1. <tr><td>Art&iacute;culo</td><td>Cantidad</td></tr>
  2. <tr><td>Zapatillas</td><td>1.500</td></tr>
  3. <tr><td>Gorras</td><td>12.200</td></tr>
  4. <tr><td>Pantalones</td><td>3.800</td></tr>
  5. <tr><td>Camisetas</td><td>7.100</td></tr>
  6. </table>

Ya hemos visto que es sencillo crear una tabla en HTML

Vídeos sobre HTML


5 comentarios en “Crear una tabla en HTML”

Víctor Cuervo

Víctor Cuervo

@Rufus,
Mucha gente sigue apostando por ese tipo de modelado.
Apuntado para hablar sobre tablas en HTML5. Creo que bastante interesante.

Víctor Cuervo

Rufus

Sobre la importancia de usarlas para mostrar tablas de datos, y no para ordenar elementos dentro de la página.

Aunque parezca mentira, aún queda gente que maqueta con tablas y celdas…

Ya que estas puedes hablar de las tablas en HTML5

Víctor Cuervo

Víctor Cuervo

@Rufus,

Claro. Mi idea era irlo haciendo por pasos. Darle estilo, crear cabeceras, pies de tabla,… Los iré publicando esta semana. 😀

¿Sobre qué más cosas hablaríais de las tablas en HTML?

Víctor Cuervo

Rufus

¿De los table header no vas a hablar? En el dibujo, las celdas azules tendrían que ser , en lugar de .

http://www.w3schools.com/tags/tag_th.asp

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*