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