TABLAS HTML.
Resultados de Aprendizaje:
✓ Mencionar las etiquetas para ordenar información dentro de tablas.
✓ Explicar en que casos se usas las tablas.
HTML: tablas básicas.
Es muy común tabular datos para ser presentados en una pagina web, para ello existen ciertas
etiquetas que permiten organizar y estructurar la información para mostrarla en formato de tabla.
Una tabla es una estructura de datos compuestos en formatos de filas y columnas (tabulación
de datos). Una tabla permite de forma rápida y fácil leer los valores que indican las conexiones
con otros datos. Por ejemplo, se puede usar una tabla para mostrar el horario de asignaciones
de un empleado o estudiante, también personas y sus edad o cuentas financieras de una
institución.
Las tablas están estructuradas en: encabezado, cuerpo y pie de tabla, tal y como se muestra a
continuación, para ello se utilizan las etiquetas thead, tbody y tfoot.
Encabezado
Cuerpo
Pie
Atributos:
✓ Width: para controlar el ancho de la tabla.
✓ Border: Define el borde de la tabla, aunque este debe manejarse con CSS
✓ Colspan: Indica el numero de columnas que ocupa una celda.
✓ Rowspan: Indica el numero de filas que ocupa una celda.
Listado de Elementos de tablas.
ETIQUETA. DESCRIPCIÓN.
<table> Define el inicio de una tabla.
<tr> Define una fila que incluye celdas.
<th> Define una celda cuyo objetivo es el titulo de una columna o fila.
<td> Define una celda.
<thead> Define el encabezado de la tabla.
<tbody> Define el cuerpo de una tabla.
<tfoot> Define el pie de una tabla.
<caption> Define el titulo de la tabla.
PRACTICA 3: TABLAS HTML
Resultados de aprendizaje:
• Presentar datos en forma de tabla.
• Aplicar títulos a las tablas HTML.
• Dividir una tabla en encabezado, cuerpo y pie de la tabla.
• Combinar celdas de diferentes filas y columnas.
En esta ocasión desarrollarás una página web que para tabular datos, siempre respetando la
estructura del contenido. Manos a la obra:
1. Dentro de la carpeta “ProyectosWeb”, crea otra carpeta con el nombre: “practica03”.
2. Dentro de la carpeta del proyecto crea un documento con el nombre “[Link]”
3. Se desea convertir la siguiente tabla en formato Web, note que la primer fila sería el
encabezado de la tabla, mientras que las otras filas serán el cuerpo.
Empresa Ventas Ganancias Activos
Apple USD 247,5 mil millones. USD 53,3 mil millones. USD 367,5 mil millones.
Samsung USD 224,6 mil millones. USD 41 mil millones. USD 293.1 mil millones
Microsoft USD 103,3 mil millones. USD 14,2 mil millones USD 245,5 mil millones
4. Dentro del archivo “[Link]” escriba el siguiente código:
5. Este será el resultado visualizado en el navegador:
Ejercicio Propuesto:
Desarrolle la siguiente tabla en formato HTML:
