CLASE MARZO 4 DE 2015 (TAREA)

• Ventana emergente:

En Internet, una ventana emergente (en inglés se le conoce como pop-up) es una ventana del navegador de Internet que aparece automáticamente, sin ser solicitada, y que usualmente tiene como finalidad desplegar publicidad, dirigir tráfico de Internet a ciertas páginas, o recopilar direcciones de correo electrónico.

Una ventana emergente no solicitada es una molestia para los usuarios, ya que usualmente son muy intrusivas. Usualmente son disparadas por cierto tipo de contenido susceptible a usar este tipo de medios para publicitarse o invitar a visitar páginas de Internet, las páginas con contenido para adultos son el ejemplo más común.

• Bloqueo de ventanas emergentes:

Prácticamente todos los navegadores modernos de Internet cuentan con bloqueadores de ventanas emergentes no solicitadas, y ya están activados por defecto. 

Nota que aún con bloqueado de páginas emergentes pudiera haber casos en los que algunas aparecieran (ya sean pop-up o pop-under).

No se debe confundir el bloqueo de ventanas emergentes con el bloqueo de publicidad en páginas de Internet. Para bloquear estos últimos en tu navegador de Internet, debes de usar extensiones o complementos escritos por terceros (los navegadores de Internet no lo incluyen por defecto).

• Abrir ventanas secundarias en Javascript:

Una de las utilidades más interesantes de Javascript es el control de ventanas secundarias (popups en inglés). Las ventanas secundarias son las que se abren adicionalmente a la ventana principal del navegador. Suelen ser más pequeñas que las ventanas normales y generalmente no tienen los menús del navegador, barra de direcciones, etc. 

Con Javascript podemos controlar los popups para hacer cosas como abrirlos, cerrarlos, darles el foco, pasar información de una ventana a otra, etc. 

• Apertura y configuración de popups con javascript

Para abrir una ventana con Javascript podemos utilizar la sentencia window.open(). No pasa nada por que no conozcas Javascript, puesto que es muy sencillo utilizarlo para este caso. Vamos a ver paso a paso cómo abrir una ventana secundaria utilizando Javascript. 

• Parametros de window.open()

Característica Descripción dependent: (Javascript 1.2) Si es 'yes', crea una nueva ventana como un hijo de la ventana actual. Una ventana dependiente se cierra cuando su ventana madre se cierra. En la plataforma Windows, una ventana dependiente no se muestra en la barra de tareas. directories: Si es 'yes', crea los botones de directorio comunes. height: (Javascript 1.0 y 1.1) Especifica la altura de la ventana en pixeles. hotkeys: (Javascript 1.2) Si 'no' (o 0), desactiva la mayoría de las teclas rápidas en una ventana que no tiene barra de menú. Las teclas rápidas de seguridad y de salir siguen activadas. location: Si es 'yes', crea un campo de entrada de dirección (URL). menubar: Si es 'yes', crea el menú en la parte de arriba de la ventana. personalbar: (Javascript 1.2) Si es 'yes', crea la barra personal, que despliega los botones desde la carpeta de la barra personal de los marcadores. resizable: Si es 'yes', permite al usuario cambiar de tamaño la ventana. scrollbars: Si es 'yes', crea barras de desplazamiento horizontales y verticales cuando el documento crece más grande que las dimensiones de la ventana. status: Si es 'yes', crea la barra de estado en la parte de abajo de la ventana. toolbar: Si es 'yes', crea la barra de navegación estándar, con botones como 'Atrás' y 'Adelante'. width: (Javascript 1.0 y 1.1) Especifica el ancho de la ventana en pixels.

Tomado de :

http://aprenderinternet.about.com/od/Glosario/g/Que-Es-Una-Ventana-Emergente.htm

http://www.desarrolloweb.com/articulos/1074.php

http://www.desarrolloweb.com/articulos/18.php

http://www.lgm.cl/trabajos/params.html

CLASE FEBRERO 25 DE 2015

Tema: Funciones

Sublime text en linux mint:

• Sudo -- no es el administrador pero quiere serlo

• Root -- es el máximo usuario que tiene un sistema

• Emolar -- es imitar algo

• apt - get - install

• sudo apt - get install sublime - text

• ls -- visualizar archivos de una carpeta

• remove -- quitar

• pwd -- donde estoy

• $ -- camino

• cd -- ingresar o salir de un directorio

Etiquetas para java script:

• toUppercase -- convierte un texto a mayúscula

• length -- contar as letras o caracteres de un texto

• tolowercase -- convierte un texto a minúscula

