Tienda » BLOG » Listas y tablas con HTML5
Listas y tablas con HTML5

Listas y tablas con HTML5

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

ÍNDICE

Listas

En este tema sobre Listas y tablas con HTML5 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>

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>

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>

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.

Vídeo

(*) NOTA: En breve publicaremos un vídeo. En futuros post aprenderemos a generar código con IA.

COMPARTE:

2 comentarios en “Listas y tablas con HTML5”

  1. Pingback: Imágenes con HTML5

  2. Pingback: Otras etiquetas con HTML5

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Carrito de compra
Scroll al inicio