Scribd
Cargar
88 vistas

Act01 - Tablas HTML

El documento proporciona instrucciones para la Actividad 1 del Parcial 2. Se solicita crear un mapa mental sobre cómo crear tablas en HTML y realizar ejemplos usando un editor de texto. También se pide crear un documento PDF con capturas de pantalla. Se incluyen ejemplos de código HTML para distintos tipos de tablas y se especifican los elementos <table>, <tr>, <td> y <th>. La evaluación es del 20% y la fecha de entrega es el 28 de marzo.

Cargado por

Afable Lea
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
88 vistas

Act01 - Tablas HTML

El documento proporciona instrucciones para la Actividad 1 del Parcial 2. Se solicita crear un mapa mental sobre cómo crear tablas en HTML y realizar ejemplos usando un editor de texto. También se pide crear un documento PDF con capturas de pantalla. Se incluyen ejemplos de código HTML para distintos tipos de tablas y se especifican los elementos <table>, <tr>, <td> y <th>. La evaluación es del 20% y la fecha de entrega es el 28 de marzo.

Cargado por

Afable Lea
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 8

Nota 1: Los archivos deben de ser nombrados con la siguiente secuencia

ApPaterno_Nombre_act0X. Ej, Trejo_David_act02.docx

Nota 2: Utilizar la plataforma de Google ClassRoom para subir los archivos

Parcial 2

Actividad 1: Tablas

 Hacer un Mapa mental sobre como crear Tablas en HTML.


 Utilizar algun Editor de texto como brackets para realizar los ejemplos que vienen el
material didactico.
 Realizar un documento word y pdf con las capturas de pantallas de las salidas de
los programas.

Las tablas más sencillas de HTML se definen con tres etiquetas: <table> para crear la
tabla, <tr> para crear cada fila y <td> para crear cada columna.
A continuación se muestra el código HTML de una tabla sencilla:
<html>
<head><title>Ejemplo de tabla sencilla</title></head>
<body>

<h1>Listado de cursos</h1>

<table>
<tr>
<td><strong>Curso</strong></td>
<td><strong>Horas</strong></td>
<td><strong>Horario</strong></td>
</tr>

<tr>
<td>CSS</td>
<td>20</td>
<td>16:00 - 20:00</td>
</tr>

<tr>
<td>HTML</td>
<td>20</td>
<td>16:00 - 20:00</td>
</tr>

<tr>
<td>Dreamweaver</td>
<td>60</td>
<td>16:00 - 20:00</td>
</tr>
</table>

</body>
</html>

La etiqueta <table> encierra todas las filas y columnas de la tabla. Las etiquetas <tr> (del


inglés "table row") definen cada fila de la tabla y encierran todas las columnas. Por
último, la etiqueta <td> (del inglés "table data cell") define cada una de las columnas de
las filas, aunque realmente HTML no define columnas sino celdas de datos.

Al definir una tabla, se debe pensar en primer lugar en las filas que la forman y a
continuación en las columnas. El motivo es que HTML procesa primero las filas y por eso
las etiquetas <tr> aparecen antes que las etiquetas <td>.

<table>
Se emplea para definir tablas de datos
<tr>
Se emplea para definir cada fila de las tablas de datos
<td>
Se emplea para definir cada una de las celdas que forman las filas de una tabla, es decir, las
columnas de la tabla
headers = "lista_de_id" - Indica las celdas que actúan como cabeceras para esta celda (los
títulos de las columnas y filas). Se indica como una lista de valores del atributo "id" de celdas
<th>
Se emplea para definir las celdas que son cabecera de una fila o de una columna de la tabla

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Ejemplo de tabla sencilla</title>
</head>

<body>

<h1>Su pedido</h1>
<table>
<tr>
<th scope="col">Nombre producto</th>
<th scope="col">Precio unitario</th>
<th scope="col">Unidades</th>
<th scope="col">Subtotal</th>
</tr>
<tr>
<td>Reproductor MP3 (80 GB)</td>
<td>192.02</td>
<td>1</td>
<td>192.02</td>
</tr>

<tr>
<td>Fundas de colores</td>
<td>2.50</td>
<td>5</td>
<td>12.50</td>
</tr>

<tr>
<td>Reproductor de radio &amp; control remoto</td>
<td>12.99</td>
<td>1</td>
<td>12.99</td>
</tr>

<tr>
<th scope="row">TOTAL</th>
<td>-</td>
<td>7</td>
<td><strong>207.51</strong></td>
</tr>
</table>

</body>

</html>