• Function -- unico nombre, debe empezar con una letra

• <input type = "button" valve = "Programa 4"  onclick = "uno () ; " >

CRONOGRAMA PRIMER PERIODO

CLASE FEBRERO 18 DE 2015

TEMA: Java Script

Con respecto a los ejercicios dejados en la web la semana anterior, el docente despejo dudas que se presentaban a nivel general.

if (Condicion) {

}                                          Lo necesario

------------------------- 
else  {
                                             Complemento de la condicion
}



index of () ---- Para capturar la posicion de una cadena de texto

Ejemplo:

Palabra hola

index of (2)
indexo of= o

• La primera posicion es 0

• % residuo de la division entera

         20% 2 = 0 ---- numero par

•       == ---- Java script

• != ---- diferente

•                     Normal                                         html /java script

                            =                                                               ==

                           <>                                                              !=

                                >                                                                      >

                                <                                                                      <

                              >=                                                                     >=

                              <=                                                                     <=

CLASE FEBRERO 18 DE 2015 (TAREA 3)

El docente dejo unos ejercicios, en los cuales tocaba escribirlos en java script, sus condigos son los siguientes:

• 
  

<script>

a = prompt(" Digite un numero", "Digite un numero entero");
a= parseFloat(a);

if (a>=0) {
   alert("Es positivo");
}
else {
   alert("Es negativo");
}


</script>

• 
  

<script>


var a= prompt("Digite la temperatura", "Digite temperatura en °C");
a = parseFloat(a);
b =( 32 + (1.8*a ));
alert("La temperatura en °F es: "+b);


</script>

• 
  

<script>

a = prompt("Digite una nota","Digite la primera nota");
b = prompt("Digite una nota","Digite la segunda nota");
a = parseFloat(a);
b = parseFloat(b);

if (a>b) {
  alert("La segunda es la peor")
  }
else {
  alert("La primera es la peor")
  }  



</script>

• 
  

<script>

var n = prompt("Numero");

n = parseInt(n);

if (n > 0){

alert("Numero es Positivo");

}

else{

alert("Numero es Negativo");

n = n * -1;

}

if (n % 2 == 0)

alert("Numero es Par");

else

alert("Numero es Impar");

document.write("<br>La tabla de Multiplicar es : <br>");

for (i = 1; i <= 10; i++){

document.write(n + " x " + i + " = " + ( n * i) + "<br>");

}

</script>

CLASE FEBRERO 18 DE 2015 (TAREA 2)

El docente, dejo una serie de paginas en la web, en las cuales habian unos ejercicios y debiamos de copiar y pegarlos en el blog, estos son:

• 
  

<script type="text/javascript">

  alert("Hola Mundo!");
  
</script>

• 
  

<script>

var a numero_1 = 3;
var b numero_2 = 1;
var c resultado = numero_1 + numero_2;

</script>

• 
  

<script>

var iva = 16;        
var total = 234.65;  

</script>

• 
  

<script>

var mensaje = "Bienvenido a nuestro sitio web";
var nombreProducto = 'Producto ABC';
var letraSeleccionada = 'c';


</script>

• 
  

<script>

var dia1 = "Lunes";
var dia2 = "Martes";
var dia3 = "Miercoles";
var dia4 = "Jueves";
var dia5 = "Viernes";
var dia6 = "Sabado";
var dia7 = "Domingo";


</script>

• 
  

<script>

// Array que almacena los 12 meses del año
var meses = ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"];

// Se muestra el nombre de cada mes
alert(meses[0]);
alert(meses[1]);
alert(meses[2]);
alert(meses[3]);
alert(meses[4]);
alert(meses[5]);
alert(meses[6]);
alert(meses[7]);
alert(meses[8]);
alert(meses[9]);
alert(meses[10]);
alert(meses[11]);


</script>

• 
  

<script>

var mensaje = "Hola Mundo";
var numeroLetras = mensaje.length; // numeroLetras = 10

</script>

• 
  

<script>

var mensaje1 = "Hola";

var mensaje2 = " Mundo";

var mensaje = mensaje1 + mensaje2; // mensaje = "Hola Mundo"

</script>

• 
  

<script>

var mensaje1 = "Hola";

var mensaje2 = mensaje1.concat(" Mundo"); // mensaje2 = "Hola Mundo"

</script>

• 
  

<script>

var variable1 = "Hola ";

var variable2 = 3;

var mensaje = variable1 + variable2; // mensaje = "Hola 3"

</script>

• 
  

<Script>

var mensaje1 = "Hola";

var mensaje2 = "Mundo";

