Tablas HTML (sin CSS)
Objetivos:
·
Comprender
la estructura básica de las tablas HTML.
·
Aprender
a crear tablas con encabezados y celdas de datos.
·
Explorar
las opciones de atributos para controlar el diseño de las tablas.
·
Implementar
tablas que se desplazan horizontalmente.
Introducción:
Las tablas HTML
son una herramienta fundamental para organizar y presentar información de forma
estructurada. Permiten mostrar datos en filas y columnas, creando una
presentación visual clara y legible.
Para qué
sirve una tabla en HTML:
·
Organización
de datos: Las tablas te permiten mostrar información de forma estructurada,
facilitando la comparación y análisis de datos.
·
Presentación
visual: Las tablas ayudan a crear
layouts limpios y legibles, mejorando la presentación de contenido.
·
Diseño
de layouts: Puedes usar tablas para crear layouts de página, aunque se
recomienda utilizar CSS para un diseño más flexible y moderno.
Estructura
Básica:
Las tablas se
construyen con las siguientes etiquetas:
<table>:
Define la tabla en su totalidad.
<tr>:
Define una fila de la tabla.
<th>:
Define una celda de encabezado de la tabla.
<td>:
Define una celda de datos de la tabla.
Ejemplo 1:
Tabla simple
<!DOCTYPE
html>
<html>
<head>
<title>Tabla Simple</title>
</head>
<body>
<table>
<tr>
<th>Nombre</th>
<th>Edad</th>
<th>Ciudad</th>
</tr>
<tr>
<td>Juan Pérez</td>
<td>25</td>
<td>Madrid</td>
</tr>
<tr>
<td>Ana García</td>
<td>30</td>
<td>Barcelona</td>
</tr>
</table>
</body>
</html>
CLIC AQUI PARA DESCARGAR CODIGO TABLA SIMPLE
Explicación:
En el ejemplo,
se define una tabla con tres columnas (Nombre, Edad, Ciudad).
La primera fila
contiene los encabezados de las columnas, definidos con <th>.
Las filas
siguientes contienen los datos, definidos con <td>.
Atributos de
las Tablas:
·
border:
Define el grosor del borde de la tabla. Ejemplo: border="1"
·
cellspacing:
Define el espacio entre las celdas. Ejemplo: cellspacing="10"
·
cellpadding:
Define el espacio entre el contenido de la celda y el borde. Ejemplo:
cellpadding="5"
·
width:
Define el ancho de la tabla. Ejemplo: width="500px"
·
height:
Define el alto de la tabla. Ejemplo: height="200px"
Ejemplo 2:
Tabla con atributos
<!DOCTYPE
html>
<html>
<head>
<title>Tabla con
Atributos</title>
</head>
<body>
<table
border="1" cellspacing="5" cellpadding="10"
width="500px">
<tr>
<th>Nombre</th>
<th>Edad</th>
<th>Ciudad</th>
</tr>
<tr>
<td>Juan Pérez</td>
<td>25</td>
<td>Madrid</td>
</tr>
<tr>
<td>Ana García</td>
<td>30</td>
<td>Barcelona</td>
</tr>
</table>
</body>
</html>
Tablas
Desplazables:
Para crear
tablas que se desplazan horizontalmente sin CSS, podemos utilizar el atributo
colspan en las celdas de la tabla. Este atributo permite que una celda abarque
varias columnas.
Ejemplo 3:
Tabla Desplazable
<!DOCTYPE
html>
<html>
<head>
<title>Tabla Desplazable</title>
</head>
<body>
<table>
<tr>
<th>Nombre</th>
<th>Edad</th>
<th>Ciudad</th>
<th>Teléfono</th>
<th>Email</th>
<th>Dirección</th>
</tr>
<tr>
<td>Juan Pérez</td>
<td>25</td>
<td>Madrid</td>
<td colspan="3">Información
personal</td>
</tr>
<tr>
<td>Ana García</td>
<td>30</td>
<td>Barcelona</td>
<td colspan="3">Información
personal</td>
</tr>
</table>
</body>
</html>
Explicación:
La celda de la
segunda fila con Información personal abarca 3 columnas
(colspan="3").
Esto crea un
efecto de desplazamiento horizontal, ya que el contenido que excede el ancho de
la tabla se desplaza hacia la derecha.
Conclusión:
Las tablas HTML
son una herramienta versátil para presentar información de forma organizada.
Combinando la estructura básica con los atributos adecuados, se pueden crear
tablas con diferentes estilos y funciones, incluso sin usar CSS.
Ejercicio:
Crea una tabla
que muestre una lista de productos con sus nombres, precios y descripciones.
