Está en la página 1de 10

INTRODUCCION A LA INTERNET

Universidad don Bosco

Integrantes: Jos Isaac Avalos Henrquez. Jonathan castillo Salazar. cesar Materia: Introduccin a la Internet.

Carnet: AH110626

Docente: Blanca Iris Caas.

Grupo terico: 02T

Fecha de entrega: 24 de Enero

INTRODUCCION A LA INTERNET

ndice
Tabla de contenido
Introduccin. .................................................................................................................................. 3 Objetivos........................................................................................................................................ 4 Objetivo general. ........................................................................................................................ 4 Objetivos especficos. ................................................................................................................. 4 TABLAS HTML................................................................................................................................. 5 TABLAS SIMPLES. ........................................................................................................................ 5 UNIFICACION DE CELDAS. ........................................................................................................... 5 CELDAS DE ENCABEZADO ........................................................................................................... 6 ATRIBUTO SCOPE.................................................................................................................... 6 ATRIBUTO HEADERS ............................................................................................................... 7 ATRIBUTO AXIS ....................................................................................................................... 7 AGRUPACION HORIZONTAL .................................................................................................... 8 EL TITULO DE LA TABLA .............................................................................................................. 9 SUMARIOS ............................................................................................................................... 10

INTRODUCCION A LA INTERNET

Introduccin.
Hoy en da es comn la presencia de varias tablas en una pgina web, incluso tablas dentro de celdas de otras tablas. En el presente trabajo daremos a conocer las diferentes etiquetas que existen para la creacin de tablas, conoceremos su importancia y la manera en que la informacin se puede clasificar, uno de los elementos de presentacin de datos ms comunes es las pginas web son la tabla, que nos ayuda a organizar la informacin cmodamente en filas y columnas, mejorando notablemente el aspecto visual de los datos. Por ello en el documento se muestra de una manera clara la implementacin de las etiquetas y de la manera como se distribuyen.

INTRODUCCION A LA INTERNET

Objetivos.
Objetivo general.
Conocer mediante las etiquetas el uso de las tablas en HTML 5.0, mostrar la forma de trabajo y la importancia de las tablas en un documento web, para poderlas implementar al momento de clasificar la informacin que el usuario final obtendr de una manera fcil y organizada.

Objetivos especficos.
Mostrar la importancia del uso de las etiquetas para la creacin de tablas, para que el usuario pueda ver la informacin de una manera ordenada y distribuida, en la que el documento web mostrar al momento de implementar todas las etiquetas mostradas. Implementar de una manera rpida y sencilla todas las etiquetas para la creacin de tablas en un documento web.

INTRODUCCION A LA INTERNET

TABLAS HTML
Las tablas son una poderosa herramienta a la hora de mostrar y relacionar cierto tipo de informacin. An cuando muchos sitios son construidos (por su naturaleza) sin usar una simple tabla, existen algunas ocasiones en que el valor de las tablas se vuelve esencial. En las prximas lneas intentaremos cubrir todas las caractersticas de las tablas para estar listos para utilizarlas cuando se necesite.

TABLAS SIMPLES.
Una tabla HTML puede ser considerada, de manera simple, como un grupo de filas donde cada una de ellas contiene un grupo de celdas, una tabla simple puede ser insertada en un documento HTML usando tres elementos: el elemento HTML table (estructura contenedora principal), el elemento HTML tr (contenedor de fila) y el elemento HTML td (celda). Veamos un ejemplo:

<table> <tr> <td>Celda 1</td> <td>Celda 2</td> <td>Celda 3</td>


</tr>

Celda 1

Celda 2

Celda 3

<tr> <td>Celda 4</td> <td>Celda 5</td> <td>Celda 6</td> </tr> </table>

Celda 4

Celda 5

Celda 6