var mensaje = mensaje1 + mensaje2; // mensaje = "HolaMundo"

</Script>

• 
  

<script>

var mensaje1 = "Hola";

var mensaje2 = "Mundo";

var mensaje = mensaje1 + " " + mensaje2; // mensaje = "Hola Mundo"

</script>

• 
  

<script>

var mensaje1 = "Hola";

var mensaje2 = mensaje1.toUpperCase(); // mensaje2 = "HOLA"

</script>

• 
  

<script>

var mensaje1 = "HolA";

var mensaje2 = mensaje1.toLowerCase(); // mensaje2 = "hola"

</script>

• 
  

<script>

var mensaje = "Hola";

var posicion = mensaje.indexOf('a'); // posicion = 3

posicion = mensaje.indexOf('b');     // posicion = -1

</script>

• 
  

<script>

var mensaje = "Hola Mundo";

var porcion = mensaje.substring(2); // porcion = "la Mundo"

porcion = mensaje.substring(5);     // porcion = "Mundo"

</script>

• 
  

<script>

var mensaje = "Hola Mundo, soy una cadena de texto!";

var palabras = mensaje.split(" ");

// palabras = ["Hola", "Mundo,", "soy", "una", "cadena", "de", "texto!"];

</script>

• 
  

<script>

var vocales = ["a", "e", "i", "o", "u"];

var numeroVocales = vocales.length; // numeroVocales = 5

</script>

• 
  

<script>

var vocales = ["a", "e", "i", "o", "u"];

var numeroVocales = vocales.length; // numeroVocales = 5

</script>

• 
  

<script>

var vocales = ["a", "e", "i", "o", "u"];

var numeroVocales = vocales.length; // numeroVocales = 5

</script>

• 
  

<script>

var array1 = [1, 2, 3];

array2 = array1.concat(4, 5, 6);   // array2 = [1, 2, 3, 4, 5, 6]

array3 = array1.concat([4, 5, 6]); // array3 = [1, 2, 3, 4, 5, 6]

</script>

• 
  

<script>

var vocales = ["a", "e", "i", "o", "u"];

var numeroVocales = vocales.length; // numeroVocales = 5

</script>

• 
  

<script>

var array = ["hola", "mundo"];

var mensaje = array.join(""); // mensaje = "holamundo"

mensaje = array.join(" ");    // mensaje = "hola mundo"

</script>

• 
  

<script>

var array = [1, 2, 3];

var ultimo = array.pop();

// ahora array = [1, 2], ultimo = 3

</script>

• 
  

<script>

var array = [1, 2, 3];

array.push(4);

// ahora array = [1, 2, 3, 4]

</script>

• 
  

<script>

var array = [1, 2, 3];

array.reverse();

// ahora array = [3, 2, 1]

</script>

• 
  

<script>

var array = [1, 2, 3];

var primero = array.shift();

// ahora array = [2, 3], primero = 1

</script>

• 
  

<script>

var numero1 = 0;

var numero2 = 0;

if(isNaN(numero1/numero2)) {

  alert("La división no está definida para los números indicados");

}

else {

  alert("La división es igual a => " + numero1/numero2);

}

</script>

• 
  

<script>

var numero1 = 10;

var numero2 = 0;

alert(numero1/numero2); // se muestra el valor Infinity

</script>

• 
  

<script>

var numero1 = 4564.34567;

numero1.toFixed(2); // 4564.35

numero1.toFixed(6); // 4564.345670

numero1.toFixed(); // 4564

</script>

Tomado de:

http://librosweb.es/javascript/capitulo_2.html

http://librosweb.es/javascript/capitulo_3/variables.html

http://librosweb.es/javascript/capitulo_3/tipos_de_variables.html

http://librosweb.es/javascript/capitulo_3/funciones_y_propiedades_basicas_de_javascript.html

CLASE FEBRERO 17 DE 2015 (TAREA)

Hola Bucaramanga Colombia Santander Mundo Coinsda Decimo b Reloj Mesa Silla

Francia Imperial

---

Francia Monarquica Alemania Imperial Nueva Granada Reino de España Prusia Reino de Prusia Hola Carpeta 2015

CLASE FEBRERO 11 DE 2015

TEMA: Java script

Man: 
(Metropolitan access network)
B/manga, Lebrija Giron, Piedecuesta

Wan:
Bogota,Medellin, B/manga

• Teamview: Escritorio remoto)

          Nombre de usuario (para entrar a otra maquina se necesita password)

• Tierra quimica ----- hidrosolta

• Falso polo a tierra, se conecta en el neitro u se dirige a tierra.

