Crear una tabla en HTML

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.

El elemento TABLE

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

<table>
  <!-- Contenido de la tabla -->
</table>

El elemento TR para las filas

Ahora hay que conocer otro elemento que va dentro de la tabla. El elemento TR representa una fila.

Así que dentro del elemento TABLE tendremos tantos elementos TR como filas tenga nuestra tabla. Si tenemos 5 filas, ponemos 5 veces el elemento TR:

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

El elemento TD para las celdas

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.

Ejemplo de la primera fila

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

<tr>
  <td>Artículo</td>
  <td>Cantidad</td>
</tr>

Ejemplo de la segunda fila

Y la segunda fila de la siguiente forma:

<tr>
  <td>Zapatillas</td>
  <td>1.500</td>
</tr>

Código completo de la tabla

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:

<table>
  <tr>
    <td>Artículo</td>
    <td>Cantidad</td>
  </tr>
  <tr>
    <td>Zapatillas</td>
    <td>1.500</td>
  </tr>
  <tr>
    <td>Gorras</td>
    <td>12.200</td>
  </tr>
  <tr>
    <td>Pantalones</td>
    <td>3.800</td>
  </tr>
  <tr>
    <td>Camisetas</td>
    <td>7.100</td>
  </tr>
</table>

Resultado visual

La tabla se vería así:

Artículo	Cantidad
Zapatillas	1.500
Gorras	12.200
Pantalones	3.800
Camisetas	7.100

undefined Ya hemos visto que es sencillo crear una tabla en HTML. Solo necesitas recordar tres elementos: <table> para la tabla, <tr> para las filas y <td> para las celdas.