Manual 2 HTML
0 recomendaciones530 vistas
El documento describe las etiquetas básicas para crear tablas en HTML, incluyendo <table>, <tr>, <th> y <td>. Explica cómo usar atributos como cellpadding, align, cellspacing y border para formatear tablas. También cubre cómo combinar filas y columnas usando rowspan y colspan. Finalmente, proporciona ejemplos y ejercicios prácticos sobre el uso de tablas.
![IESTP “SAN PEDRO DEL VALLE DE
MALA”
UNIDAD DIDÁCTICA
TALLER DE PROGRAMACIÓN DISTRIBUÍDA
TABLAS
ESTRUCTURA DE LA TABLA
Usted debe conocer las cuatros etiquetas básicas para una tabla, que se describen a
continuación:
<table> La etiqueta table contiene a las demás etiquetas que se
usan para crear una tabla en HTML. Las etiquetas table
</table>
de apertura y de cierre deben estar situadas al comienzo
y al final de su tabla.
<tr> La etiqueta tr corresponde a fila de tablas (siguiente Fila)
</tr>
<th> Encabezado en la siguiente Columna.
</th>
<td> Texto en la siguiente Columna.
</td>
Ejemplo 1
<html>
<head> <title>IESTP "San Pedro del Valle Mala"</title>
</head>
<body bgcolor="ffffff">
<div align="center">
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
</div>
</body>
</html>
DOCENTE: VICTOR CHUMPITAZ AVALOS. Página[1]
MODULO: DESARROLLO DE SOFTWARE Y GESTIÓN DE BASE DE DATOS](https://image.slidesharecdn.com/clase-3-110127103411-phpapp02/85/Manual-2-HTML-1-320.jpg)
![IESTP “SAN PEDRO DEL VALLE DE
MALA”
UNIDAD DIDÁCTICA
TALLER DE PROGRAMACIÓN DISTRIBUÍDA
Además las tablas pueden ser adicionalmente formateadas a partir de los atributos que nos
ofrece la etiqueta <table>; son los siguientes:
Alinea Horizontalmente la tabla con respecto a su entorno.
aling
Nos Permite colocar un Fondo para la Tabla a partir de un
background
enlace a una imagen.
Da color de fondo a la tabla.
bgcolor
Define el número de píxels del borde principal.
border
Define el color del Borde.
bordercolor
Define en píxels, el espacio entre los bordes de la celda y el
cellpadding contenido de la misma
Define el espacio entre los bordes (en pixels).
cellspacing
Define la altura de la tabla en píxels o porcentaje.
height
Define la anchura de la tabla en píxels o porcentaje.
width
Nos permite combinar Filas.
rowspan
Nos permite combinar Columnas.
colspan
EJEMPLO
<table cellpadding="1" align="center" cellspacing="5" border="1">
<tr>
<th>Nombres populares para niñas</th>
<th>Nombres populares para niños</th>
</tr>
<tr>
<td>Miriam</td>
<td>Jerson</td>
</tr>
<tr>
<td>Zoila</td>
<td>José</td>
</tr>
</table>
DOCENTE: VICTOR CHUMPITAZ AVALOS. Página[2]
MODULO: DESARROLLO DE SOFTWARE Y GESTIÓN DE BASE DE DATOS](https://image.slidesharecdn.com/clase-3-110127103411-phpapp02/85/Manual-2-HTML-2-320.jpg)
![IESTP “SAN PEDRO DEL VALLE DE
MALA”
UNIDAD DIDÁCTICA
TALLER DE PROGRAMACIÓN DISTRIBUÍDA
También podemos alinear los contenidos de las celdas y además darle un ancho y alto a las
celdas de las tablas:
aling Left (izquierda)
Right (derecha)
Center (centro)
Top (el contenido se alinea arriba)
valing
Bottom (abajo)
Middle (en la mitad)
EJEMPLO:
<table width="100%" height="100%" border="1">
<tr>
<th>IZQUIERDA</th>
<th>CENTRO</th>
<th>DERECHO</th>
</tr>
<tr valign="top">
<td align="left">Arriba y a la Izquierda</td>
<td align="center">Arriba y al Centro</td>
<td align="right">Arriba y a la Derecha</td>
</tr>
<tr valign="middle">
<td align="left">En Medio y a la Izquieda</td>
<td align="center">En Medio Centrado</td>
<td align="right">En Medio y a la Derecha</td>
</tr>
<tr valign="bottom">
<td valign="top" align="left">Arriba y a la Izquierda </td>
<td align="center">Abajo y al Centro</td>
<td align="right">Abajo y a la Derecha</td>
</tr>
</table>
DOCENTE: VICTOR CHUMPITAZ AVALOS. Página[3]
MODULO: DESARROLLO DE SOFTWARE Y GESTIÓN DE BASE DE DATOS](https://image.slidesharecdn.com/clase-3-110127103411-phpapp02/85/Manual-2-HTML-3-320.jpg)
![IESTP “SAN PEDRO DEL VALLE DE
MALA”
UNIDAD DIDÁCTICA
TALLER DE PROGRAMACIÓN DISTRIBUÍDA
ROWSPAN Y COLSPAN (Combinar Filas y Columnas)
Ejemplo 1:
<table width="80%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td rowspan="3">Países Europeo</td>
<td>España</td>
<td><p>Madrid</td>
</tr>
<tr>
<td>Francia</td> Estamos combinando
<td>París</td> 3Filas (ROSWPAN)
</tr>
<tr>
<td>Reino Unido</td>
<td>Londres</td>
</tr>
</table>
Ejemplos 2:
<table border=2 cellpadding=4>
<tr>
<th colspan=2>production</th>
</tr>
<tr>
<td>raha mutisya</td>
<td>1493</td>
</tr>
<tr>
<td>shalom buraka</td>
<td>3829</td>
</tr>
<tr> <td>brandy davis</td>
<td>0283</td>
</tr>
<tr>
<th colspan=2>sales</th>
</tr>
<tr>
<td>claire horne</td>
<td>4827</td>
</tr>
<tr> <td>bruce eckel</td>
<td>7246</td> Estamos combinando 2
</tr>
<tr> Columnas (COLSPAN)
<td>danny zeman</td>
<td>5689</td>
</tr>
</table>
DOCENTE: VICTOR CHUMPITAZ AVALOS. Página[4]
MODULO: DESARROLLO DE SOFTWARE Y GESTIÓN DE BASE DE DATOS](https://image.slidesharecdn.com/clase-3-110127103411-phpapp02/85/Manual-2-HTML-4-320.jpg)
![IESTP “SAN PEDRO DEL VALLE DE
MALA”
UNIDAD DIDÁCTICA
TALLER DE PROGRAMACIÓN DISTRIBUÍDA
Ejercicios:
NOTA: estos son ejercicios la cual tienes que poner todo de tu empeño para que puedas
obtener una nota aprobatoria de 18. Colorear las celdas. Tipo de letras. Titulos
con Marquesina.
Tabla 01
FUTBOL MUNDIAL
El más Completo
Pele
Goleador Neto
CRACKS
Zurdo de Oro
Maradona
Mago y Genio
Tabla 02
LOS MEJORES GRUPOS DE ROCK
Queen
Inglaterra Ingles
The Beatles
LOS UNICOS
Soda Stereo
Sudamérica Castellano
Prisioneros
Ejercicio 2 : crear 2 tablas, colocar gráficos y nombres
DOCENTE: VICTOR CHUMPITAZ AVALOS. Página[5]
MODULO: DESARROLLO DE SOFTWARE Y GESTIÓN DE BASE DE DATOS](https://image.slidesharecdn.com/clase-3-110127103411-phpapp02/85/Manual-2-HTML-5-320.jpg)
Manual 2 HTML
- 1. IESTP “SAN PEDRO DEL VALLE DE MALA” UNIDAD DIDÁCTICA TALLER DE PROGRAMACIÓN DISTRIBUÍDA TABLAS ESTRUCTURA DE LA TABLA Usted debe conocer las cuatros etiquetas básicas para una tabla, que se describen a continuación: <table> La etiqueta table contiene a las demás etiquetas que se usan para crear una tabla en HTML. Las etiquetas table </table> de apertura y de cierre deben estar situadas al comienzo y al final de su tabla. <tr> La etiqueta tr corresponde a fila de tablas (siguiente Fila) </tr> <th> Encabezado en la siguiente Columna. </th> <td> Texto en la siguiente Columna. </td> Ejemplo 1 <html> <head> <title>IESTP "San Pedro del Valle Mala"</title> </head> <body bgcolor="ffffff"> <div align="center"> <table> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> <tr> <td>7</td> <td>8</td> <td>9</td> </tr> </table> </div> </body> </html> DOCENTE: VICTOR CHUMPITAZ AVALOS. Página[1] MODULO: DESARROLLO DE SOFTWARE Y GESTIÓN DE BASE DE DATOS
- 2. IESTP “SAN PEDRO DEL VALLE DE MALA” UNIDAD DIDÁCTICA TALLER DE PROGRAMACIÓN DISTRIBUÍDA Además las tablas pueden ser adicionalmente formateadas a partir de los atributos que nos ofrece la etiqueta <table>; son los siguientes: Alinea Horizontalmente la tabla con respecto a su entorno. aling Nos Permite colocar un Fondo para la Tabla a partir de un background enlace a una imagen. Da color de fondo a la tabla. bgcolor Define el número de píxels del borde principal. border Define el color del Borde. bordercolor Define en píxels, el espacio entre los bordes de la celda y el cellpadding contenido de la misma Define el espacio entre los bordes (en pixels). cellspacing Define la altura de la tabla en píxels o porcentaje. height Define la anchura de la tabla en píxels o porcentaje. width Nos permite combinar Filas. rowspan Nos permite combinar Columnas. colspan EJEMPLO <table cellpadding="1" align="center" cellspacing="5" border="1"> <tr> <th>Nombres populares para niñas</th> <th>Nombres populares para niños</th> </tr> <tr> <td>Miriam</td> <td>Jerson</td> </tr> <tr> <td>Zoila</td> <td>José</td> </tr> </table> DOCENTE: VICTOR CHUMPITAZ AVALOS. Página[2] MODULO: DESARROLLO DE SOFTWARE Y GESTIÓN DE BASE DE DATOS
- 3. IESTP “SAN PEDRO DEL VALLE DE MALA” UNIDAD DIDÁCTICA TALLER DE PROGRAMACIÓN DISTRIBUÍDA También podemos alinear los contenidos de las celdas y además darle un ancho y alto a las celdas de las tablas: aling Left (izquierda) Right (derecha) Center (centro) Top (el contenido se alinea arriba) valing Bottom (abajo) Middle (en la mitad) EJEMPLO: <table width="100%" height="100%" border="1"> <tr> <th>IZQUIERDA</th> <th>CENTRO</th> <th>DERECHO</th> </tr> <tr valign="top"> <td align="left">Arriba y a la Izquierda</td> <td align="center">Arriba y al Centro</td> <td align="right">Arriba y a la Derecha</td> </tr> <tr valign="middle"> <td align="left">En Medio y a la Izquieda</td> <td align="center">En Medio Centrado</td> <td align="right">En Medio y a la Derecha</td> </tr> <tr valign="bottom"> <td valign="top" align="left">Arriba y a la Izquierda </td> <td align="center">Abajo y al Centro</td> <td align="right">Abajo y a la Derecha</td> </tr> </table> DOCENTE: VICTOR CHUMPITAZ AVALOS. Página[3] MODULO: DESARROLLO DE SOFTWARE Y GESTIÓN DE BASE DE DATOS
- 4. IESTP “SAN PEDRO DEL VALLE DE MALA” UNIDAD DIDÁCTICA TALLER DE PROGRAMACIÓN DISTRIBUÍDA ROWSPAN Y COLSPAN (Combinar Filas y Columnas) Ejemplo 1: <table width="80%" border="1" cellspacing="0" cellpadding="0"> <tr> <td rowspan="3">Países Europeo</td> <td>España</td> <td><p>Madrid</td> </tr> <tr> <td>Francia</td> Estamos combinando <td>París</td> 3Filas (ROSWPAN) </tr> <tr> <td>Reino Unido</td> <td>Londres</td> </tr> </table> Ejemplos 2: <table border=2 cellpadding=4> <tr> <th colspan=2>production</th> </tr> <tr> <td>raha mutisya</td> <td>1493</td> </tr> <tr> <td>shalom buraka</td> <td>3829</td> </tr> <tr> <td>brandy davis</td> <td>0283</td> </tr> <tr> <th colspan=2>sales</th> </tr> <tr> <td>claire horne</td> <td>4827</td> </tr> <tr> <td>bruce eckel</td> <td>7246</td> Estamos combinando 2 </tr> <tr> Columnas (COLSPAN) <td>danny zeman</td> <td>5689</td> </tr> </table> DOCENTE: VICTOR CHUMPITAZ AVALOS. Página[4] MODULO: DESARROLLO DE SOFTWARE Y GESTIÓN DE BASE DE DATOS
- 5. IESTP “SAN PEDRO DEL VALLE DE MALA” UNIDAD DIDÁCTICA TALLER DE PROGRAMACIÓN DISTRIBUÍDA Ejercicios: NOTA: estos son ejercicios la cual tienes que poner todo de tu empeño para que puedas obtener una nota aprobatoria de 18. Colorear las celdas. Tipo de letras. Titulos con Marquesina. Tabla 01 FUTBOL MUNDIAL El más Completo Pele Goleador Neto CRACKS Zurdo de Oro Maradona Mago y Genio Tabla 02 LOS MEJORES GRUPOS DE ROCK Queen Inglaterra Ingles The Beatles LOS UNICOS Soda Stereo Sudamérica Castellano Prisioneros Ejercicio 2 : crear 2 tablas, colocar gráficos y nombres DOCENTE: VICTOR CHUMPITAZ AVALOS. Página[5] MODULO: DESARROLLO DE SOFTWARE Y GESTIÓN DE BASE DE DATOS