• El estabilizador elimina los picos de corriente, en picos de corriente se quema el fusible y no el pc.

• Al colocar a mas volteos menos consumo

• Prompt ---- para digitar dato (lo toma como cadena de texto)

        a= ParseInt

        b= ParseInt

• Parse Int, convierte una cadena de texto a numero entero 

• ParseFloat, convierte una cadena de texto a numero decimal.

• /* - */ cometario para varias lineas

• // Comentario para una sola linea

• Var - para difinir variables

• RD (Remote Desktop) 

 -------- (Leer) Prompt

--------- (Imprimir) alert 

                            document.write

--------- (Operacion) Variables o Var

---- a= 10    Ó  var a=10

      b=20          var b=20

" " -- es la que se muestra al usuario

Java

CLASE FEBRERO 4 DE 2015

TEMA: Java Script

<html>
<head>
<title>
</title>
</head>
<body>
</body>
</html>

¿Donde se pone el java script?

Por lo general, el java script se puede poner antes de la etiqueta <html>, en el body o en head pero algunos recomiendan ponerlo dentro de las etiquetas <bdoy> </body>.

<script>

alert ("hola")
alert ("mundo")

</script>

• El anteriro script, en forma de algoritmo se puede apreciar de la siguiente manera:

• Las etiquetas alert y document.write en java script, en algoritmos equivalen a :

<script>

var a,b,c;

a=14;

b=20;

c=a+b;

alert (c);

    o

alert ("la respuesta es:"c")

    o

document.write (c);

</script>

• El anteriro script, en forma de algoritmo se puede apreciar de la siguiente manera:

2015

Año 2015

Grado 10

CLASE NOVIEMBRE 4 DE 2014

TEMA: Acumulativo

Se realizo el acumulativo en el aula de clase, y no lo presentaron las personas que habian entregado una actividad la semana anterior. Las personas fueron:

• Sebastian carrizoza
• Natalia Duarte
• Gabriela Garcia
• Jose Medina 
• Gloria Rodriguez
• Diego Valencia

CLASE OCTUBRE 28 DE 2014

TEMA: Html

• El docente realizo una serie de ejercicios  y de preguntas en el aula de clase, para poder subir las notas.
• Nos dirigimos a la sala de informática, en la cual debíamos de crear una carpeta con el nombre "carpetica.2014" en ella debíamos de tener una llamada "imagenes" y una pagina web con las indicaciones dadas por el profesor llamada "index.html" que debíamos enviársela comprimida a su correo para así quedar exentos de acumulativo o tener materia en 100.

CLASE OCTUBRE 21 DE 2014

TEMA: Tablas es html

• Para crear una tabla, se utiliza la etiqueta <table> </table>
• Para una fila se coloca <tr> </tr>
• Para una columna se coloca <td> </td>

&nbsp; ------ se utiliza para dejar un espacio en blanco

col ---- horizontal
row --- vertical

• Dreamweaver es un programada editor de paginas web.

align="center" valign="middle" ------ lo centra en la parte superior

• valign ----- top; middle; bottom
• align -------- left; center; right

CLASE OCTUBRE 21 DE 2014

TEMA: Tarea

El docente, en la web publico una serie de significados que debíamos consultar, ademas de una pregunta que nos puso en clase: ¿Como cambiar los filtros?

¿QUE ES UNA FILA?: 
Una fila es el orden de cuadrantes en sentido horizontal.

¿QUE ES UNA COLUMNA?: 
Es aquella que está formada por celdas en forma vertical. 

ANCHO DE UNA TABLA (PX Y %)

Para definir la anchura que deseamos que tenga una celda, usaremos la palábra mágica width. Como ya os he comentado podemos utilizar distintas unidades como por ejemplo centímetros (cm), puntos (pt), porcentajes (%) o pixeles (px) entre otros.

Se recomienda usar siempre pixeles, pues son las más comodas. Recordemos que se indican con las letras "px" justo después del número y recordemos también que no conviene dejar espacios en blanco entre la cifra y las letras px.

TABLE:

En español tabla, es aquella que está formada por uno o más conjuntos de filas (horizontal) y columnas (vertical)

¿QUÉ ES TD Y TR?

td y tr son etiquetas usadas en html por la etiqueta table  td define las columnas y tr define las filas en una tabla. 

¿QUÉ ES COLSPAN Y ROWSPAN?

El colspan, sirve para unificar dos celdas, y el rowspan, sirve para colocar una celda independiente, de las demás.

¿Como Colocar Color De Fondo A Una Tabla En Html?

Para cambiar el color de una tabla, se coloca dentro de la etiqueta <table> la etiqueta bgcolor

¿COMO COLOCAR IMAGENES EN UNA CELDA ESPECIFICA?

Para colocar en una celda, una imagen especifica, se utiliza la etiqueta <IMG SRC> pero se complementa con el <tr> y el <td><TR><TD><IMG SRC="imagenes/babe.gif"></TD></TR> 

Tomado de:

http://es.kioskea.net/forum/affich-323541-que-es-una-fila-una-columna-y-una-celda
http://www.comocreartuweb.com/ejemplo-con-tablas/definiendo-tablas/anchura-de-celdas.html

http://www.htmlquick.com/es/reference/tags/td.html

http://www.htmlquick.com/es/reference/tags/tr.html

http://www.todoele.net/DukeWorkshopHtml/html1/tablas.htm

-----------------------------------------------------------------------------------------------------------

TABLAS EN HTML

Este tutorial explica la forma correcta y completa de definir tablas en documentos HTML. Está pensado tanto para principiantes como para avanzados, al presentar algunas herramientas e ideas que muchas veces no son usadas o conocidas.

Las tablas son un poderosa herramienta a la hora de mostrar y relacionar cierto tipo de información. Aún 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 escencial.

En las próximas líneas intentaremos cubrir todas las características de las tablas para estar listos para utilizarlas cuando se necesite.

Simple tables

Una tabla HTML puede ser considerada, de manera simple, como un grupo de filas donde cada una de ellas contiene un grupo de celdas (y no alrevés). Las tablas, como toda estructura en los documentosHTML, son definidas usando elementos. Entonces, una tabla simple puede ser insertada en un documento HTML usando tres elementos: el elemento HTML table (estructura contenedora principal), elelemento 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>
<tr>
<td>Celda 4</td>
<td>Celda 5</td>
<td>Celda 6</td>
</tr>
</table>

Celda 1	Celda 2	Celda 3
Celda 4	Celda 5	Celda 6

Nota: los bordes en este ejemplo fueron establecidos mediante el uso de CSS para mejorar la visualización. Te recomiendo evitar el uso de atributos presentacionales como "border" ya que son candidatos a ser desaprobados en el futuro.

Además, nota que, las celdas vacías deben ser declaradas utilizando sus respectivos tags para lograr una correctitud en el código. cuando el contenido de una celda debe ser vacío, deberías usar una espacio en blanco (&nbsp;) como su contenido. Esto hará que tu página sea más compatible ya que algunos navegadores tienen problemas representando celdas vacías.

UNIFICACIÓN DE CELDAS

Para algunas tablas puedes necesitar unificar dos o más 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 unificación vertical) y "colspan" (para unificación horizontal), ambos disponibles para celdas (tag HTMLtd y tag HTML th).

