• 20 hours
  • Easy

Free online content available in this course.

course.header.alt.is_certifying

Got it!

Last updated on 2/6/20

Tablas

Log in or subscribe for free to enjoy all this course has to offer!

Aunque las tablas son esenciales para organizar información, son algo complicadas de crear en HTML: es la razón por la que he esperado hasta ahora para hablar de ellas. Y lo son porque tendrás que incrustar etiquetas HTML nuevas en una instrucción específica.

Empezaremos creando tablas básicas y pasaremos poco a poco a aspectos más complicados: combinar celdas, división en secciones múltiples... También vamos a tratar las propiedades CSS de tabla, que usamos para personalizar su aspecto.

Una tabla simple

La primera etiqueta que te interesa es <table> </table>. Esta es la etiqueta que define el comienzo y final de una tabla.

Es una etiqueta de bloque, así que tendrá que situarse fuera de un párrafo. Ejemplo:

<p>Esto es un párrafo anterior a la tabla.</p>
<table>
<!-- Inserta aquí el contenido de la tabla -->
</table>
<p>Esto es un párrafo posterior a la tabla.</p>

Vale, ¿qué escribes dentro de la tabla?

Llegados aquí, prepárate para una nueva avalancha de etiquetas.
Comenzaremos con calma. Aquí tienes dos etiquetas nuevas muy importantes:

  • <tr> </tr>: define el comienzo y el final de una fila de la tabla.

  • <td> </td>: define el comienzo y el final del contenido de una celda.

En HTML, las tablas se crean fila por fila. En cada fila (<tr>) se especifican los contenidos de las celdas (<td>).
Una tabla se construye básicamente tal y como se muestra en la siguiente ilustración.

Una tabla, con celdas en línea
Una tabla, con celdas en línea

Contiene una etiqueta de fila (<tr>) que incluye un grupo de celdas (<td>).
Por ejemplo, si quiero crear una tabla con dos filas y tres celdas por fila (tres columnas, por tanto) tendré que escribir lo siguiente:

<table>
<tr>
<td>Carmen</td>
<td>33 years old</td>
<td>Spain</td>
</tr>
<tr>
<td>Michelle</td>
<td>26 years old</td>
<td>United States</td>
</tr>
</table>

El resultado es un poco lúgubre (siguiente ilustración).

Una tabla sin bordes
Una tabla sin bordes

¿Y a eso llamas una «tabla»?
¡El texto sigue y sigue y ni siquiera hay bordes!

Sí, una tabla sin CSS tiene una pinta bastante vacía. Y con toda la razón, porque añadir bordes es muy sencillo. ¡Ya conoces el código CSS correspondiente!

td /* Todas las celdas de la tabla... */
{
border: 1px solid black; /* tendrá un borde de 1 px */
}

La siguiente imagen muestra el resultado.

Cada celda tiene su propio borde
Cada celda tiene su propio borde

Hum, aún no está tan perfecto como querrías. De hecho, en realidad nos gustaría tan solo un borde entre dos celdas y aquí no es el caso.

Afortunadamente, hay una propiedad específica para tablas en CSS, border-collapse, que implica «pegar los bordes».
Esta propiedad puede tener dos valores:

  • collapse: los bordes se pegan, es el efecto que estamos buscando;

  • separate: los bordes se separarán (valor por defecto).

table
{
border-collapse: collapse; /* Los bordes de la tabla se pegarán (mejor aspecto) */
}
td
{
border: 1px solid black;
}

La siguiente imagen muestra el resultado obtenido.

Los bordes están pegados
Los bordes están pegados

¡Ahora está mucho mejor!

La fila de encabezado

Ahora que tenemos lo que buscábamos, vamos a añadir la fila de encabezado a la tabla. En el siguiente ejemplo, los encabezados son «Nombre», «Edad» y «País».
La fila de encabezado se ha creado con una etiqueta <tr> como hemos visto hasta ahora, pero las celdas que contiene están esta vez enmarcadas por etiquetas <th> y no <td>.

<table>
<tr>
<th>Nombre</th>
<th>Edad</th>
<th>País</th>
</tr>
<tr>
<td>Carmen</td>
<td>33 años</td>
<td>España</td>
</tr>
<tr>
<td>Michelle</td>
<td>26 años</td>
<td>Estados Unidos</td>
</tr>
</table>

La fila de encabezado es fácil de reconocer por dos razones:

  • las celdas contienen etiquetas <th>, en lugar de las habituales etiquetas <td>;

  • es la primera fila de la tabla (hay que remarcarlo, aunque pueda parecer muy obvio).

Ahora que tenemos lo que buscábamos, vamos a añadir la fila de encabezado a la tabla. En el siguiente ejemplo, los encabezados son «Nombre», «Edad» y «País».
La fila de encabezado se ha creado con una etiqueta <tr> como hemos visto hasta ahora, pero las celdas que contiene están esta vez enmarcadas por etiquetas <th> y no <td>.