Material didáctico:

 https://drive.google.com/open?id=1XUAzV-4mODM7AoeOtSXZXjbd6t9JoZTl
 https://www.youtube.com/watch?v=X-6qJRVsP8o

Evaluación: 20%
Fecha: 28 / Marzo / 2020
Correo del Profesor: [email protected]
Concepto, tabla sencilla.
<table class="egt">
<tr>
<td>Celda 1</td>
<td>Celda 2</td>
<td>Celda 3</td>
</tr>
<tr>
<td>Celda 4</td>
<td>Celda 5</td>
<td>Celda 6</td>
</tr>
</table>

Celdas cabeceras.
<table class="egt">
<tr>
<th>Hoy</th>
<th>Mañana</th>
<th>Lunes</th>
</tr> <tr>
<td>Soleado</td>
<td>Mayormente soleado</td>
<td>Parcialmente nublado</td>
</tr> <tr>
<td>19°C</td>
<td>17°C</td>
<td>12°C</td>
</tr> <tr>
<td>E 13 km/h</td>
<td>E 11 km/h</td>
<td>S 16 km/h</td>
</tr>
</table>

Titulo de tabla
<table class="egt">
<caption>Consumo de combustible de los autos a lo largo de las pruebas de
manejo</caption>
<tr>
<th scope="col">Car</th>
<th>Enero</th>
<th>Febrero</th>
<th>Marzo</th>
</tr>
<tr>
<th>Chevrolet Camaro</th>
<td>1254 lts</td>
<td>1582 lts</td>
<td>685 lts</td>
</tr>
<tr>
<th>Lamborghini Aventator</th>
<td>1854 lts</td>
<td>1978 lts</td>
<td>1502 lts</td>
</tr>
</table>

Unificacion de celdas
<table class="egt">
<tr>
<th>
</th>
<th>Día 1</th>
<th>Día 2</th>
<th>Día 3</th>
<th>Día 4</th>
</tr>
<tr>
<th>Mike (lastimado)</th>
<td colspan="3">0 km</td>
<td>4 km</td>
</tr>
<tr>
<th>Susan</th>
<td>23 km</td>
<td>18 km</td>
<td>19 km</td>
<td>15 km</td>
</tr>
</table>

Agrupación de filas
<table class="egt">
<thead>
<tr>
<th>
</th>
<th colspan="2">Anthony</th>
<th colspan="2">Lione</th>
</tr>
<tr>
<th scope="col">Fecha</th>
<th>Entrada</th>
<th>Salida</th>
<th>Entrada</th>
<th>Salida</th>
</tr>
</thead>
<tbody>
<tr>
<th>15/07</th>
<td>$200,00</td>
<td>$50,00</td>
<td>$0</td>
<td>$0</td>
</tr>
<tr>
<th>28/07</th>
<td>$0,00</td>
<td>$100,00</td>
<td>$100,00</td>
<td>$0,00</td>
</tr>
<tr>
<th>09/08</th>
<td>$0,00</td>
<td>$50,00</td>
<td>$0,00</td>
<td>$80,00</td>
</tr>
<tr>
<th>22/08</th>
<td>$40,00</td>
<td>$0,00</td>
<td>$0,00</td>
<td>$110,00</td>
</tr>
<tr>
<th>25/08</th>
<td>$0,00</td>
<td>$20,00</td>
<td>$0,00</td>
<td>$0,00</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Balance</th>
<td colspan="2">$20,00</td>
<td colspan="2">$10,00</td>
</tr>
</tfoot>
</table>

Agrupación de columnas
<table class="egt">
<colgroup>
<colgroup span="2" style="background: rgba(128, 255, 0, 0.3); border: 1px solid
rgba(100, 200, 0, 0.3);">
</colgroup>
<colgroup span="2" style="background: rgba(255, 128, 0, 0.3); border: 1px solid
rgba(200, 100, 0, 0.3);">
</colgroup>
<tr>
<th>
</th>
<th colspan="2">Mike</th>
<th colspan="2">Tara</th>
</tr>
<tr>
<th>
</th>
<th>Primera prueba</th>
<th>Segunda prueba</th>
<th>Primera prueba</th>
<th>Segunda prueba</th>
</tr>
<tr>
<th>Día 1</th>
<td>25 km</td>
<td>38 km</td>
<td>28 km</td>
<td>37 km</td>
</tr>
<tr>
<th>Día 2</th>
<td>22 km</td>
<td>35 km</td>
<td>30 km</td>
<td>35 km</td>
</tr>
</table>

También podría gustarte