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:

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

Visualizacin 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 informacin 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 comnmente encontrado en el encabezado de una tabla. En el ejemplo siguiente la misma "tabla simple" es definida pero esta vez con celdas de encabezado:

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

Visualizacin Columna 1 Celda 1 Celda 4 Colum Columna 3 na 2 Celda 2 Celda 3 Celda 5 Celda 6

<td>Celda 3</td> </tr> <tr> <td>Celda 4</td> <td>Celda 5</td> <td>Celda 6</td> </tr> </table>
Las caractersticas 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 ms 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), ambos disponibles para celdas (tag HTML td y tag HTML th).

Cdigo <table border="1" summary="Ejemplo de tabla simple con unificaci&oacute;n de celdas de una fila."> <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

Visualizacin Camp Campo 3 o2 Campos 4 y 5 Campo 6 Camp Campo 7 Campo 9 o8

Observa en el ejemplo anterior como una definicin de celda unificando dos celdas, es e omitidas. Observa el siguiente ejemplo, donde el campo 1, 4 y 7 son unificadas:

Cdigo

Visualizacin

<table border="1" summary="Ejemplo de tabla simple con unificaci&oacute;n de celdas de una columna."> <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

Cdigo <table border="1" summary="Ejemplo de dimensionamiento en una tabla HTML."> <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>

Visualizacin

1 2 3 5 6 7 9 10 11

4 8 12

</table>

Agrupacin horizontal
Una tabla HTML puede agruparse horizontalmente en tres grupos: el encabezado (tag HTML thead), el cuerpo o cuerpos (tag HTML tbody) y el pie (tag HTML tfoot). Cada uno de estos tags encierra un grupo de filas. Estas divisiones pueden ayudar a hacer las tablas ms fciles de comprender, especialmente cuando deben ser mostradas en ms de una pgina (por ejemplo, cuando una tabla larga se imprime). En dicho caso, los encabezados y pies pueden ser mostrados en cada pgina. Tambin es posible hacer dichas agrupaciones visibles con los atributos de la tabla. Estos atributos sern estudiados posteriormente en este mismo tutorial al definir el aspecto visual de una tabla.

Cdigo <table border="1" summary="Ejemplo de agrupaci&oacute;n horizontal en una tabla HTML."> <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</td> <td>104.2</td> <td>21.0</td> </tr> </tfoot> <tbody> <tr> <td>Enero</td> <td>12.8</td> <td>42.6</td> <td>5.2</td> </tr> <tr> <td>Febrero</td> <td>10.5</td> <td>30.1</td> <td>10.4</td> </tr>

Visualizacin Vita Vitami mina Vitamina C na A B 104. Todos 32.8 21.0 2 Enero 12.8 42.6 5.2 Febrero 10.5 30.1 10.4 Marzo 9.5 31.5 5.4 Mes

<tr> <td>Marzo</td> <td>9.5</td> <td>31.5</td> <td>5.4</td> </tr> </tbody> </table>

N

Agrupacin vertical
La otra forma de agrupar celdas en una tabla es agrupando verticalmente. Esto no solo permite agrupar columnas temticamente, sino que adems permite asignar atributos a columnas enteras de la tabla. La agrupacin puede llevarse a cabo usando dos tags: el tag HTML colgroup y el tag HTML col. Estos dos tags pueden ser usados independientemente o de manera conjunta. En el ejemplo siguiente insertaremos una tabla muy simple que definir atributos para las columnas usando el tag HTML col:

Cdigo <table border="1" summary="Ejemplo de agrupaci&oacute;n de caracter&iacute;sticas de columnas en una tabla HTML con el tag HTML col."> <col style="width: 7em;" /> <col style="width: 3em;" span="3" align="right" /> <tr> <td>Enero</td> <td>12.8</td> <td>42.6</td> <td>5.2</td> </tr> <tr> <td>Febrero</td> <td>10.5</td> <td>30.1</td> <td>10.4</td> </tr> <tr> <td>Marzo</td> <td>9.5</td> <td>31.5</td>

Visualizacin 4 12 2. 5.2 .8 6 3 10 Febrero 0. 10.4 .5 1 3 9. Marzo 1. 5.4 5 5 Enero

<td>5.4</td> </tr> </table>

usar el tag HTML colgroup:

