HTML: Tablas

Etiqueta <table>

Las tablas en HTML se crean mediante la composición de varias etiquetas.

La etiqueta <table> es la que define la tabla en sí.

Dentro, vamos a tener una división en dos partes: <thead> y <tbody>. La primera se utiliza para definir el encabezado de la tabla, y la segunda para definir el cuerpo de la tabla.

Para definir una fila en la tabla, utilizamos la etiqueta <tr>. Y para definir las celdas de la fila, utilizamos la etiqueta <td>, excepto cuando queremos definir una celda de encabezado, en cuyo caso utilizamos la etiqueta <th>.

Aquí un ejemplo:

<table>
  <thead>
    <tr>
      <th>Encabezado 1</th>
      <th>Encabezado 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Valor 1</td>
      <td>Valor 2</td>
    </tr>
  </tbody>
</table>

El resultado sería el siguiente:

miarchivo.html

Encabezado 1Encabezado 2
Valor 1Valor 2

Como ves, esto no parece mucho una tabla, pero es porque no tiene bordes.

Como estamos aprendiendo, te voy a enseñar una forma provisional de agregar bordes a la tabla. Pero me tienes que prometer, que cuando aprendas CSS más adelante, te acordarás de este momento y dejarás de darle bordes a las tablas de esta forma.

En esta forma provisional, vamos a agregar bordes utilizando el atributo border de la etiqueta <table>. Este atributo recibe un número entero que indica el ancho del borde.

<table border="1">
  <thead>
    <tr>
      <th>Encabezado 1</th>
      <th>Encabezado 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Valor 1</td>
      <td>Valor 2</td>
    </tr>
  </tbody>
</table>

El resultado sería algo parecido al siguiente:

miarchivo.html

Encabezado 1Encabezado 2
Valor 1Valor 2
👉

Dependiendo del navegador, el borde puede ser de diferente color y estilo. Pero no te preocupes, porque cuando aprendas CSS, podrás personalizar el estilo de los bordes de tus tablas como quieras.

Colspan y Rowspan

A veces, necesitamos que una celda ocupe más de una columna o fila. Para esto, podemos utilizar los atributos colspan y rowspan.

Colspan

El atributo colspan se utiliza para indicar cuántas columnas debe ocupar una celda.

<table>
  <thead>
    <tr>
      <th>Encabezado 1</th>
      <th>Encabezado 2</th>
      <th>Encabezado 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="2">Valor 1</td>
      <td>Valor 2</td>
    </tr>
  </tbody>
</table>

El resultado sería algo parecido al siguiente:

miarchivo.html

Encabezado 1Encabezado 2Encabezado 3

Valor 1

Valor 2

Como ves, la celda con el valor 1 ahora ocupa dos columnas.

Rowspan

El atributo rowspan se utiliza para indicar cuántas filas debe ocupar una celda.

<table>
  <thead>
    <tr>
      <th>Encabezado 1</th>
      <th>Encabezado 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="2">Valor 1</td>
      <td>Valor 2</td>
    </tr>
    <tr>
      <td>Valor 3</td>
    </tr>
  </tbody>
</table>

El resultado sería algo parecido al siguiente:

miarchivo.html

Encabezado 1Encabezado 2

Valor 1

Valor 2
Valor 3

Como ves la celda con el valor 1 ahora ocupa dos filas.

En los siguientes capítulos

En los siguientes capítulos, aprenderemos a utilizar imágenes y vídeos en HTML.

AnteriorSiguiente