P. 1
Tablas Simples

Tablas Simples

|Views: 1.949|Likes:
Publicado porjaviertorresrubio

More info:

Published by: javiertorresrubio on Jul 06, 2011
Copyright:Attribution Non-commercial

Availability:

Read on Scribd mobile: iPhone, iPad and Android.
download as DOCX, PDF, TXT or read online from Scribd
See more
See less

03/26/2013

pdf

text

original

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. Las tablas, así como toda estructura en documentos HTML, son definidas usando tags. Una tabla simple puede ser insertada en un documento HTML usando tres tags: el tag HTML table (principal contenedor), el tag HTML tr (fila contenedora) y el tag HTML td (celda simple). Veamos un ejemplo:

Código <table border="1" summary="Ejemplo de tabla simple."> <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

Visualización Celd Celda 3 a2

Tipos de celdas
Dos tipos de celda pueden ser definidos en una tabla HTML. Una de ellas es la celda simple (tag HTML td) anteriormente utilizada en el ejemplo de "tabla simple", y la otra es un tipo de celda especial (tag HTML th) que contiene información de encabezado para todas las celdas en la columna (pertenecientes al mismo grupo horizontal). Los navegadores pueden graficar el contenido de las celdas de encabezado en una manera especial (usualmente, texto centrado y en negrita). Este tipo de celda es comúnmente encontrado en el encabezado de una tabla. En el ejemplo siguiente la misma "tabla simple" es definida pero esta vez con celdas de encabezado:

Código <table border="1" summary="Ejemplo de tabla simple con celdas de encabezado."> <tr> <th>Columna 1</th> <th>Columna 2</th> <th>Columna 3</th> </tr> <tr> <td>Celda 1</td> <td>Celda 2</td>

Visualización Columna 1 Celda 1 Celda 4 Colum Columna 3 na 2 Celda 2 Celda 3 Celda 5 Celda 6

n de celdas de una fila. es e omitidas. 4 y 7 son unificadas: Código Visualización . Código <table border="1" summary="Ejemplo de tabla simple con unificaci&oacute. ambos disponibles para celdas (tag HTML td y tag HTML th). donde el campo 1."> <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> Campo 1 Visualización Camp Campo 3 o2 Campos 4 y 5 Campo 6 Camp Campo 7 Campo 9 o8 Observa en el ejemplo anterior como una definición de celda unificando dos celdas.<td>Celda 3</td> </tr> <tr> <td>Celda 4</td> <td>Celda 5</td> <td>Celda 6</td> </tr> </table> Las características de estas celdas pueden ser logradas visualmente usando una celda simple con atributos de pr Unificando celdas Para algunas tablas puedes necesitar unificar dos o más celdas en una sola que tomará el lugar de aquellas afectadas. Estas unificaciones pueden lograrse mediante los atributos "rowspan" (para unificar verticalmente) y "colspan" (para unificar horizontalmente). Observa el siguiente ejemplo.

n de celdas de una columna."> <tr> <td width="15%" height="50">1</td> <td width="15%" height="50">2</td> <td width="35%" height="50">3</td> <td width="35%" height="50">4</td> </tr> <tr> <td width="15%">5</td> <td width="15%">6</td> <td width="35%">7</td> <td width="35%">8</td> </tr> <tr> <td width="15%">9</td> <td width="15%">10</td> <td width="35%">11</td> <td width="35%">12</td> </tr> Visualización 1 2 3 5 6 7 9 10 11 4 8 12 .<table border="1" summary="Ejemplo de tabla simple con unificaci&oacute."> <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> Cam Campo 3 po 2 Cam Campo unificado Campo 6 po 5 Cam Campo 9 po 8 Debes ser cuidadoso al unificar filas y columnas de modo de que no se encimen las celdas unificadas Código <table border="1" summary="Ejemplo de dimensionamiento en una tabla HTML.