Cdigo <table border="1" summary="Ejemplo de agrupaci&oacute;n vertical en una tabla HTML con el tag HTML colgroup."> <colgroup style="width: 6em" /> <colgroup style="width: 3em" span="3" align="right" /> <colgroup style="width: 7em" /> <tr> <td>Enero</td> <td>12.8</td> <td>42.6</td> <td>5.2</td> <td>Incompleto</td> </tr> <tr> <td>Febrero</td> <td>10.5</td> <td>30.1</td> <td>10.4</td> <td>Incompleto</td> </tr> <tr> <td>Marzo</td> <td>9.5</td> <td>31.5</td> <td>5.4</td> <td>Completo</td> </tr> </table> <td>Completo</td> </tr> </table> Enero

Visualizacin 12. 8 10. Febrero 5 Marzo 42 .6 30 .1 31 9.5 .5 5. Incompleto 2 10 Incompleto .4 5. Completo 4

12. 8 10. Febrero 5 Enero

42 .6 30 .1

5. Incompleto 2 10 Incompleto .4

Marzo
De

9.5

31 5. Completo .5 4

Estilo Fsico o estilo de los caracteres <B Negrita <b>hola! > </b> <I> Cursiva <U Subrayado > <TT Mquita 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. 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. Un ancla, por lo tanto, sirve para especificar la partida y la llegada de un enlace hipertexto ( <A> ).
El atributo HREF, ancla de partida hacia un enlace externo

Crea un enlace hacia un servidor situado en algn punto de Internet, o hacia un documento propuesto por dicho servidor. 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, ancla de partida a un enlace interno

Crea un enlace a un punto determinado del fichero en ejecucin. Para ello hay que colocar un ancla activa (ancla de partida) y un ancla inactiva (ancla de llegada). El ancla de partida se define de la siguiente forma:

zona_activable_con_atributos_visuales <A HREF=#etiqueta>zona_activable_con_atributos_visuales</A> El atributo NAME, ancla de llegada

Define el ancla de llegada, lugar que se podr acceder haciendo un clic sobre un ancla de partida.
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>. Esta primera marca regula la presentacin 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>

Alineacin de imgenes

La marca <IMG> admite el atributo ALIGN que permite situar la imagen en relacin a la lnea de texto actual y puede tomar los siguientes valores:

TOP para alinear la parte superior de la imagen. MIDDLE para alinear el centro de la imagen. BOTTOM para alinear la base de la imagen. Ejemplo:

Lo mas nuevo!!!

<IMG SCR="new.gif" align=top> Lo mas nuevo!!!

Lo mas nuevo!!!

<IMG SCR="new.gif" align=middle> Lo mas nuevo!!!

Lo mas nuevo!!!

<IMG SCR="new.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.
Ejemplo: Definir una zona de entrada de texto simple.
Principio del formulario

Final del formulario

< input name="identidad" > El atributo TYPE asociado a la marca INPUT permite la seleccin del elemento de entrada. Puede tomar los siguientes valores: SUBMIT: desencadena el envo del formulario hacia el script; el texto definido en value se escribir en el botn:
Principio

<form>

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 seleccin mltiple de opciones:
Principio del formulario

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

Campos de seleccin <SELECT>

La marca <SELECT> permite generar listas de seleccin simple o de seleccin variable. Se programa con una lista en la que los items se especifican mediante la marca <OPTION>. La presentacin de la lista depende del atributo SIZE; si su valor es inferior a 2 o est ausente, la lista se interpreta como un men desplegable (pop-list). En caso contrario la lista se visualiza en una ventana con barra de desplazamiento. El valor dado entonces al atributo SIZE da entonces el nmero de lneas visibles en la ventana. La opcin de selecin multiple se deriva de la presencia del atributo MULTIPLE.
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 Lgicos , estilo de prrafo <CITE> Cita <CODE> Cdigo fuente <DFN> <EM> <KDB> Definido Enfatiza Palabra clave

<SAMP> Ejemplo <STRON Resalta G> <VAR> Lista descriptiva DL,DT,DD Variable

El elemento DL abre una lista descriptiva. Define el inicio de la lista y englobar otras dos marcas (DT y DD) cuya funcin es caracterizar, designar cada uno de los elementos, la parte definicin y el propio elemento.

El atributo COMPACT asocia a la marca DL (<DL COMPACT>) permitir al browser mostrar en la misma lnea el elemento y la primera lnea del bloque. Ejemplo:
ASCII Codigo correspondiente: juego de caracteres que asigna valores numricos estandar a las <dl compact> letras, cifras y signos de <dt>ASCII<dd> juego de caracteres puntuacin que asigna valores numricos estandar a las letras, cifras y signos de FUENTE puntuacin Conjunto de estilos que posee <dt>FUENTE<dd> Conjunto de estilos una categora de caracteres que posee una categora de caracteres (negrita, cursiva...) (negrita, cursiva...) </dl>