Laboratorio Tablas PW

Laboratorio de Programación Web
Sesión 3: Tablas
I. OBJETIVOS
- Conocer las fundamentos de las Tablas HTML

- Utilizar las etiquetas HTML para crear Tablas en páginas web.
II. TEMAS A TRATAR
• Tablas
III. MARCO TEORICO
• tablas (<table><tr><td>)
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.
Un elemento que no se visualiza es el <meta>, que tiene por objetivo especificar información
sobre el propio documento.
IV. ACTIVIDADES
Tablas.
1. Escribe el siguiente código en el editor de tu preferencia:
<!DOCTYPE html>
<html>
<head>
<title>Título de la página</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>
2. Guárdalo con el nombre de ejemplo31.html y cárgalo en el navegador de tu preferencia.

Problema: Confeccionar una tabla que muestre en la primer columna los nombre de distintos
empleados de una compañía y en la segunda el sueldo bruto (la compañía tiene 4 empleados)
Tabla con encabezado (<th>)

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table border="1">
<tr>
<th>Paises</th><th>Cantidad de habitantes</th>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
</body>
</html>
empleados de una compañía y en la segunda el sueldo bruto (la compañía tiene 4 empleados) Mostrar
los textos 'Nombre del Empleado' y 'Sueldo Bruto' como primer fila de la tabla.
Tabla con título (<caption>)

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table border="1">
<caption>Población de los paises con mayor cantidad de habitantes.</caption>
<tr>
<th>Paises</th><th>Cantidad de habitantes</th>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
</body>
</html>

empleados de una compañía y en la segunda el sueldo bruto (la compañía tiene 4 empleados)
Disponer en la tabla un título representativo.
Tabla y combinación de celdas.

<!DOCTYPE html>
<html>
<head>
</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>

Problema: Confeccionar una tabla que muestre los nombres de periódicos y su nombre de dominio
agrupados por países. En la primer columna disponer los nombre de países, expandir en fila de
acuerdo a la cantidad de diarios de cada país.
Comentarios dentro de una página 

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<table border="1">
<tr>
<th rowspan="4">Recursos</th><th colspan="4">Facturación
de los últimos tres meses</th>
</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>

Problema: Confeccionar un página que muestre dos tablas. Luego comentar la segunda y ver el
resultado.
Contenido de la cabecera de la página (<meta>)

<!DOCTYPE html>
<html>
<head>
<title>HTML Ya</title>
<meta name="keywords" content="html, programación, webmaster, tutorial">
<meta name="description" content="El objetivo de esta guía
es presentar los conceptos básicos de HTML. Es objetivo prioritario respetar
los estándares del W3C">
<meta name="author" content="Nombre y Apellido">
<meta name="copyright" content="Empresa SA">

</head>
<body>
<p>Es una página para probar inicializar el elemento HTML meta.
</body>
</html>

Laboratorio Tablas PW

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Laboratorio Tablas PW

Cargado por

Copyright:

Formatos disponibles

Laboratorio de Programación Web

- Conocer las fundamentos de las Tablas HTML

II. TEMAS A TRATAR

III. MARCO TEORICO

2. Guárdalo con el nombre de ejemplo31.html y cárgalo en el navegador de tu preferencia.

Tabla con encabezado (<th>)

Tabla con título (<caption>)

6. Guárdalo con el nombre de ejemplo33.html y cárgalo en el navegador de tu preferencia.

Tabla y combinación de celdas.

8. Guárdalo con el nombre de ejemplo44.html y cárgalo en el navegador de tu preferencia.

Comentarios dentro de una página

10. Guárdalo con el nombre de ejemplo45.html y cárgalo en el navegador de tu preferencia.

Contenido de la cabecera de la página (<meta>)

<meta name="copyright" content="Empresa SA">

También podría gustarte