Fundamentos de las Tablas en HTML
Las tablas en HTML se utilizan principalmente para presentar datos tabulares de manera estructurada. La arquitectura básica de una tabla se construye mediante la etiqueta contenedora <table>, la cual agrupa filas (<tr>) y celdas. Para definir los encabezados de columna se emplea <th>, mientras que los datos regulares se insetran en celdas <td>. Adicionalmente, la etiqueta <caption> proporciona un título descriptivo para la tabla, y es una buena práctica semántica agrupar el contenido mediante <thead>, <tbody> y <tfoot>.
Estilizado y Dimensionamiento Moderno
Históricamente, atributos como border, width, height, bgcolor y background se utilizaban directamente en las etiquetas HTML para controlar la apariencia. En el desarrollo web contemporáneo, estos atributos están obsoletos y han sido reemplazados por CSS, lo que permite una separación clara entre la estrucutra y la presentación.
<style>
.data-table {
width: 100%;
max-width: 500px;
border-collapse: collapse;
background-color: #f4f7f6;
font-family: Arial, sans-serif;
}
.data-table caption {
font-size: 1.2em;
font-weight: bold;
margin-bottom: 10px;
color: #333;
}
.data-table th, .data-table td {
border: 1px solid #ddd;
padding: 12px;
text-align: left;
}
.data-table th {
background-color: #e2e8f0;
}
</style>
<table class="data-table">
<caption>Registro de Estudiantes de Ingeniería</caption>
<thead>
<tr>
<th>Identificador</th>
<th>Nombre Completo</th>
<th>Especialidad</th>
</tr>
</thead>
<tbody>
<tr>
<td>A-101</td>
<td>Elena Rodríguez</td>
<td>Desarrollo Web</td>
</tr>
<tr>
<td>A-102</td>
<td>Mateo Silva</td>
<td>Ciencia de Datos</td>
</tr>
</tbody>
</table>
Fusión de Celdas y Anidamiento
Para crear estructuras de datos más complejas, las celdas pueden expandirse horizontalmente utilizando el atributo colspan o verticalmente con rowspan. Aunque el anidamiento de tablas (colocar una <table> dentro de un <td>) es técnicamente válido para datos jerárquicos complejos, debe evitarse para propósitos de diseño de página, optando en su lugar por CSS Grid o Flexbox.
Construcción de Formularios Web
Los formularios son el mecanismo principal para la interacción del usuario y la recolección de datos. El elemento <form> actúa como contenedor y define cómo se procesan los datos mediante atributos clave:
action: La URL de destino donde se envían los datos.method: El protocolo HTTP utilizado (generalmente GET o POST).enctype: La codificación de los datos, crucial cuando se adjuntan archivos (multipart/form-data).
Agrupación y Elementos de Entrada
Para mejorar la accesibilidad y la organización visual, los campos relacionados se agrupan mediante <fieldset>, con un <legend> que actúa como título del grupo.
Los elementos de entrada (<input>) varían según su atributo type:
- Texto y Contraseña:
textpara entrada estándar ypasswordpara ofuscar caracteres. - Selección:
radiopara opciones mutuamente excluyentes (mismo atributoname) ycheckboxpara selecciones múltiples. - Acciones:
submitpara enviar el formulario,resetpara restaurar valores predeterminados ybuttonpara scripts personalizados. - Archivos y Ocultos:
filepermite la carga de documentos, mientras quehiddentransmite datos no visibles para el usuario.
Para textos extensos se utiliza <textarea>, y para listas desplegables se emplea <select> con opciones <option>.
Implementación Práctica: Formulario de Registro
A continuación, se presenta una implementacción moderna y semántica de un formulario de registro, integrando diversos elementos de entrada y utilizando CSS para la disposición en lugar de tablas de diseño obsoletas.
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Portal de Registro de Usuarios</title>
<style>
.registration-container {
max-width: 650px;
margin: 40px auto;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
fieldset {
border: 2px solid #4a90e2;
border-radius: 8px;
padding: 25px;
background-color: #fafafa;
}
legend {
font-size: 1.4em;
font-weight: bold;
color: #4a90e2;
padding: 0 10px;
}
.form-row {
display: flex;
align-items: center;
margin-bottom: 15px;
}
.form-label {
flex: 0 0 140px;
text-align: right;
padding-right: 15px;
font-weight: 500;
color: #555;
}
.form-control {
flex: 1;
padding: 8px 12px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 1em;
}
.inline-options label {
margin-right: 15px;
cursor: pointer;
}
.btn-group {
text-align: center;
margin-top: 20px;
}
.btn {
padding: 10px 25px;
font-size: 1em;
border: none;
border-radius: 4px;
cursor: pointer;
margin: 0 10px;
}
.btn-primary { background-color: #4a90e2; color: white; }
.btn-secondary { background-color: #e0e0e0; color: #333; }
</style>
</head>
<body>
<div class="registration-container">
<form action="/api/v1/users" method="POST" enctype="multipart/form-data" id="userRegistrationForm">
<fieldset>
<legend>Creación de Nueva Cuenta</legend>
<div class="form-row">
<label for="alias" class="form-label">Nombre de usuario:</label>
<input type="text" id="alias" name="user_alias" class="form-control" required>
</div>
<div class="form-row">
<label for="secret" class="form-label">Contraseña:</label>
<input type="password" id="secret" name="user_secret" class="form-control" required>
</div>
<div class="form-row">
<label for="confirm-secret" class="form-label">Confirmar:</label>
<input type="password" id="confirm-secret" name="confirm_user_secret" class="form-control" required>
</div>
<div class="form-row">
<span class="form-label">Identidad:</span>
<div class="inline-options">
<label><input type="radio" name="identity" value="developer" checked> Desarrollador</label>
<label><input type="radio" name="identity" value="designer"> Diseñador</label>
<label><input type="radio" name="identity" value="manager"> Gestor</label>
</div>
</div>
<div class="form-row">
<label for="join-month" class="form-label">Mes de ingreso:</label>
<select id="join-month" name="joining_month" class="form-control">
<option value="01">Enero</option>
<option value="02">Febrero</option>
<option value="03">Marzo</option>
<option value="04">Abril</option>
<option value="05">Mayo</option>
<option value="06">Junio</option>
</select>
</div>
<div class="form-row">
<span class="form-label">Habilidades:</span>
<div class="inline-options">
<label><input type="checkbox" name="skills" value="frontend"> Frontend</label>
<label><input type="checkbox" name="skills" value="backend"> Backend</label>
<label><input type="checkbox" name="skills" value="devops"> DevOps</label>
</div>
</div>
<div class="form-row">
<label for="avatar-upload" class="form-label">Foto de perfil:</label>
<input type="file" id="avatar-upload" name="profile_avatar" class="form-control" accept="image/png, image/jpeg">
</div>
<div class="btn-group">
<button type="submit" class="btn btn-primary">Crear Cuenta</button>
<button type="reset" class="btn btn-secondary">Restablecer</button>
</div>
</fieldset>
</form>
</div>
</body>
</html>