Crear Filas y Columnas en Tablas HTML: Guía Completa

Las tablas HTML son una herramienta esencial para organizar y presentar datos de forma estructurada en páginas web. Permiten crear filas y columnas que representan datos relacionados, ofreciendo una visualización clara y legible. En este artículo, exploraremos a fondo cómo crear filas y columnas en tablas HTML, desde los conceptos básicos hasta técnicas avanzadas para personalizar su apariencia.

Estructura Básica de una Tabla HTML

La estructura fundamental de una tabla HTML se basa en tres etiquetas principales:

• <table>: Define la tabla en sí.
• <tr>: Representa una fila de la tabla.
• <td>: Define una celda individual dentro de una fila.

Para crear una tabla básica, se necesita una etiqueta <table> que contenga una o más etiquetas <tr>, y cada fila tendrá una o más etiquetas <td> para definir las celdas que contienen los datos.

Creación de Filas y Columnas

Para crear filas y columnas en una tabla HTML, se debe seguir una estructura jerárquica. La etiqueta <table> abarca la tabla completa. Dentro de ella, se añaden etiquetas <tr> para cada fila que se desea crear. Dentro de cada <tr>, se añaden las etiquetas <td> para definir las celdas de la fila.

«`html

«`

En este ejemplo, se crea una tabla con dos filas y dos columnas. Cada celda contiene texto que representa los datos que se mostrarán en la tabla.

Cabeceras de Tabla

Las cabeceras de las tablas se utilizan para identificar las columnas y proporcionar un encabezado para cada columna. Se definen utilizando la etiqueta <th>.

«`html

«`

En este caso, se crea una tabla con dos columnas encabezadas por «Nombre» y «Apellido», respectivamente. Las celdas con la etiqueta <th> se muestran en negrita y generalmente se alinean al centro.

Combinación de Celdas

Es posible combinar varias celdas en una sola utilizando los atributos colspan y rowspan. El atributo colspan permite combinar celdas horizontalmente, mientras que rowspan las combina verticalmente.

«`html

«`

En este ejemplo, las dos celdas de la primera fila se combinan horizontalmente con colspan="2" para crear una cabecera que abarca las dos columnas.

Estilos para Tablas HTML

Las tablas HTML se pueden personalizar mediante estilos CSS para controlar su apariencia. Se pueden aplicar estilos a la tabla completa, a filas individuales, a celdas o incluso a elementos específicos dentro de las celdas.

«`html

«`

Este código CSS define estilos para una tabla HTML. El estilo border-collapse elimina los espacios entre los bordes de las celdas, width: 100% hace que la tabla ocupe todo el ancho disponible, y los estilos para th y td definen bordes, relleno, alineación del texto y color de fondo.

Tablas Complejas con JavaScript

Para crear tablas más complejas o dinámicas, se puede utilizar JavaScript. JavaScript permite generar contenido HTML de forma dinámica, manipular los elementos de la tabla y agregar interactividad.

javascript
const table = document.getElementById("myTable");
const row = table.insertRow();
const cell1 = row.insertCell();
const cell2 = row.insertCell();
cell1.textContent = "Nueva Fila";
cell2.textContent = "Nuevo Dato";


Este código JavaScript agrega una nueva fila a la tabla con el ID «myTable». Se crea una nueva fila (row), se añaden dos celdas (cell1, cell2) y se les asigna contenido de texto.

Ejemplo Completo de Tablas HTML

«`html

«`

Este código HTML crea una tabla con una cabecera que abarca dos columnas y cuatro filas que contienen información sobre un estudiante. Se aplican estilos CSS para dar formato a la tabla y sus elementos.

Conclusión

Las tablas HTML son una herramienta esencial para organizar y presentar datos en páginas web. Su estructura básica se basa en las etiquetas <table>, <tr> y <td>, y se pueden personalizar mediante estilos CSS para mejorar su apariencia. Con el uso de JavaScript, se pueden crear tablas dinámicas e interactivas. La capacidad de crear table rows html es fundamental para la construcción de sitios web informativos y funcionales.