Replicar un formulario simple con tabla

`06` Replicar un formulario simple con tabla

📝 Instrucciones:

Usando una tabla HTML, replica exactamente este mismo formulario:

Formulario HTML

Características del formulario a replicar:

El formulario de la imagen contiene:

Título centrado: “Tablas HTML”
Campos organizados en dos columnas dentro de una tabla:
- Columna izquierda: etiquetas (<label>) como “Nombre”, “Apellidos”, “Dirección”, etc.
- Columna derecha: campos de entrada (<input>) de tipo texto
Botón de envío: Un botón “Enviar” que probablemente está centrado o en una fila aparte

Requisitos técnicos:

Usa una tabla (<table>) como estructura principal para organizar los campos
Cada fila de la tabla (<td>) debe contener dos celdas (<td> o <th>):
- Una celda para la etiqueta del campo
- Otra celda para el input correspondiente
Usa la etiqueta <style> dentro del <head> para aplicar estilos CSS
Asegúrate de que el formulario se vea IDÉNTICO a la imagen de referencia

💡 Pistas:

Sobre tablas HTML:

Una tabla básica necesita: <table>, (opcional), , (filas) y (celdas) o (celdas de encabezado)
Las celdas <td> se expanden automáticamente para alinear su contenido
Si quieres que las etiquetas estén alineadas a la derecha, puedes usar CSS: text-align: right

Sobre estilos CSS necesarios:

Para centrar el título: text-align: center
Para dar bordes a la tabla: border: 1px solid black
Para separar las celdas: padding: 8px
Para que los inputs ocupen todo el ancho de su celda: width: 100%

Sobre la estructura del formulario:

<form>
  <table>
    <tr>
      <td><label>Nombre:</label></td>
      <td><input type="text" name="nombre"></td>
    </tr>
    <!-- Más filas -->
  </table>
</form>

✅ Lista de verificación:

Antes de dar por terminado el ejercicio, comprueba:

¿El título “Tablas HTML” está centrado y fuera de la tabla?
¿Todos los campos están dentro de una tabla HTML?
¿Cada fila tiene su etiqueta (label) a la izquierda y su input a la derecha?
¿Los inputs son de tipo text (a menos que la imagen muestre otro tipo)?
¿El botón “Enviar” está dentro de la tabla o inmediatamente debajo?
¿El formulario se ve visualmente igual a la imagen de referencia?

🔍 Pista adicional:

Si la imagen muestra un borde alrededor de la tabla, puedes agregar este estilo:

table, td, th {
  border: 1px solid black;
  border-collapse: collapse;
}

¡Manos a la obra! 🚀