Código

<table>
<tr>
<td>Campo 1</td>
<td>Campo 2</td>
<td>Campo 3</td>
</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>

Vista

Campo 1	Campo 2	Campo 3
Campos 4 y 5		Campo 6
Campo 7	Campo 8	Campo 9

Mira en el ejemplo anterior cómo una definición de celda que unifica a dos, es el equivalente a dos definiciones de celdas simples. Esto también funciona para uificación vertical, con una pequeña diferencia debido a la naturaleza de las tables en HTML. Cuando se unifican celdas verticalmente, las definiciones de celdas en las filas afectadas por la unificación deben ser omitidas. Mira el ejemplo, donde los campos 1, 4 y 7 son unificados:

Código

<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>

Vista

Campo unificado	Campo 2	Campo 3
	Campo 5	Campo 6
	Campo 8	Campo 9

Debes tener cuidado al unificar filas y columnas de no encimar las celdas unificadas. Esto podría tener resultados inesperados.

CELDAS DE ENCABEZADO

Dos tipos de celda pueden ser definidas en una tabla HTML. Una de ellas es la celda simple (elementoHTML td), ya definido en los ejemplos anteriores, y la otra es un tipo especial de celda (elemento HTMLth) que contiene información de encabezado para un conjunto de celdas específicas.

Los navegadores pueden representar el contenido de las celdas de encabezado de una forma especial (usualmente como texto centrado y en negrita), atributos que pueden ser visualmente logrados con la utilización de celdas normales (elemento HTML td) con atributos presentacionales (texto centrado y en negrita). Pero las celdas de encabezado proveen más información que puede ser útil para navegadores no visuales (los navegadores hablados pueden hablar al usuario el contenido de la celda e inmediatamente asociarlo a la celda de encabezado) y motores de búsqueda.

