Instrucciones para tablas en HTML

Instrucciones para tablas en HTML

Instrucciones para tablas en HTML

Las tablas en HTML son la mejor opción para mostrar datos ordenados en renglones y columnas. Cada bloque delimitado dentro de la tabla es conocido como celda.

Su construcción se basa en tres pasos:

  1. Definir la tabla (table)
  2. Declarar un renglón (tr)
  3. Agregar en el renglón cada columna que deseamos colocar (th o td)

Se repiten los pasos dos y tres por cada renglón que se desee en la tabla.

Instrucciones para tablas en HTML

En los ejemplos, las tablas tienen estilos en cascada para hacer mas notorias las celdas.

Tabla (Table)
<table></table>

Elemento en bloque Elemento en bloque

Delimita el área de la tabla.

Renglón de tabla (Table row)
<tr></tr>

Elemento en bloque Elemento en bloque

Coloca un renglón en la tabla.

Dato de tabla (Table data)
<td></td>

Elemento en bloque Elemento en bloque

Muestra un dato en la tabla en forma de celda (una columna en el renglón).

See the Pen tabla by Miguel Méndez (@codigo-web) on CodePen.0

Encabezado de tabla (Table header)
<th></th>

Elemento en bloque Elemento en bloque

Como la instrucción td, establece una celda en la tabla, solo que th incorpora como encabezado su contenido. Por omisión el Navegador lo muestra en negrita y centrado.

See the Pen tablaEncabezado by Miguel Méndez (@codigo-web) on CodePen.0

Estructura correcta de una tabla

Para estructurar de forma correcta una tabla, es necesario que cada uno de los renglones que la componen contengan el mismo número de celdas.

estructura Tabla HTML
Misma cantidad de celdas en cada renglón

Atributos de tablas

Es posible que las celdas de una tabla ocupen más espacio:

  • Dos o más celdas en horizontal
  • Dos o más celdas en vertical
  • Dos o más celdas tanto en vertical como en horizontal.

Para lograrlo, se utilizan los atributos colspanrowspan en las instrucciones td o th.

colspan

Se utiliza para ampliar una celda en horizontal, añadiendo a su espacio el que ocuparía(n) otra(s) celda(s) a su derecha.

Por cada columna que se desee ampliar la celda, se añade 1 al valor del atributo colspan (que por omisión es 1) y se debe eliminar el siguiente bloque <td></td> que se encuentre a su derecha.

Ejemplo:

La siguiente tabla es de 3×3, tiene tres renglones y tres columnas.

En el primer renglón, cada una de las tres celdas ocupa un solo espacio.

En el segundo renglón, la primera celda ocupa el espacio de dos, se emplea el atributo colspan=”2″ y se omite el elemento <td></td>, que representaría a la segunda celda del renglón.

En el tercer renglón, la primera celda ocupa el espacio de tres, por lo que se emplea el atributo colspan=”3″ y es el único elemento <td></td> en el renglón.

See the Pen tablaColspan by Miguel Méndez (@codigo-web) on CodePen.0

rowspan

Se utiliza para ampliar una celda en vertical, añadiendo a su espacio el que ocuparía(n) otra(s) celda(s) hacia abajo.

Por cada renglón que se desee ampliar la celda, se añade 1 al valor del atributo rowspan (que por omisión es 1) y se debe eliminar el siguiente bloque <td></td> que se encuentre en el siguiente renglón.

Ejemplo:

La siguiente tabla es de 3×3, tiene tres renglones y tres columnas.

En la primera columna, cada una de las tres celdas ocupa un solo espacio.

En la segunda columna, la primera celda ocupa el espacio de dos, se emplea el atributo rowspan=”2″ y se omite el elemento <td></td>, que representaría a la segunda celda de la columna.

En la tercera columna, la primera celda ocupa el espacio de tres, por lo que se emplea el atributo rowspan=”3″ y es el único elemento <td></td> en la columna.

See the Pen tablaRowspan by Miguel Méndez (@codigo-web) on CodePen.0

Ejemplo con las instrucciones para tablas en HTML

See the Pen tablaColspanRowspan by Miguel Méndez (@codigo-web) on CodePen.0

Desarrollador web desde 1994 e instructor de Diplomados de Web y Web Avanzado en diversas instituciones públicas y privadas.
¿Te fue útil el artículo? Por favor ayúdanos a difundirlo compartiéndolo a través de tus redes sociales.

Autor: Miguel Méndez

Desarrollador web desde 1994 e instructor de Diplomados de Web y Web Avanzado en diversas instituciones públicas y privadas.

Déjanos un comentario

Sé el primero en comentar

avatar
wpDiscuz