Cómo crear tablas básicas en HTML (Tutorial básico)

html

Las tablas son componentes que nos ayudan a mostrar grandes volúmenes de información en una sola página de forma ordenada; el uso de estas se hace necesario siempre que desarrollamos páginas y aplicaciones Web. Inclusive están presentes en aplicaciones de escritorio y Software para dispositivos móviles, hoy veremos cómo crear tablas básicas en HTML. Un artículo que permitirá a principiantes conocer los pormenores de las tablas, etiquetas y diversas formas de uso, sin más empecemos.

Cómo crear tablas básicas en HTML

Lo primero que debemos tener presente es que necesitamos indicar al navegador que deseamos escribir una tabla, esto lo hacemos con las etiquetas:

<table></table>

Todo el código situado entre estas dos etiquetas, hará parte del contenido de nuestra tabla.

Construyendo nuestra primera tabla en HTML

Cómo crear tablas básicas en HTML

El resultado del código HTML anterior sería:

Sin duda nuestra tabla se muestra muy pequeña, en vista que no hemos asignado valores en su interior, sin embargo veamos la definición de cada etiqueta.

Etiqueta tr: Útil para definir una fila en la tabla.

Etiqueta td: Sirve para incluir datos en la tabla.

Nota: La propiedad border, sirve para hacer visible en su valor 1 los bordes de la tabla, o invisibles en valor 0.

Ahora veamos un ejemplo de nuestra tabla con datos incorporados; supongamos que deseamos hacer un listado de ciudades con sus capitales.

Cómo crear tablas básicas en HTML

Si revisamos nuestra página, el código anterior nos daría como resultado:

How to use table in html

Sin embargo nuestro listado carece de algo muy importante que incorporan las tablas o listados que normalmente conocemos. Y es el encabezado, veamos como añadir uno.

Añadiendo un encabezado a una tabla HTML

etiqueta table en html

Cómo podemos observar en la imagen anterior, para añadir un encabezado también usamos tr inicialmente; pero dentro de estas en lugar de usar td, utilizamos th para indicar que es nuestro encabezado, por lo tanto tendríamos el siguiente resultado.

Usar tablas en html fácil

De esta manera podemos crear tablas básicas con los registros necesarios, para este ejemplo solo usamos 3 filas. Pero sin duda en tus páginas podrás incluir muchas más columnas y registros.

En artículos posteriores trataremos la personalización de las tablas en HTML, con el fin de garantizar un aspecto profesional de estas para presentar información.