EL ATRIBUTO "SCOPE"

Las celdas afectadas por una celda de encabezado pueden ser definidas de diferentes maneras, pero la más común de todas es hacerlo a través del atributo "scope". Utilizado en ambos, el tag HTML td y eltag 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 contenedora (descriptos más adelante en este tutorial).

En el ejemplo siguiente la misma "tabla simple" es definida pero esta vez con celdas de encabezado que utilizan el atributo "scope":

Código

<table>
<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>

Vista

Columna 1	Columna 2	Columna 3
Celda 1	Celda 2	Celda 3
Celda 4	Celda 5	Celda 6

Como podemos deducir del párrafo anterior, en este ejemplo, la columna 1 provee información de encabezado para las celdas 1 y 4, la columna 2 para las celdas 2 y 5 y la columna 3 para las celdas 3 y 6.

Nota que, como este atributo puede también ser definido en celdas normales (tag HTML td), las celdas normales también pueden ser usadas como celdas de encabezado. Este es el caso en que una celda provee ambas, información de encabezado y contenido. En cualquier otro caso se deben utilizar celdas de encabezado (tag HTML th).

EL ATRIBUTO "HEADERS"

Otra forma de asociar celdas de encabezado a celdas normales es a través 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 información de encabezado para la misma.

Existe un escaso número de casos (y son muy raros) en que este atributo no puede ser reemplazado por el atributo "scope". El próximo ejemplo muestra una tabla superpuesta, donde existe una línea oblícua de celdas que va desde la esquina superior izquierda a la esquina inferior derecha y sirve como límite para definir qué celdas reciben los encabezados superiores y de la derecha, y cuáles los inferiores y de la izquierda.

Código

<table>
<tr>
<td>&nbsp;</td>
<th id="h1">H1</th>
<th id="h2">H2</th>
<th id="h3">H3</th>
<td>&nbsp;</td>
</tr>
<tr>
<th id="h4">H4</th>
<td headers="h1 h4 h7 h10">C1</td>
<td headers="h2 h7">T1</td>
<td headers="h3 h7">T2</td>
<th id="h7">H7</th>
</tr>
<tr>
<th id="h5">H5</th>
<td headers="h1 h5">B1</td>
<td headers="h2 h5 h8 h11">C2</td>
<td headers="h3 h8">T3</td>
<th id="h8">H8</th>
</tr>
<tr>
<th id="h6">H6</th>
<td headers="h1 h6">B2</td>
<td headers="h2 h6">B3</td>
<td headers="h3 h6 h9 h12">C3</td>
<th id="h9">H9</th>
</tr>
<tr>
<td>&nbsp;</td>
<th id="h10">H10</th>
<th id="h11">H11</th>
<th id="h12">H12</th>
<td>&nbsp;</td>
</tr>
</table>

Vista

	H1	H2	H3
H4	C1	T1	T2	H7
H5	B1	C2	T3	H8
H6	B2	B3	C3	H9
	H10	H11	H12

La información en esta tabla no es completamente visible, pero semánticamente provee un muy bien definido conjunto de encabezados para cada celda. Por ejemplo, la celda "C1" (en el eje oblícuo) con cuatro encabezados (H1, H4, H7 y H10), y la celda T1 (por encima del eje) con dos (H2 y H7).

Este tipo de tablas es uno de los pocos usos donde el atributo "scope" (la forma simple) no funcionaría, y es mayormente utilizado para mostrar información científica.

EL ATRIBUTO "AXIS"

Este atributo, que puede ser definido tanto para celdas de encabezado como para celdas normales, agrupa encabezados e información en categorías, en las que las celdas pueden ser clasificadas. Auque su uso es un tanto complejo, provee formas nuevas y más amplias de proveer información de encabezado, especialmente en el caso de navegadores hablados para gente ciega.

El siguiente ejemplo ilustra el uso del atributo "axis" como una forma de hacer a la información más legible y fácil de entender.

Código

<table>
<tr>
<th scope="col">País</th>
<th scope="col" axis="ingresos">Automóbiles</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="América">Estados Unidos</td>
<td>$5.432.551</td>
<td>$3.275.268</td>
<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>
<td>$2.456.841</td>
<td>-$1.315,548</td>
<td>$3,599,490</td>
</tr>
<tr>
<td scope="row" axis="América">Canadá</td>
<td>$1.846.548</td>
<td>$448.556</td>
<td>-$351,559</td>
<td>$1,943,545</td>
</tr>
</table>

Vista