UNIFICACION DE CELDAS.
Para algunas tablas puedes necesitar unificar dos o ms celdas en una sola que pasar a ocupar el lugar de aquellas afectadas. Estas unificaciones pueden ser llevadas a cabo con los atributos "rowspan" (para unificacin vertical) y "colspan" (para unificacin horizontal), ambos disponibles para celdas (tag HTML tdy tag HTML th). <table> <tr> <td>Campo 1</td> <td>Campo 2</td> <td>Campo 3</td>

INTRODUCCION A LA INTERNET </tr> <tr> <td colspan="2">Campos 4 y 5</td> <td>Campo 6</td> </tr> <tr> <td>Campo 7</td> <td>Campo 8</td> <td>Campo 9</td> </tr> </table>

Campo 1

Campo 2

Campo 3

Campos 4 y 5

Campo 6

Campo 7

Campo 8

Campo 9

Esto tambin funciona para unificacin vertical, con una pequea diferencia debido a la naturaleza de las tablas en HTML. Cuando se unifican celdas verticalmente, las definiciones de celdas en las filas afectadas por la unificacin deben ser omitidas.

<table> <tr> <td rowspan="3">Campo unificado</td> <td>Campo 2</td> <td>Campo 3</td> </tr> <tr> <td>Campo 5</td> <td>Campo 6</td> </tr> <tr> <td>Campo 8</td> <td>Campo 9</td> </tr> </table>

Campo 2 Campo unificado Campo 5 Campo 8

Campo 3

Campo 6 Campo 9

CELDAS DE ENCABEZADO
ATRIBUTO SCOPE Las celdas afectadas por una celda de encabezado pueden ser definidas de diferentes maneras, pero la ms comn de todas es hacerlo a travs del atributo "scope". Utilizado en ambos, el tag HTML td y el tag HTML th, este atributo puede tomar cuatro valores: "row" y "col" afectando respectivamente a la fila o columna contenedora, y "rowgroup" y "colgroup" afectando respectivamente al grupo de filas o columnas contenedoras. En el ejemplo siguiente la misma "tabla simple" es definida pero esta vez con celdas de encabezado que utilizan el atributo "scope": <table>

INTRODUCCION A LA INTERNET <tr> <th scope="col">Columna 1</th> <th scope="col">Columna 2</th> <th scope="col">Columna 3</th> </tr> <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>

Columna 1 Celda 1 Celda 4

Columna 2 Celda 2 Celda 5

Columna 3 Celda 3 Celda 6

ATRIBUTO HEADERS Otra forma de asociar celdas de encabezado a celdas normales es a travs del atributo "headers". Este atributo es definido en celdas normales (tag HTML td) y enuncia un conjunto de celdas (usando sus atributos "id", separados por espacios) que proveen informacin de encabezado para la misma. Este tipo de tablas es uno de los pocos usos donde el atributo "scope" (la forma simple) no funcionara, y es mayormente utilizado para mostrar informacin cientfica. ATRIBUTO AXIS Este atributo, que puede ser definido tanto para celdas de encabezado como para celdas normales, agrupa encabezados e informacin en categoras, en las que las celdas pueden ser clasificadas. Aunque su uso es un tanto complejo, provee formas nuevas y ms amplias de proveer informacin de encabezado, especialmente en el caso de navegadores hablados para gente ciega. table> <tr> <th scope="col">Pas</th> <th scope="col" axis="ingresos">Autombiles</th> <th scope="col" axis="ingresos">Repuestos</th> <th scope="col" axis="egresos">Insumos</th> <th scope="col">Balance</th> </tr> <tr> <td scope="row" axis="Amrica">Estados Unidos</td> <td>$5.432.551</td> <td>$3.275.268</td>

INTRODUCCION A LA INTERNET <td>-$2.235,528</td> <td>$6,472,291</td> </tr> <tr> <td scope="row" axis="Europa">Reino Unido</td> <td>$3,763,221</td> <td>$1,342,231</td> <td>-$982,268</td> <td>$4,123,184</td> </tr> <tr> <td scope="row" axis="Europa">Francia</td> <td>$2.458.197</td> Pas Autombiles <td>$2.456.841</td> <td>-$1.315,548</td> <td>$3,599,490</td> Estados $5.432.551 </tr> Unidos <tr> <td scope="row" Reino axis="Amrica">Canad</td> $3,763,221 unido <td>$1.846.548</td> <td>$448.556</td> <td>-$351,559</td> Francia $2.458.197 <td>$1,943,545</td> </tr> </table Canad $1.846.548