<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>Country</th>
</tr>
<tr>
<td>Carmen</td>
<td>33 years old</td>
<td>Spain</td>
</tr>
<tr>
<td>Michelle</td>
<td>26 years old</td>
<td>United States</td>
</tr>
</table>

La fila de encabezado es fácil de reconocer por dos razones:

  • las celdas contienen etiquetas <th>, en lugar de las habituales etiquetas <td>;

  • es la primera fila de la tabla (hay que remarcarlo, aunque pueda parecer muy obvio).

Puesto que el nombre de la celda es ligeramente diferente en el encabezado, recuerda actualizar el código CSS para indicarle que aplique un borde en celdas normales y en el encabezado (siguiente imagen).

table
{
border-collapse: collapse;
}
td, th /* Asigna un borde a las etiquetas td Y th */
{
border: 1px solid black;
}
Una tabla con encabezado
Una tabla con encabezado

Como puedes comprobar, el navegador ha puesto el texto de las celdas de encabezado en negrita. Aunque es lo que hacen los navegadores normalmente, puedes, si quieres, cambiarlo mediante CSS: cambiar el color de fondo, la fuente, los bordes, etc. de las celdas de encabezado.

Título de tabla

Normalmente, todas las tablas deben tener título. El título informa rápidamente al visitante sobre el contenido de la tabla.
Nuestro ejemplo es tan solo una lista de gente.... pero ¿y qué? ¿Qué representa? Sin un título para la tabla, estamos un poco perdidos, como puedes ver.

¡Afortunadamente, existe <caption>!
Esta etiqueta se coloca al comienzo de la tabla, justo antes del encabezado. Es la etiqueta que contiene el título de la tabla (imagen siguiente)

<table>
<caption>Passengers of flight 377</caption>
<tr>
<th>Name</th>
<th>Age</th>
<th>Country</th>
</tr>
<tr>
<td>Carmen</td>
<td>33 years old</td>
<td>Spain</td>
</tr>
<tr>
<td>Michelle</td>
<td>26 years old</td>
<td>United States</td>
</tr>
</table>
Una tabla con título
Una tabla con título

¡Así está un poco más claro!

Ten en cuenta que puedes cambiar la posición del título mediante la propiedad de CSS caption-side, que puede tener hasta cuatro valores:

  • top: el título se situará encima de la tabla (por defecto);

  • bottom: el título se situará debajo de la tabla.

Una tabla estructurada

Hemos aprendido a hacer tablas pequeñas y simples. Aunque en la mayoría de los casos es suficiente con estas pequeñas tablas, puede que algunas veces necesites tablas más completas.

Vamos a descubrir dos técnicas especiales:

  • Las tablas grandes pueden dividirse en tres partes:

    • Encabezado;

    • Cuerpo de la tabla;

    • Pie de tabla.

  • En algunas tablas, puede que necesites combinar celdas.

Dividir una tabla grande

Si la tabla es bastante grande, lo mejor es dividirla en varias partes. Para esto, las etiquetas HTML se utilizan para definir los tres «campos» de la tabla:

  • el encabezado (al principio): se define con las etiquetas <thead></thead>;

  • el cuerpo (en el centro): se define con las etiquetas <tbody></tbody>;

  • el pie de tabla (al final): se define con las etiquetas <tfoot></tfoot>.

¿Qué deberías poner en el pie de tabla? Si es una tabla larga, normalmente copiarás los encabezados. Esto te permite ver a lo que se refiere cada columna, incluso al final de la tabla. Fundamentalmente, una tabla se divide en tres partes como en el ejemplo siguiente.

Una tabla dividida en varias partes
Una tabla dividida en varias partes

Es un poco confuso, pero es recomendable escribir las etiquetas en el orden siguiente:

  1. <thead>

  2. <tfoot>

  3. <tbody>

Por lo tanto, en el código, primero defines la parte superior, luego la parte final y, por último, la parte principal (<tbody>). No te preocupes, el navegador se ocupará de mostrar cada elemento en el lugar adecuado.

Por lo tanto, este es el código que tienes que introducir para hacer una tabla en tres partes:

