Elementos de Tablas HTML

Elementos de las Tablas HTML

• Título de la tabla: Las tablas deben tener un título descriptivo. HTML permite usar la etiqueta <caption > para el título, lo cual lo centra automáticamente.

• Bordes de la tabla: El atributo BORDER en la etiqueta <table > crea bordes. BORDER="ancho" (en píxeles). El valor afecta solo a los bordes externos. BORDER="1" genera bordes exteriores e interiores con la misma anchura. Valores mayores a 1 dan sombreado al borde exterior.

• Cabeceras: Para facilitar la lectura, se pueden usar encabezados de filas y columnas (<th>). La etiqueta <th > es una opción para cabeceras, pero solo muestra los datos sin formato como el resto de las celdas.

• Tamaño de la tabla: El tamaño de una tabla se basa en el contenido. El atributo WIDTH permite especificar el ancho en píxeles o porcentaje. El ancho de la tabla se adaptará si el texto sobrepasa el ancho proporcionado.

• Justificación de la tabla: Por defecto, la tabla se justifica a la izquierda. ALIGN="center" en la etiqueta <table > centra la tabla.

• Espacio entre celdas:

  • CELLPADDING: Define el espacio entre el borde de la celda y el contenido (en píxeles). El valor por defecto es 1.
  • CELLSPACING: Define el espacio entre las celdas (en píxeles).

• Justificación del texto en las celdas: ALIGN y VALIGN en la etiqueta <td > controlan la justificación horizontal y vertical del texto dentro de las celdas individualmente. ALIGN="valor" ( left, center, right) y VALIGN="valor" ( top, middle, bottom, baseline).

• Celdas de diferentes tamaños:

  • WIDTH y HEIGHT: Permiten modificar el ancho y la altura de una celda individual (en píxeles o porcentaje) usando la etiqueta <td >

• Celdas irregulares: Utilizar COLSPAN y ROWSPAN dentro de <td > para combinar celdas en filas o columnas.

  • COLSPAN: Número de columnas que abarca la celda.
  • ROWSPAN: Número de filas que abarca la celda.

• Color de las celdas: BGCOLOR en la etiqueta <td > o <th > para establecer el color de la celda (representado en hexadecimal o nombre de color).

• Texto en una sola línea: NOWRAP en <td > para evitar el desplazamiento a nuevas líneas en una celda con ancho fijo y texto que sobrepasa ese ancho, expandiendo la celda para que el texto se muestre completo en una sola línea.

Este cuestionario aborda los elementos fundamentales de las tablas en HTML, incluidos títulos, bordes, cabeceras y tamaño. Aprenderás a utilizar etiquetas como <caption> y <th>, y conocerás cómo ajustar el ancho de la tabla según su contenido.