Taller de
Programación Web
Sesión de Clase 04
Docente: Ms. Ing. Luis Calderon Vargas
Temario: Tablas Estructura
personalización con CSS
Semana 04
Ciclo: 2025 - I
Contenido:
Utilidad de la temática de clase
Logro de la sesión de clase
Manejo de Tablas y Listas en HTML
Personalización con CSS
Aplicaciones practicas de HTML
Revision de Clase Previa
La sesión de clase previa se abordaron temas
relacionados con los formularios en una pagina
Web y su empleo de manera efectiva en la
construcción de paginas Web con Html de
forma integral
Cual es importancia de los temas abordados?
Preguntas?
Utilidad
La elaboración de contenidos Web es una
actividad fundamental para la difusion de
informacion y un manejo optimo de los
recursos que Internet no provee. La gestion
optima de las diversas funcionalidades que el
empleo de tablass con HTML proporcionan un
conjunto de capacidades orientadas al
desarrollo de paginas web.
La finalizar la sesión de clase los estudiantes podrán
elaborar paginas web con HTML incorporando
características y funcionalidades con el uso de Tablas
que permitan estructurar contenidos Web enfocados en
su empleo en actividades practicas y empresariales.
Tablas en HTML
Pagina Web con tablas en HTML
https://www.youtube.com/watch?v=9GZmMLWVi7w
Gestión de Tablas y Listas en HTML
Una tabla es una matriz que permite
organizar los datos en filas y columnas.
• En HTML una tabla es grupo de filas
donde cada una contiene a un grupo
de celdas. Distinto a decir, que es
un grupo de columnas que contiene a un
grupo de filas, esta diferencia radica en
la composición y elementos de la tabla.
• Una tabla básica se declara usando
tres elementos:
<table></table> Contenedor principal
<tr></tr> Filas contenedoras de las celdas
<td></td> Celdas
Gestion de Tablas y Listas en HTML
Gestión de Tablas y Listas en HTML
ENCABEZADOS DE CELDA
• Los encabezados de celdas son
un tipo especial de celda utilizada
para organizar y categorizar otras
celdas en la tabla.
• Se define con el elemento:
<th></th>
• El cual se ubica en la primera fila
de la tabla, encima de las celdas
comunes.
Gestion de Tablas y Listas en HTML
Titulo
• El título en una tabla aporta
legibilidad, pues provee de una
descripción concisa acerca de la
información presentada en la
tabla haciéndola significativamente
más fácil de comprender.
• En HTML, los títulos de las tablas
son insertados mediante el elemento
<caption>, justo después de la
etiqueta de apertura de la misma y
antes que todos los demás
elementos de su estructura.
Gestion de Tablas y Listas en HTML
Unificación de celdas
• Se refiere a la combinación o
fusión de dos o más celdas
adyacentes (<td> y <th>) en
una tabla.
• Este efecto puede lograrse
utilizando los atributos colspan
para unificar de forma
horizontal, y rowspan para
unificar de forma vertical.
• Estos atributos pueden tomar
un valor entero mayor a cero,
que representa el número de
celdas que participarán en la
unificación.
Gestion de Tablas y Listas en HTML
Agrupación de filas
Para agrupar filas en una tabla html vamos a utilizar el atributo rowspan de las celdas.
El atributo rowspan indica el número de filas a las cual se expande su contenido.
El valor del atributo rowspan equivaldrá al número de filas sobre las que
queramos expander dicha celda.
• HTML provee tres elementos que ayuda a organizar la información presentada en
una tabla. Estos son:
Gestion de Tablas y Listas en HTML
Gestion de Tablas y Listas en HTML
Agrupación de columnas
El atributo colspan permiten unir una
celda con las celdas contiguas
horizontal. El valor de colspan indica la
cantidad de celdas unidas en
horizontal.
• Las columnas de una tabla pueden
ser agrupadas con el elemento
<colgroup>, el cual utiliza el atributo
span para indicar el numero de
columnas que se agrupan.
• El elemento <colgroup>, debe ser
declarado al comienzo de la tabla,
luego se puede colocar la etiqueta de
apertura y de título (caption).
Gestion de Tablas y Listas en HTML
Gestion de Tablas y Listas en HTML
Listas ordenadas
El elemento ol permite definir listas o
viñetas ordenadas ("Ordered List"),
bien con numero o letra.
• Las listas ordenadas en HTML son
aquellas que nos muestran los
elementos de la lista en orden, para
este caso los elementos se encuentran
precedidos con un número o una letra.
• Las listas ordenadas en HTML se
representan mediante el elemento
<ol></ol>.
Cada uno de los elementos de la lista
ordenada se representará mediante el
elemento <li> </li>.
Gestion de Tablas y Listas en HTML
Entre los tipos (type) de listas que podemos El atributo start nos permite En HTML aparece el atributo
representar tenemos: indicar el número por el cual reversed para las listas
1 - Listas decimales queremos que empiece la lista, ordenadas. El atributo
a - Listas alfabéticas en minúsculas ya que por defecto las listas reversed nos permite invertir
A - Listas alfabéticas en mayúsculas ordenadas en HTML empiezan el orden de la lista. Es decir,
i - Listas de números romanos en minúsculas por el número 1. realiza la numeración de la
I - Listas de números romanos en mayúsculas <ol start="numero"> ... </ol> lista de forma inversa.
Los valores indicados al principio son los que le Para utilizarlo simplemente
podemos asignar al atributo type de la lista indicamos el atributo reversed
ordenada en HTML. sobre el elemento OL.
<ol type="tipo"> ... </ol> <ol reversed> ... </ol>
Gestion de Tablas y Listas en HTML
Gestion de Tablas y Listas en HTML
Listas desordenadas
• Las listas desordenadas en HTML <ul>
sirven para mostrar los elementos sin <li>Elemento 1</li>
ningún tipo de orden, simplemente <li>Elemento 2</li>
precedidos por una viñeta que puede ...
ser un punto, un cuadrado, etc. <li>Elemento N</li>
• Para definir una lista desordenada </ul>
en HTML utilizamos el elemento <ul>
</ul>.
Para representar los elementos de la
lista desordenada utilizamos el
mismo elemento que con las listas
ordenadas, es decir, el elemento <li>
</li>..
Gestion de Tablas y Listas en HTML
Gestion de Tablas y Listas en HTML
<html>
Listas anidadas <head>
</head>
El lenguaje HTML nos permite insertar una <body>
<ol>
lista dentro de otra. Se pueden anidar <li>Argentina
<ul>
listas de distinto tipo, por ejemplo podemos <li><a href="http://www.lanacion.com.ar">La Nación</a></li>
<li><a href="http://www.clarin.com.ar">Clarín</a></li>
tener una lista no ordenada y uno de los <li><a href="http://www.pagina12.com.ar">Página 12</a></li>
</ul>
item puede ser una lista ordenada. </li>
<li>España
Para el anidamiento de listas se debe <ul>
<li><a href="http://www.elpais.es">El País Digital</a></li>
cautelar la correcta apertura y cerrado de <li><a href="http://www.abc.es">ABC</a></li>
<li><a href="http://www.elmundo.es">El Mundo</a></li>
las marcas </ul>
</li>
• Las listas pueden anidarse unas en otras <li>México
<ul>
independientemente del tipo de lista. <li><a href="http://www.jornada.unam.mx">La Jornada</a></li>
<li><a href="http://www.el-universal.com.mx">El
• Para anidar listas se tiene que hacer, que Universal</a></li>
</ul>
el elemento de una de las listas sea a su </li>
</ol>
vez una lista. </body>
</html>
Tablas en HTML con CSS
Las tablas son una herramienta poderosa
para presentar datos, pero requieren:
Estructura semántica (HTML correcto).
Diseño adaptable (CSS y responsive).
Accesibilidad (contraste, encabezados claros).
CSS (Cascading Style Sheets) es un
lenguaje de diseño gráfico que se utiliza para
definir la presentación visual de un documento
HTML (o XML, SVG, etc.). Su principal
objetivo es separar el contenido (estructura y
semántica, definidos en HTML) de su
apariencia (colores, tipografías, diseños), lo
que permite un mayor control y flexibilidad en
el diseño de sitios web.
Tablas en HTML con CSS
Estilos básicos con CSS
Para mejorar la apariencia, usa CSS: Tabla HTML
/* Eliminar bordes por defecto */ /* Filas con efecto hover */ <table>
table { tr:hover { <caption>Título de la tabla</caption>
border-collapse: collapse; /* Une bordes adyacentes */ background-color: #f5f5f5; <thead>
width: 100%; /* Ancho completo */ } <tr> <th>Encabezado 1</th>
margin: 20px 0; <th>Encabezado 2</th></tr>
font-family: Arial, sans-serif;
/* Pie de tabla */ </thead>
}
/* Encabezados */ tfoot td { <tbody>
th { font-weight: bold; <tr><td>Dato 1</td>
background-color: #4CAF50; background-color: #f1f1f1; <td>Dato 2</td></tr>
color: white; } <tr><td>Dato 3</td>
padding: 12px; <td>Dato 4</td></tr>
text-align: left; /* Alineación del caption */ </tbody>
} <tfoot>
caption {
/* Celdas de datos */
font-size: 1.2em; <tr><td>Pie de tabla</td>
td {
padding: 10px; margin: 10px 0; <td>Total: 100</td></tr>
border: 1px solid #ddd; font-weight: bold; </tfoot>
} } </table>
Tablas en HTML con CSS
Tablas responsivas Accesibilidad
Para adaptar la tabla a dispositivos móviles: Usa el atributo scope en <th> para asociar encabezados con
/* Scroll horizontal en pantallas pequeñas */ datos:
@media screen and (max-width: 600px) { <th scope="col">Encabezado</th>
table { <th scope="row">Fila 1</th>
display: block; Añade un summary para describir el propósito de la tabla
overflow-x: auto; <table summary="Tabla que muestra datos de ventas por
} región">
}
Tablas con bordes personalizados
Ejemplo de bordes redondeados y sombras:
table {
border: 2px solid #333;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
th, td {
border: none; /* Eliminar bordes internos */
}
Tablas en HTML con CSS
Diseño y estilos con CSS
El CSS permite controlar la presentación visual
de las tablas, mejorando su legibilidad y estética.
Propiedades clave:
border-collapse :
collapse: Combina bordes adyacentes
(recomendado).
separate: Mantiene bordes separados (usa
border-spacing para ajustar espacio).
padding : Espaciado interno en celdas (<th> y
<td>).
text-align : Alineación horizontal del texto (ej: left,
center).
vertical-align : Alineación vertical (ej: top, middle).
background-color : Colores de fondo para filas,
columnas o celdas específicas.
Imágenes en HTML
• Las imágenes utilizadas
en una página web pueden
ser de dos tipos: de
contenido o de decoración.
• En el primer caso, si la imagen pertenece al contenido y tema tratado en esa
página, debería incluirse mediante una etiqueta <img>, pero si por el contrario
pertenece a la decoración de la página, se debe incluir como un fondo mediante
la propiedad background-image de alguna etiqueta.
Etiqueta <img> en HTML
Formatos de Imagen en HTML
Ejemplo de Imágenes en HTML
Sonidos en HTML
Ejemplo de Sonido en HTML
Enlaces o Vinculos en HTML
Los vínculos son una parte vital de HTML y
consituyen la razón misma por la cual la WWW
existe. Internet es considerada una "red" debido a
cómo los vínculos conectan todas estas partes
singulares (o documentos) unas con otras.
La función básica de un vínculo es la de hacer una
referencia, de un documento HTML a un recurso, que
puede ser a su vez otro documento. Un enlace define
una relación entre dos recursos en la web.
Un link es una referencia (una manera de llegar)
desde la página actual a otra página que puede estar
en el mismo directorio, en otro directorio o aún en
otro computador. Incluso, es posible hacer un link a
una parte específica dentro de otra página.
Elemento <a> de un Enlace HTML
Enlaces a Fragmanetos en HTML
Enlaces a Fragmanetos en HTML
Tablas HTML con CSS
https://www.youtube.com/watch?v=bS4TQ9oJsnc
Cierre de la Sesión de Clase
Se logro la meta de la Sesión de clase
¿Qué hemos aprendido el día de hoy?
Preguntas Dudas Inquietudes
Muchas gracias, hasta la próxima clase
!No olvidar participar en los foros y
desarrollar y entregar la tarea¡
