Tablas HTML

Organiza y visualiza la información de manera eficiente en tu web: Listas y Tablas HTML 5

ÍNDICE

• Listas
• Tablas y celdas
• Tablas HTML: Encabezado
• Tablas HTML: Título
• Tablas HTML: Unir celdas

Listas

En este tema sobre listas y tablas HTML 5 vamos a organizar nuestro contenido ya que es esencial de cara a una buena legibilidad de nuestra web. En primer lugar vamos a ver las listas. Por ejemplo:

<ol>
  <li>Juegos de Nintendo</li>
  <li>Juegos de SEGA</li>
  <li>Juegos de Microsoft</li>
  <li>Juegos de Sony</li>
</ol>

Las etiquetas «<li>» se corresponden con un elemento de la lista. Todos los elementos de la lista deberán estar encerradas en la etiqueta «<ol>«, de manera que si quisiéramos tener una nueva lista, tendríamos que establecer una nueva etiqueta de «<ol>» con su cláusula de apertura y de cierre.

Será el navegador quien numere nuestra lista.

Se ha establecido en el ejemplo etiquetas «<li>» con el texto «Juegos de…» a propósito, con la intención de hacer ver que en cada texto podremos establecer un enlace con el atributo «href«.

Para crear una lista con viñetas, en lugar de números, podremos realizar el mismo proceso descrito pero en lugar de la etiqueta <ol>, pondremos la etiqueta <ul>.

Tablas y celdas

La utilidad de las tablas es ordenar datos, sean estos de texto, imagen o video, formando columnas y filas. La etiqueta que utilizaremos para crear tablas sería <table>. Es de advertir que las tablas están perdiendo su uso debido a que no se adaptan a los diversos dispositivos electrónicos.

La etiqueta <tr> se corresponderá con el comienzo de una fila.

La etiqueta <td> se corresponderá con el comienzo de una celda.

Si expresamos con el atributo «border» y su valor «1», estaremos estableciendo el grosor del borde de la tabla y de la celda. Si estableciéramos el valor «0», no habría borde.

Un ejemplo sería el siguiente:

<table border="1">
  <tr> <td>PlayStation 2</td> <td>Más de 155 millones</td> </tr>
  <tr> <td>Nintendo DS</td> <td>154,02 millones</td> </tr>
  <tr> <td>Game Boy</td> <td>118,69 millones</td> </tr>
</table>

Tablas HTML: Encabezado

La etiqueta para establecer encabezados en una tabla sería <th> en lugar de la etiqueta <td>. Esto nos servirá para la primera fila o columna de una tabla, resaltándolo del resto, ya que el texto nos aparecerá centrado y en negrita. Siguiendo con el ejemplo anterior, estableceremos el código <tr> <th>Consolas</th> <th>Unidades vendidas</th> </tr>, de manera que nos quedará de la siguiente manera:

<table border="1">
  <tr> <th>Consolas</th> <th>Unidades vendidas</th> </tr>
  <tr> <td>PlayStation 2</td> <td>Más de 155 millones</td> </tr>
  <tr> <td>Nintendo DS</td> <td>154,02 millones</td> </tr>
  <tr> <td>Game Boy</td> <td>118,69 millones</td> </tr>
</table>

Tablas HTML: Título

Para establecer un título en una tabla tendremos que utilizar la etiqueta <caption>, que deberemos colocar justo después de la etiqueta de apertura de tablas. Nos quedaría del siguiente modo:

<table border="1">
  <caption>Las consolas más vendidas de la historia</caption>
  <tr> <th>Consolas</th> <th>Unidades vendidas</th> </tr>
  <tr> <td>PlayStation 2</td> <td>Más de 155 millones</td> </tr>
  <tr> <td>Nintendo DS</td> <td>154,02 millones</td> </tr>
  <tr> <td>Game Boy</td> <td>118,69 millones</td> </tr>
</table>

Tablas HTML: Unir celdas

Cuando realicemos tablas con muchas filas, ocurrirá que aquella tendrá el mismo tamaño que la fila con mayor número de celdas, por lo que si otra fila tuviese menor número de celdas, se generaría en esta celdas vacías, generando «suciedad» en nuestra tabla. Para evitar esto, tendremos que unir celdas en horizontal o vertical.

El atributo <colspan> tiene la utilidad de unir varias celdas dentro de una misma columna. Un ejemplo sería:

<td colspan="2">PlayStation 4</td>

El valor número «2» del atributo «colspan», nos indicaría que la celda «PlayStation 4» ocuparía dos celdas de una misma columna.

Si lo que queremos es unir dos celdas dentro de una fila, utilizaremos el atributo «rowspan» en lugar de «colspan» de la misma manera que en el ejemplo anterior.