<table>
<caption>Pasajeros del vuelo 377</caption>
<thead> <!-- Pasajeros del vuelo 377 -->
<tr>
<th>Nombre</th>
<th>Edad</th>
<th>País</th>
</tr>
</thead>
<tfoot> <!-- Pie de tabla -->
<tr>
<th>Nombre</th>
<th>Edad</th>
<th>País</th>
</tr>
</tfoot>
<tbody> <!-- Cuerpo de la tabla -->
<tr>
<td>Carmen</td>
<td>33 años</td>
<td>España</td>
</tr>
<tr>
<td>Michelle</td>
<td>26 años</td>
<td>Estados Unidos</td>
</tr>
<tr>
<td>François</td>
<td>43 años</td>
<td>Francia</td>
</tr>
<tr>
<td>Martine</td>
<td>34 años</td>
<td>Francia</td>
</tr>
<tr>
<td>Jonathan</td>
<td>13 años</td>
<td>Australia</td>
</tr>
<tr>
<td>Xu</td>
<td>19 años</td>
<td>China</td>
</tr>
</tbody>
</table>

3, 2, 1... ¡Combina!

En algunas tablas complejas, necesitarás «combinar» celdas.
¿Un ejemplo de combinar? El ejemplo de la tabla a continuación proporciona una lista de películas y su audiencia prevista.

Una tabla que contiene títulos de películas y su audiencia
Una tabla que contiene títulos de películas y su audiencia

En la última película, puedes ver que las celdas se han combinado en una. Es exactamente el efecto que estamos intentando conseguir.

Para combinar, se añade un atributo a la etiqueta <td>. Hay dos tipos de combinar:

    • Combinar columnas: es lo que acabamos de hacer en este ejemplo. Las celdas se combinan horizontalmente.

Se utiliza el atributo colspan.

    • Combinar filas: en este caso, dos filas se combinan en una. Las celdas se combinan verticalmente.

Se utiliza el atributo rowspan.

Como sabes, tienes que darle un valor al atributo (ya sea colspan o rowspan). Tienes que especificar el número de celdas que quieres combinar. En nuestro ejemplo, hemos combinado dos celdas: la celda de la columna «¿Para niños?» y la celda de la columna «¿Para adolescentes?». De esta manera, tenemos que introducir:

<td colspan="2">

…que significa: «Esta celda es la combinación de dos celdas». Puedes combinar varias celdas a la vez (tres, cuatro, cinco, etc. tantas como quieras).

Aquí está el código HTML que combina las celdas correspondientes a la tabla de arriba:

<table>
<tr>
<th>Título de la película</th>
<th>¿Para niños?</th>
<th>¿Para adolescentes?</th>
</tr>
<tr>
<td>La matanza de Texas</td>
<td >No, demasiado violenta</td>
<td></td>
</tr>
<tr>
<td>Los osos amorosos se van a esquiar</td>
<td>Sí, apropiada</td>
<td>No hay violencia suficiente...</td>
</tr>
<tr>
<td>Lucky Luke el intrépido</td>
<td colspan="2">¡Para toda la familia!</td>
</tr>
</table>

Nota importante: puedes ver que la línea 19 solo contiene dos celdas en lugar de tres (solo hay dos etiquetas <td>). Es bastante normal, ya que he combinado las últimas dos celdas. <td colspan="2"> especifica que esta celda ocupa el lugar de dos celdas a la vez.

¿Y cómo se procede para combinar verticalmente con rowspan?

Es un poco más complicado. En nuestro ejemplo, vamos a «revertir» el orden de nuestra tabla: en lugar de poner los títulos de las películas a la izquierda, los pondremos arriba.
Es otra forma de ver la tabla: en lugar de hacerla en altura, la hacemos en anchura.

En este caso colspan deja de ser adecuado y se debería usar rowspan:

<table>
<tr>
<th>Título de la película</th>
<td>La matanza de Texas</td>
<td>Los osos amorosos se van a esquiar</td>
<td>Lucky Luke el intrépido</td>
</tr>
<tr>
<th>¿Para niños?</th>
<td>No, demasiado violenta</td>
<td>Sí, apropiada</td>
<td rowspan="2">¡Para toda la familia!</td>
</tr>
<tr>
<th>¿Para adolescentes?</th>
<td></td>
<td>No hay violencia suficiente...</td>
</tr>
</table>

Resultado: ¡las celdas se combinan verticalmente (ejemplo debajo)!

Las celdas se han combinado verticalmente
Las celdas se han combinado verticalmente

En resumen

  • Una tabla se inserta con la etiqueta <table> y se define fila por fila utilizando la etiqueta <tr>.

  • Cada fila contiene celdas <td> (celdas normales) o<th> (celdas de encabezado).

  • El título de la tabla se define mediante <caption>.

  • Puedes añadir un borde a las celdas de la tabla mediante border. Para combinar bordes, se usa la propiedad de CSS border-collapse.

  • Una tabla puede dividirse en tres secciones: <thead> (encabezado), <tbody> (cuerpo) y <tfoot> (pie de la tabla). El uso de estas etiquetas no es obligatorio.

  • Puedes combinar celdas horizontalmente mediante el atributo colspan o verticalmente con rowspan. Tienes que especificar cuántas celdas tienen que combinarse.

Example of certificate of achievement
Example of certificate of achievement