Repuestos $3.275.268

Insumos

Balance

$6,472,291 $2.235,528

$1,342,231 -$982,268 $4,123,184 $3,599,490 $1.315,548 -$351,559 $1,943,545

$2.456.841 $448.556

AGRUPACION HORIZONTAL Una tabla HTML puede ser organizada horizontalmente en tres grupos: el encabezado (elemento HTML head), el cuerpo o cuerpos (elemento HTML tbody) y el pie (elemento HTML tfoot). Cada uno de estos elementos encierra un grupo de filas. Estas divisiones pueden ayudar a hacer las tablas ms fciles de leer, especialmente cuando la tabla se debe mostrar en ms de una pgina (por ejemplo, cuando una tabla grande debe ser impresa). Es estos casos, el encabezado y el pie son mostrados en cada pgina para mejorar la comprensin. <table> <thead> <tr> <th scope="col">Mes</th> <th scope="col">Vitamina A</th> <th scope="col">Vitamina B</th> <th scope="col">Vitamina C</th> </tr> </thead>

INTRODUCCION A LA INTERNET <tfoot> <tr> <td scope="row">Todo</td> <td>32.8</td> <td>104.2</td> <td>21.0</td> </tr> </tfoot> <tbody> <tr> <td scope="row">Enero</td> <td>12.8</td> <td>42.6</td> <td>5.2</td> </tr> <tr> <td scope="row">Febrero</td> <td>10.5</td> <td>30.1</td> <td>10.4</td> </tr> <tr> <td scope="row">Marzo</td> <td>9.5</td> <td>31.5</td> <td>5.4</td> </tr> </tbody> </table>

Mes

Vitamina A Vitamina B Vitamina C

Todo

32.8

104.2

21.0

Enero

12.8

42.6

5.2

Febrero 10.5

30.1

10.4

Marzo

9.5

31.5

5.4

EL TITULO DE LA TABLA
El ttulo de una tabla, definido mediante el elemento HTML capitn, debera describir breve y precisamente el contenido y la naturaleza de la tabla y es habitualmente representado en algn lugar cercano a la tabla (su posicin puede ser establecida usando hojas de estilo). Recuerda que el elemento HTML capitn solo est permitido si va justo despus del tag de apertura de la tabla. <Table> <Capitn>Ttulo de la tabla</capitn> <Tr> <Td>Contenido 1</td> <Td>Contenido 2</td> <Td>Contenido 3</td> </Tr> <Tr> <Td>Contenido 4</td> <Td>Contenido 5</td> Ttulo de la tabla Contenido Contenido Contenido 1 2 3 Contenido Contenido Contenido 4 5 6

INTRODUCCION A LA INTERNET <Td>Contenido 6</td> </Tr> </Table>

SUMARIOS
Tambin puedes agregar una formacin acerca del contenido y la naturaleza de la tabla usando el atributo "sumar", el cual debe ser definido en el tag HTML table. El valor de este atributo est pensado para describir la tabla en una forma ms larga que el ttulo, ayudando a mejor el entendimiento del contenido de la misma. <table sumar="Esta tabla muestra la temperatura media en los meses de Junio, Julio y Agosto en la ciudad de Londres"> <Capitn>Grfico de temperatura de Londres</capitn> <TR> <Th scope="col">Junior</Th> <Th scope="col">Julio</Th> <Th scope="col">Augusto</Th> </TR> <TR> <Td>60F</td> <Td>65F</td> <Td>62F</td> </Tr> </Table> Grfico de temperatura de Londres Junio 60F Julio 65F Agosto 62F