5</td> <td>30.2</td> </tr> <tr> <td>Febrero</td> <td>10. el cuerpo o cuerpos (tag HTML tbody) y el pie (tag HTML tfoot).6</td> <td>5.5 31. En dicho caso. Cada uno de estos tags encierra un grupo de filas. Estas divisiones pueden ayudar a hacer las tablas más fáciles de comprender.5 30."> <thead> <tr> <th>Mes</th> <th>Vitamina A</th> <th>Vitamina B</th> <th>Vitamina C</th> </tr> </thead> <tfoot> <tr> <td>Todos</td> <td>32.8 42.4</td> </tr> Visualización Vita Vitami mina Vitamina C na A B 104.</table> Agrupación horizontal Una tabla HTML puede agruparse horizontalmente en tres grupos: el encabezado (tag HTML thead).8 21.8</td> <td>42. cuando una tabla larga se imprime). También es posible hacer dichas agrupaciones visibles con los atributos de la tabla.0 2 Enero 12.8</td> <td>104. Todos 32. los encabezados y pies pueden ser mostrados en cada página.n horizontal en una tabla HTML.6 5.5 5.2 Febrero 10. Estos atributos serán estudiados posteriormente en este mismo tutorial al definir el aspecto visual de una tabla. Código <table border="1" summary="Ejemplo de agrupaci&oacute. especialmente cuando deben ser mostradas en más de una página (por ejemplo.0</td> </tr> </tfoot> <tbody> <tr> <td>Enero</td> <td>12.4 Marzo 9.4 Mes .1</td> <td>10.1 10.2</td> <td>21.

5</td> <td>31.2 .4 5 5 Enero .5</td> <td>5.6</td> <td>5. 5. La agrupación puede llevarse a cabo usando dos tags: el tag HTML colgroup y el tag HTML col.8</td> <td>42." span="3" align="right" /> <tr> <td>Enero</td> <td>12.8 6 3 10 Febrero 0.4 ." /> <col style="width: 3em. 5.5</td> <td>31.5</td> <td>30.5 1 3 9.n de caracter&iacute.2</td> </tr> <tr> <td>Febrero</td> <td>10. Estos dos tags pueden ser usados independientemente o de manera conjunta. Marzo 1. Esto no solo permite agrupar columnas temáticamente.4</td> </tr> </tbody> </table> N Agrupación vertical La otra forma de agrupar celdas en una tabla es agrupando verticalmente.4</td> </tr> <tr> <td>Marzo</td> <td>9.1</td> <td>10. sino que además permite asignar atributos a columnas enteras de la tabla.5</td> Visualización 4 12 2. 10.<tr> <td>Marzo</td> <td>9. En el ejemplo siguiente insertaremos una tabla muy simple que definirá atributos para las columnas usando el tag HTML col: Código <table border="1" summary="Ejemplo de agrupaci&oacute."> <col style="width: 7em.sticas de columnas en una tabla HTML con el tag HTML col.

4</td> </tr> </table> usar el tag HTML colgroup: Código <table border="1" summary="Ejemplo de agrupaci&oacute. Incompleto 2 10 Incompleto .5</td> <td>30.4</td> <td>Incompleto</td> </tr> <tr> <td>Marzo</td> <td>9.5 5.4 .6 30 .1 31 9. Incompleto 2 10 Incompleto .4 5.n vertical en una tabla HTML con el tag HTML colgroup.5</td> <td>31.8</td> <td>42. 8 10.5 .6</td> <td>5."> <colgroup style="width: 6em" /> <colgroup style="width: 3em" span="3" align="right" /> <colgroup style="width: 7em" /> <tr> <td>Enero</td> <td>12. Febrero 5 Enero 42 . 8 10.2</td> <td>Incompleto</td> </tr> <tr> <td>Febrero</td> <td>10. Completo 4 12. Febrero 5 Marzo 42 .6 30 .5</td> <td>5.<td>5.1 5.1</td> <td>10.4</td> <td>Completo</td> </tr> </table> <td>Completo</td> </tr> </table> Enero Visualización 12.

Completo .5 4 Estilo Físico o estilo de los caracteres <B Negrita <b>hola! > </b> <I> Cursiva <U Subrayado > <TT Máquita de > escribir <i>hola! </i> <u>hola! </u> <tt>hola! </tt> hola! hola! hola! hola! Hiperenlaces El lector explora un documento en el Web haciendo clic sobre las zonas activas para asi hacer aparecer nuevos documentos. ancla de partida a un enlace interno Crea un enlace a un punto determinado del fichero en ejecución. sirve para especificar la partida y la llegada de un enlace hipertexto ( <A> ). por lo tanto. Un ancla. El atributo HREF. ancla de partida hacia un enlace externo Crea un enlace hacia un servidor situado en algún punto de Internet. La marca especifica el atributo HREF cuyo valor precisa el URL del documento a recuperar: zona_activable <A HREF="url_de_destino"> zona_activable</A> El atributo HREF. o hacia un documento propuesto por dicho servidor. El ancla de partida se define de la siguiente forma: .5 31 5.Marzo De 9. En HTML definimos una zona activa (que puede ser un texto o una imagen) que se asocia al URL (protocolo de direccionamiento de documentos) del documento que sustituirá al documento visualizado cuando se haga clic sobre esa zona. Para ello hay que colocar un ancla activa (ancla de partida) y un ancla inactiva (ancla de llegada).

lugar que se podrá acceder haciendo un clic sobre un ancla de partida.zona_activable_con_atributos_visuales <A HREF=#etiqueta>zona_activable_con_atributos_visuales</A> El atributo NAME. Esta primera marca regula la presentación general de la tabla mediante tres atributos: BORDER define el grosor del marco exterior CELLPADDING define el espacio alrededor del texto de una celda CELLSPACING define el espacio entre celdas WIDTH define la anchura de la tabla relativa a la anchura de la ventana del browser Ejemplo: A C B D <TABLE CELLPADDING=10 CELLSPACING=6 BORDER=6 BORDER> <TR><TD>A</TD> <TD>B</TD> </TR> <TR><TD>C</TD> <TD>D</TD> </TR> </TABLE> Alineación de imágenes La marca <IMG> admite el atributo ALIGN que permite situar la imagen en relación a la línea de texto actual y puede tomar los siguientes valores: . zona_no_activable_sin_atributos_visuales <A NAME="label">zona_no_activable_sin_atributos_visuales</A> Tablas La marca <TABLE> Una tabla se define entre las marcas <TABLE> y </TABLE>. ancla de llegada Define el ancla de llegada.

Ejemplo: Lo mas nuevo!!! <IMG SCR="new. Principio del formulario Final del formulario < input name="identidad" > El atributo TYPE asociado a la marca INPUT permite la selección del elemento de entrada.gif" align=middle> Lo mas nuevo!!! Lo mas nuevo!!! <IMG SCR="new.gif" align=top> Lo mas nuevo!!! Lo mas nuevo!!! <IMG SCR="new. el texto definido en value se escribirá en el botón: Principio <form> . Puede tomar los siguientes valores: • SUBMIT: desencadena el envío del formulario hacia el script.gif" align=bottom> Lo mas nuevo!!! Campos de entrada <INPUT> La marca <INPUT> servirá para definir campos para entrar un texto y botones que permiten escoger opciones. BOTTOM para alinear la base de la imagen. MIDDLE para alinear el centro de la imagen.TOP para alinear la parte superior de la imagen. Ejemplo: Definir una zona de entrada de texto simple.

del <input formulario Salida type="submit" value="Salida"> </form> Final del formulario • RESET: permite borrar los datos ya entrados: Principio del formulario Borrar <form> <input type="reset" value="Borrar"> </form> Final del formulario • PASSWORD: permite entrar una palabra clave de forma confidencial: Principio del formulario Final del formulario <form> <input type="password" name "pwd"> </form> • CHEKBOX: crea un bloque de botones que permiten una selección múltiple de opciones: Principio del formulario h <form> <input type="checkbox" name="micro" value="mac">Macintosh Macintos <input type="checkbox" name="micro" value="pc">PC </form> PC Final del formulario • RADIO: crea un bloque de botones que permiten una selección exclusiva entre varias opciones Principio del formulario CDROM Disque te Final del formulario <form> <input type="radio" name="media" value="cd" checked>CD-ROM <input type="radio" name="media" value="dk">Disquete </form> • HIDDEN: sirve para pasar datos adquiridos de un formulario a otro sin que aparezca nada en la pantalla <input type="hidden" name=nombre_de_variable value=valor_de_la_variable> .

estilo de párrafo <CITE> Cita <CODE> Código fuente <DFN> <EM> <KDB> Definido Enfatiza Palabra clave <SAMP> Ejemplo <STRON Resalta G> <VAR> Lista descriptiva DL. Define el inicio de la lista y englobará otras dos marcas (DT y DD) cuya función es caracterizar. La opción de seleción multiple se deriva de la presencia del atributo MULTIPLE.DD Variable El elemento DL abre una lista descriptiva.DT. Se programa con una lista en la que los items se especifican mediante la marca <OPTION>. .Campos de selección <SELECT> La marca <SELECT> permite generar listas de selección simple o de selección variable. El valor dado entonces al atributo SIZE da entonces el número de líneas visibles en la ventana. La presentación de la lista depende del atributo SIZE. la lista se interpreta como un menú desplegable (pop-list). designar cada uno de los elementos. Ejemplos: Menú despegable: <form> <select NAME="sede"> <option>Entrada indirecta <option>Entrada lateral <option SELECTED>Entrada directa </select> </form> Principio del formulario Entrada directa Final del formulario Estilos Lógicos . si su valor es inferior a 2 o está ausente. En caso contrario la lista se visualiza en una ventana con barra de desplazamiento. la parte definición y el propio elemento.

cifras y signos de FUENTE puntuación Conjunto de estilos que posee <dt>FUENTE<dd> Conjunto de estilos una categoría de caracteres que posee una categoría de caracteres (negrita...) </dl> .. Ejemplo: ASCII Codigo correspondiente: juego de caracteres que asigna valores numéricos estandar a las <dl compact> letras..El atributo COMPACT asocia a la marca DL (<DL COMPACT>) permitirá al browser mostrar en la misma línea el elemento y la primera línea del bloque.) (negrita. cursiva. cifras y signos de <dt>ASCII<dd> juego de caracteres puntuación que asigna valores numéricos estandar a las letras. cursiva.

You're Reading a Free Preview

Descarga
scribd
/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->