HTML
Avanzado
3.1
Tablas
y
Formularios
En
este
capítulo,
aprenderemos
a
utilizar
dos
elementos
muy
importantes
en
HTML:
1.
Las
tablas
,
que
permiten
organizar
información
en
filas
y
columnas,
como
si
fueran
hojas
de
cálculo.
2.
Los
formularios
,
que
permiten
a
los
usuarios
ingresar
datos
en
una
página
web,
como
nombres,
correos
electrónicos
o
mensajes.
Con
estos
conocimientos,
podrás
estructurar
mejor
la
información
y
permitir
la
interacción
con
los
usuarios.
Tablas
en
HTML
Las
tablas
son
una
forma
estructurada
de
mostrar
datos
en
la
web.
Se
crean
utilizando
la
etiqueta
<table>
,
y
dentro
de
esta
usamos
otras
etiquetas
para
organizar
la
información:
●
<tr>
(table
row)
define
una
fila
en
la
tabla.
●
<th>
(table
header)
define
una
celda
de
encabezado,
generalmente
usada
en
la
primera
fila.
●
<td>
(table
data)
define
una
celda
de
datos.
Ejemplo
de
una
tabla
básica
El
siguiente
código
muestra
una
tabla
con
nombres
y
edades:
<table
border="1">
<tr>
<th>Nombre</th>
<th>Edad</th>
</tr>
<tr>
<td>Juan</td>
<td>25</td>
</tr>
<tr>
<td>Ana</td>
<td>30</td>
</tr>
</table>
Explicación
del
código
1.
La
etiqueta
<table>
define
el
inicio
de
la
tabla.
2.
El
atributo
border="1"
agrega
un
borde
a
la
tabla,
lo
que
facilita
visualizar
su
estructura.
3.
La
primera
fila
(
<tr>
)
contiene
dos
encabezados
(
<th>
)
que
indican
los
títulos
de
las
columnas:
"Nombre"
y
"Edad".
4.
Las
siguientes
filas
contienen
datos,
cada
uno
dentro
de
una
celda
<td>
.
Ejercicio
1:
Crear
una
tabla
con
datos
personales
Crea
una
tabla
con
tres
columnas:
●
Nombre
●
Edad
●
País
Debes
agregar
al
menos
tres
filas
con
datos
de
ejemplo.
Formularios
en
HTML
Los
formularios
permiten
que
los
usuarios
ingresen
datos
y
los
envíen
al
servidor.
Se
definen
con
la
etiqueta
<form>
,
y
dentro
de
ella
se
incluyen
diferentes
elementos
para
capturar
la
información
del
usuario.
Algunos
de
los
elementos
más
comunes
dentro
de
un
formulario
son:
●
<input>
:
Permite
ingresar
datos,
como
texto,
números
o
correos
electrónicos.
●
<label>
:
Proporciona
una
descripción
para
cada
campo
del
formulario.
●
<button>
o
<input
type="submit">
:
Permite
enviar
los
datos
ingresados.
Ejemplo
de
un
formulario
básico
El
siguiente
código
muestra
un
formulario
simple
que
solicita
nombre,
edad
y
correo
electrónico:
<form>
<label
for="nombre">Nombre:</label>
<input
type="text"
id="nombre"
name="nombre"><br><br>
<label
for="edad">Edad:</label>
<input
type="number"
id="edad"
name="edad"><br><br>
<label
for="email">Correo:</label>
<input
type="email"
id="email"
name="email"><br><br>
<button
type="submit">Enviar</button>
</form>
Explicación
del
código
1.
La
etiqueta
<form>
define
el
inicio
del
formulario.
2.
Dentro
del
formulario,
cada
campo
de
entrada
(
<input>
)
tiene
un
atributo
type
que
indica
el
tipo
de
dato
que
se
espera:
○
text
:
Para
ingresar
texto.
○
number
:
Para
ingresar
números.
○
email
:
Para
ingresar
direcciones
de
correo
electrónico.
3.
Cada
campo
tiene
un
<label>
asociado
que
describe
su
propósito.
El
atributo
for
en
la
etiqueta
<label>
debe
coincidir
con
el
id
del
<input>
correspondiente.
4.
Se
utiliza
un
botón
de
tipo
submit
(
<button
type="submit">
)
para
enviar
la
información
ingresada.
Ejercicio
2:
Crear
un
formulario
de
registro
Crea
un
formulario
con
los
siguientes
campos:
●
Nombre
(tipo
texto).
●
Edad
(tipo
número).
●
Ciudad
(tipo
texto).
●
Género
(selección
entre
masculino,
femenino
u
otro).
●
Botón
de
envío
.
Con
estos
conocimientos,
ahora
puedes
crear
tablas
y
formularios
en
HTML
para
organizar
información
y
permitir
la
interacción
con
los
usuarios.
En
el
siguiente
capítulo,
veremos
cómo
mejorar
el
diseño
de
nuestras
páginas
con
CSS.
Contactanos
Español
Sin
Fronteras
Gmail
espanolsinfronteras1@gmail.com
Español
Sin
Fronteras
-
Recursos
Educativos
Gratuitos
Instagram
@espanol_sin_fronteras_org