Se tiene el siguiente código incompleto:
Indique las etiquetas que debemos poner en la línea 7 y en la línea 11 para obtener el siguiente resultado:
En el desarrollo web, organizar la información de manera clara es fundamental. Aunque hoy en día existen herramientas avanzadas de diseño, las tablas de HTML siguen siendo el estándar de oro para presentar datos estructurados como registros de usuarios, inventarios o comparativas de productos.
Hoy vamos a resolver un desafío común que suele confundir a quienes dan sus primeros pasos en el código: la jerarquía de las filas.
Esta cuestión estaba contenida en el ejercicio práctico de las oposiciones a profesor de Tecnología en Castilla y León el año 2025.
El Desafío: El Código Incompleto
Se nos presenta un documento HTML donde la tabla no se visualiza correctamente porque faltan los contenedores de las celdas. El fragmento es el siguiente:
HTML
<table style="width:100%" border="2px">
<> <td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
<> </table>
La Solución: La Etiqueta <tr>
Para que las celdas de datos (<td>) se organicen en una línea horizontal, deben estar contenidas dentro de una fila de tabla. La etiqueta encargada de esto es <tr> (del inglés Table Row).
La resolución del ejercicio es:
- En la línea 7: Debemos colocar la etiqueta de apertura
<tr>. - En la línea 11: Debemos colocar la etiqueta de cierre
</tr>.
¿Por qué es vital esta estructura?
El navegador interpreta las tablas por niveles jerárquicos. Sin el contenedor <tr>, el motor de renderizado no sabe que las celdas de «Nombre» y «País» pertenecen a la misma entidad lógica. Al añadir estas etiquetas, logramos que el resultado sea una fila perfectamente alineada con sus bordes definidos.
Conclusión
Dominar la anatomía de una tabla (table > tr > td) es un paso básico pero crucial para cualquier desarrollador web. Asegurarte de cerrar correctamente cada fila garantiza que tu sitio sea legible y profesional en cualquier navegador.
¡Sigue practicando estos fundamentos y pronto estarás creando arquitecturas web mucho más complejas!