Pasos para guardar el trabajo.
Documentos
HTML 10AB
[Link]
[Link]
Tabla con [Link]
Tabla y combinación de [Link]
Tabla – Ejercicio 1
El objetivo fundamental de las tablas es mostrar una serie de datos en forma
ordenada, organizado en filas y columnas.
Para la creación de una tabla intervienen una serie de elementos:
<table> Es la marca de comienzo de la tabla. Este elemento requiere la marca de
cierre.
<tr> Es la marca de comienzo de una fila. Esta marca debe estar dentro del
elemento table. Este elemento requiere la marca de cierre.
<td> Es la marca de comienzo de una celda. Esta marca debe estar dentro del
elemento tr. Este elemento requiere la marca de cierre.
Para recordar el nombre de estos elementos HTML:
<table>
<tr> viene de table row que significa fila de la tabla.
<td> viene de table data que significa dato de la tabla.
La mejor forma de entender y dominar este concepto es implementar tablas y ver
su resultado dentro del navegador. Confeccionemos una tabla que muestre los
nombres de países en una columna y su cantidad de habitantes en otra:
<html>
<head>
<title>TABLA</title>
</head>
<body>
<table border="1">
<tr>
<td>China</td><td>1300 millones</td>
</tr>
<tr>
<td>India</td><td>1080 millones</td>
</tr>
<tr>
<td>Estados Unidos</td><td>295 millones</td>
</tr>
</table>
</body>
</html>
Tabla con título – Ejercicio 2
Para disponer un título a una tabla debemos incorporar el elemento caption
inmediatamente después que abrimos la marca table. El elemento caption requiere
la marca de apertura y cierre.
Dispongamos un título a nuestra tabla con la población de distintos paises:
<html>
<head>
<title>TABLA CON TÍTULO</title>
</head>
<body>
<table border="1">
<caption>Población de los países con mayor cantidad de
habitantes.</caption>
<tr>
<td>China</td><td>1300 millones</td>
</tr>
<tr>
<td>India</td><td>1080 millones</td>
</tr>
<tr>
<td>Estados Unidos</td><td>295 millones</td>
</tr>
</table>
</body>
</html>
Tabla con encabezado – Ejercicio 3
La primera característica que le vamos a agregar a una tabla son las celdas de
encabezado. Normalmente la primera fila de una tabla puede representar los
títulos para cada columna.
Para indicar que se trata de una celda de encabezado utilizamos el elemento <th>
en lugar de <td>
El navegador representa distinto las celdas de datos y las celdas de
encabezamiento.
Confeccionemos el mismo problema del concepto anterior pero agregando un
título a cada columna de la tabla mediante celdas de encabezamiento:
<html>
<head>
<title>TABLA CON ENCABEZADO</title>
</head>
<body>
<table border="1">
<tr>
<th>Paises</th><th>Cantidad de habitantes</th>
</tr>
<tr>
<td>China</td><td>1300 millones</td>
</tr>
<tr>
<td>India</td><td>1080 millones</td>
</tr>
<tr>
<td>Estados Unidos</td><td>295 millones</td>
</tr>
</table>
</body>
</html>
Tabla y combinación de celdas – Ejercicio 4
En algunas situaciones se necesita que una celda ocupe el lugar de dos o más
celdas en forma horizontal o vertical, para estos casos el elemento td o th dispone
de dos propiedades llamadas rowspan y colspan.
A estas propiedades se les asigna un valor entero a partir de 2.
Si queremos que una celda ocupe tres columnas luego inicializamos la propiedad
colspan con el valor 3:
<td colspan="3">Facturación de los últimos tres
meses</td>
Si por el contrario queremos que una celda se extienda a nivel de filas luego
hacemos:
<td rowspan="3">Secciones</td>
Veamos un ejemplo empleando el concepto de combinación de celdas:
<html>
<head>
<title>Título de la página</title>
</head>
<body>
<table border="1">
<tr>
<td rowspan="4">Recursos</td><td colspan="4">Facturación
de los últimos tres meses</td>
</tr>
<tr>
<td>Discos Duros</td> <td>23000</td> <td>27200</td>
<td>26000</td>
</tr>
<tr>
<td>CPU</td><td>73000</td><td>67300</td><td>51000</td>
</tr>
<tr>
<td>Monitores</td><td>53000</td><td>72000</td><td>88000</td>
</tr>
</table>
</body>
</html>
Ejercicio 5
Haciendo uso de los conceptos aprendidos en clase, elabora una tabla
con los siguientes parámetros:
- La tabla debe llevar por título: Aplicación de etiquetas, segunda
clase.
- Debe llevar un colspan=”2” Aprendizaje de conceptos
practicados en segunda clase
- Debe contener el encabezado # ejercicio y explicación
- En el encabezado # ejercicio se debe especificar qué número de
ejercicio explicado se va a trabajar y en explicación debe
responder lo siguiente: ¿Qué etiquetas especiales se usaron en
este ejercicio?
Muestra de la actividad resuelta
Colspan=”2”
Encabezado