País	Automóbiles	Repuestos	Insumos	Balance
Estados Unidos	$5.432.551	$3.275.268	-$2.235,528	$6,472,291
Reino unido	$3,763,221	$1,342,231	-$982,268	$4,123,184
Francia	$2.458.197	$2.456.841	-$1.315,548	$3,599,490
Canadá	$1.846.548	$448.556	-$351,559	$1,943,545

Este ejemplo establece dos tipos de ejes o categorías: una categoría de región (Europa y América) y una categoría de ingresos/egresos. En los navegadores hablados esta información no visual tiene mucho sentido y ayuda a mejorar la comprensión de tablas con estructuras complicadas.

AGRUPACIÓN HORIZONTAL

Una tabla HTML puede ser organizada horizontalmente en tres grupos: el encabezado (elemento HTMLthead), 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 más fáciles de leer, especialmente cuando la tabla se debe mostrar en más de una página (por ejemplo, cuando una tabla grande debe ser impresa). Es estos casos, el encabezado y el pie son mostrados en cada página para mejorar la comprensión.

Código

<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>
<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>

Vista

HTML 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

Nota que el pie es ubicado en el código, preferentemente justo debajo del encabezado al comienzo de la tabla. Esto se debe a que en tablas muy largas, que pueden tomar algún tiempo en descargarse completamente (hasta minutos), los navegadores pueden decidir mostrar el pie aún antes de que todo el cuerpo hay sido recibido.

Una sola tabla puede tener más de un cuerpo. Esto permite a los autores dividir las filas en grupos. Por ejemplo, en la tabla de arriba (si abarcase todo el año) los meses podrían ser agrupados en cuatrimestres, generando así tres cuerpos.

Agrupación vertical

La otra forma de agrupar celdas en una tabla es mediante la agrupación vertical. Esto no solo es útil para agrupar columnas temáticamente, sino también para asignar atributos a columas enteras de una tabla. La agrupación puede lograrse usando dos tags: el tag HTML colgroup y el tag HTML col. Estos dos tags pueden ser usados por separado o conjuntamente.

En el ejemplo siguiente insertaremos una tabla muy simple que definirá atributos a la columna usando eltag HTML col:

<table>
<col style="width: 200px" />
<col style="width: 100px" span="3" />
<tr>
<th scope="row">Enero</th>
<td>12.8</td>
<td>42.6</td>
<td>5.2</td>
</tr>
<tr>
<th scope="row">Febrero</th>
<td>10.5</td>
<td>30.1</td>
<td>10.4</td>
</tr>
<tr>
<th scope="row">Marzo</th>
<td>9.5</td>
<td>31.5</td>
<td>5.4</td>
</tr>
</table>

HTML table with the HTML col tag.">

Enero	12.8	42.6	5.2
Febrero	10.5	30.1	10.4
Marzo	9.5	31.5	5.4

Nota el cierre del tag utilizado (" />"), con el fin de hacer el código compatible con XHTML. Para aprender más acerca de los atributos utilizados en este ejemplo, visita la página de referencia del tagHTML col.

En el ejemplo anterior, atributos comunes han sido definidos para todas las celdas de las columnas afectadas de una sola vez, pero no se pueden definir grupos de columnas semánticamente sin usar eltag HTML colgroup:

<table>
<colgroup style="width: 150px" />
<colgroup style="width: 50px" span="3" />
<colgroup style="width: 100px" />
<tr>
<th scope="row">Enero</th>
<td>12.8</td>
<td>42.6</td>
<td>5.2</td>
<td>Incompleto</td>
</tr>
<tr>
<th scope="row">Febrero</th>
<td>10.5</td>
<td>30.1</td>
<td>10.4</td>
<td>Incompleto</td>
</tr>
<tr>
<th scope="row">Marzo</th>
<td>9.5</td>
<td>31.5</td>
<td>5.4</td>
<td>Completo</td>
</tr>
</table>

HTML table with the HTML colgroup tag.">

Enero	12.8	42.6	5.2	Incompleto
Febrero	10.5	30.1	10.4	Incompleto
Marzo	9.5	31.5	5.4	Completo

Ahora en este ejemplo tenemos tres verdaderos, semánticamente hablando, grupos de columnas con los atributos para todas las celdas del grupo correctamente establecidos.

Entonces, ¿para qué sirve el tag HTML col entonces? Existen algunos casos en que los autores necesitan establecer grupos de columnas (semánticamente) pero aplicando diferentes atributos a las columnas en un mismo grupo de columnas. Para resolver este problema, pueden utilizarse ambos tags anidados:

<table>
<colgroup style="width: 150px" />
<colgroup>
<col style="width: 50px" span="2" />
<col style="width: 75px" />
</colgroup>
<colgroup style="width: 100px" />
<tr>
<th scope="row">Enero</th>
<td>12.8</td>
<td>42.6</td>
<td>5.2</td>
<td>Incompleto</td>
</tr>
<tr>
<th scope="row">Febrero</th>
<td>10.5</td>
<td>30.1</td>
<td>10.4</td>
<td>Incompleto</td>
</tr>
<tr>
<th scope="row">Marzo</th>
<td>9.5</td>
<td>31.5</td>
<td>5.4</td>
<td>Completo</td>
</tr>
</table>

HTML table with the HTML colgroup tag and the HTML col tag.">

Enero	12.8	42.6	5.2	Incompleto
Febrero	10.5	30.1	10.4	Incompleto
Marzo	9.5	31.5	5.4	Completo

De esta forma aún estamos definiendo tres grupos de columnas pero a la vez damos a las columnas atributos específicos sin importar si pertenecen al mismo grupo de columnas o no.

EL TÍTULO DE UNA TABLA

El título de una tabla, definido mediante el elemento HTML caption, debería describir breve y precisamente el contenido y la naturaleza de la tabla y es habitualmente representado en algún lugar cercano a la tabla (su posición puede ser establecida usando hojas de estilo). Recuerda que el elementoHTML caption solo está permitido si va justo después del tag de apertura de la tabla.

<table>
<caption>Título de la tabla</caption>
<tr>
<td>Contenido 1</td>
<td>Contenido 2</td>
<td>Contenido 3</td>
</tr>
<tr>
<td>Contenido 4</td>
<td>Contenido 5</td>
<td>Contenido 6</td>
</tr>
</table>

Título de la tabla
Contenido 1	Contenido 2	Contenido 3
Contenido 4	Contenido 5	Contenido 6

SUMARIOS

También puedes agregar unformación acerca del contenido y la naturaleza de la tabla usando el atributo "summary", el cual debe ser definido en el tag HTML table. El valor de este atributo está pensado para describir la tabla en una forma más larga que el título, ayudando a mejor el entendimiento del contenido de la misma.

<table summary="Esta tabla muestra la temperatura media en los meses de Junio, Julio y Agosto en la ciudad de Londres">
<caption>Gráfico de temperatura de Londres</caption>
<tr>
<th scope="col">Junio</th>
<th scope="col">Julio</th>
<th scope="col">Agosto</th>
</tr>
<tr>
<td>60ºF</td>
<td>65ºF</td>
<td>62ºF</td>
</tr>
</table>

Gráfico de temperatura de Londres
Junio	Julio	Agosto
60ºF	65ºF	62ºF

TABLAS

<TABLE> <TR> <TD>

Las tablas surgieron con la versión HTML 3.0. Las tablas nos permiten representar y ordenar cualquier elemento de nuestra presentación en diferentes filas y columnas de modo que podamos resumir grandes cantidades de información de una manera que puede representarse rápida y fácilmente.

El contenido de una tabla lo debemos desarrollar entre las tags <table>.....</table>.

Las tablas se definen fila a fila, celda a celda, comenzando desde la celda superior izquierda. Las columnas se calcularán automáticamente según las celdas que hay en cada fila.

Cada fila de la tabla se indica mediante las tags <tr>.....</tr>. Las tags <th> y<td> con sus correspondientes tags de cierre, indican para indicar las filas individuales dentro de cada fila. Las tags <th>.....</th> indican que se trata de celdas que sirven como encabezado de tabla y suelen visualizarse en negrita. Las tags <td>.....</td> indican que se trata de celdas comunes.

<HTML> 
<HEAD> 
<TITLE>Ejemplo 10</TITLE> 
</HEAD> 
<BODY> 

<H1>Tablas b&aacute;sicas</H1> 

<TABLE BORDER="1"> 
<TR> 
   <TH>Cabereca 1</TH> 
   <TH>Cabereca 2</TH> 
   <TH>Cabereca 3</TH> 
</TR> 
<TR> 
   <TD>Dato 1</TD> 
   <TD>Dato 2</TD> 
   <TD>Dato 3</TD> 
</TR> 
<TR> 
   <TD>Dato 4</TD> 
   <TD>Dato 5</TD> 
   <TD>Dato 6</TD> 
</TR> 
</TABLE> 

</BODY> 
</HTML> 

TOMADO DE:

http://www.htmlquick.com/es/tutorials/tables.html

http://www.webestilo.com/html/cap5a.phtml