TABLAS HTML

TABLAS EN HTML

ÍNDICE

Introducción

Creación de tablas

Estructura basica

Agrupaciones y expanciones

Alineación de contenido

Tablas anidadas

Conclusión

Referencias

INTRODUCCIÓN

Tablas

Las tablas son una forma útil de organizar y presentar datos en una página web. En esta presentación, se discutirán los diferentes aspectos de la creación de tablas, incluyendo la utilización de tablas, la creación de tablas en la ventana documento, la modificación de tablas y la selección de elementos de una tabla. También se discutirán temas como la alineación del contenido de una celda, la división y combinación de celdas, el anidamiento de tablas y el trabajo con formatos de tabla. Además, se explicará cómo ordenar tablas para que los datos sean más fáciles de leer y entender.

Creación de tablas

Una tabla en HTML es una estructura compuesta por celdas que se organizan en filas y columnas. Las tablas se utilizan para presentar datos de manera organizada y fácil de leer.

Estructura basica

Como todas las agrupaciones de datos, las tablas en HTML se organizan en filas y columnas que crean celdas. Las etiquetas básicas para crear una tabla HTML son:

• <table>: crea el elemento de tabla.
• <tr>: representa una fila.
• <th>: representa las celdas de encabezado.
• <td>: representa las celdas de datos.
• <caption>: representa un título descriptivo en una tabla.

Agrupaciones y expansiones

En primer lugar, para expandir una celda existen dos atributos importantes, que son: colspan: el atributo colspan permite expandir las celdas de datos o de encabezados al número de columnas que deseemos que ocupe. Por ejemplo, para hacer que una celda de datos ocupe cuatro columnas, debes escribirlo así: <td colspan= «4»> rowspan: el atributo rowspan permite expandir las celdas al número de filas que queremos que ocupe. Siguiendo el ejemplo anterior, si quieres que una celda de datos ocupe cuatro filas, lo escribirás así: <td rowspan=»4″>

Ejemplo

ROWSPAN

<TABLE BORDER> <TR> <TD>Item 1</TD> <TD ROWSPAN=2>Item 2</TD> <TD>Item 3</TD> </TR> <TR> <TD>Item 4</TD> <TD>Item 5</TD> </TR> </TABLE>

Ejemplo

COLSPAN

<TABLE BORDER> <TR> <TD>Item 1</TD> <TD COLSPAN=2>Item 2</TD> </TR> <TR> <TD>Item 3</TD> <TD>Item 4</TD> <TD>Item 5</TD> </TR> </TABLE>

Alineacion de contenido

De la misma manera en que podemos ajustar la disposición de las tablas, también tenemos la capacidad de alinear el contenido de las celdas o filas. La manera en que esto afecta varía dependiendo de si se trata de un único dato o de texto, pero la similitud en ambos casos es constante. El atributo empleado para lograr esta alineación es "align", y presenta una serie de valores posibles:

• left: Alinea los datos a la izquierda. Si es un texto lo justifica a la izquierda.
• center: Centra los datos. Si es texto lo justifica centrado. Los encabezados de las tablas tienen este valor por defecto.
• right: Es lo contrario de ‘left’. Alinea los datos a la derecha. Si es un texto lo justifica a la derecha.
• justify: Justifica el texto a derecha e izquierda .
• char: Alinea el texto alrededor de un carácter específico. En el caso de que el navegador no soportara alineación alrededor de un carácter, no se especifica el comportamiento.

Ejemplo

Código de Ejemplo aplicando las características vistas anteriormente (el valor “char” no funciona en todos los navegadores):

Tablas anidadas

Las tablas anidadas en HTML se refieren a la práctica de colocar una tabla dentro de otra tabla. Esto significa que en lugar de tener una única tabla con filas y celdas, puedes incluir una tabla completa como el contenido de una celda en otra tabla. Esta técnica puede ser útil en ciertas situaciones para estructurar y organizar información de manera más compleja.

Ejemplo

CONCLUSIÓN

La creación y manipulación de tablas en el desarrollo web son habilidades esenciales para organizar información en las páginas. A través de aspectos como creación, modificación, alineación y formateo del contenido, así como la capacidad de dividir y combinar celdas, se logra una presentación efectiva. Estos conocimientos mejoran la experiencia del usuario al ofrecer información clara y accesible, y son fundamentales para crear sitios web visualmente atractivos y funcionales.

Referencias

KeepCoding, R. (2022, December 15). ¿Cómo crear tablas en HTML? | KeepCoding Bootcamps. KeepCoding Bootcamps. https://keepcoding.io/blog/como-crear-tablas-en-html/ 82.- HTML – Tablas – Atributos Celdas: "align" (n.d.-b). https://bobuu.blogspot.com/2010/02/82-html-tablas-atributos-celdas.html Atributos para tablas HTML. (n.d.). DesarrolloWeb.com. https://desarrolloweb.com/articulos/629.php HTML - Code - Tablas avanzadas. (n.d.). https://3con14.biz/html/tablas/23-tablas-avanzadas.html