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

donde el campo 1. Observa el siguiente ejemplo. Código <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 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. 4 y 7 son unificadas: Código Visualización . es e omitidas. ambos disponibles para celdas (tag HTML td y tag HTML th). Estas unificaciones pueden lograrse mediante los atributos "rowspan" (para unificar verticalmente) y "colspan" (para unificar horizontalmente).

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

</table> Agrupación horizontal Una tabla HTML puede agruparse horizontalmente en tres grupos: el encabezado (tag HTML thead).8</td> <td>104. especialmente cuando deben ser mostradas en más de una página (por ejemplo.8 42. cuando una tabla larga se imprime).4 Marzo 9."> <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. Estos atributos serán estudiados posteriormente en este mismo tutorial al definir el aspecto visual de una tabla. En dicho caso. el cuerpo o cuerpos (tag HTML tbody) y el pie (tag HTML tfoot). los encabezados y pies pueden ser mostrados en cada página. Todos 32.2</td> </tr> <tr> <td>Febrero</td> <td>10.6 5.5 31.1</td> <td>10.8</td> <td>42.5</td> <td>30.6</td> <td>5.2 Febrero 10.0</td> </tr> </tfoot> <tbody> <tr> <td>Enero</td> <td>12. Código <table border="1" summary="Ejemplo de agrupaci&oacute.2</td> <td>21. Estas divisiones pueden ayudar a hacer las tablas más fáciles de comprender.5 30. También es posible hacer dichas agrupaciones visibles con los atributos de la tabla.n horizontal en una tabla HTML. Cada uno de estos tags encierra un grupo de filas.0 2 Enero 12.1 10.5 5.8 21.4</td> </tr> Visualización Vita Vitami mina Vitamina C na A B 104.4 Mes .

4</td> </tr> <tr> <td>Marzo</td> <td>9. 5.8 6 3 10 Febrero 0.n de caracter&iacute.5</td> <td>5. 10.8</td> <td>42. Estos dos tags pueden ser usados independientemente o de manera conjunta.4 .4 5 5 Enero . sino que además permite asignar atributos a columnas enteras de la tabla. La agrupación puede llevarse a cabo usando dos tags: el tag HTML colgroup y el tag HTML col.5</td> <td>30." /> <col style="width: 3em."> <col style="width: 7em.5 1 3 9.<tr> <td>Marzo</td> <td>9." span="3" align="right" /> <tr> <td>Enero</td> <td>12. Marzo 1.5</td> Visualización 4 12 2.6</td> <td>5.5</td> <td>31.sticas de columnas en una tabla HTML con el tag HTML col. Esto no solo permite agrupar columnas temáticamente.1</td> <td>10. 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.2 .4</td> </tr> </tbody> </table> N Agrupación vertical La otra forma de agrupar celdas en una tabla es agrupando verticalmente.2</td> </tr> <tr> <td>Febrero</td> <td>10.5</td> <td>31. 5.

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

Marzo De 9. ancla de partida hacia un enlace externo Crea un enlace hacia un servidor situado en algún punto de Internet. El ancla de partida se define de la siguiente forma: . El atributo HREF.5 31 5. o hacia un documento propuesto por dicho servidor. sirve para especificar la partida y la llegada de un enlace hipertexto ( <A> ). 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. por lo tanto. Para ello hay que colocar un ancla activa (ancla de partida) y un ancla inactiva (ancla de llegada). ancla de partida a un enlace interno Crea un enlace a un punto determinado del fichero en ejecución. 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.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. Completo .

lugar que se podrá acceder haciendo un clic sobre un ancla de partida. ancla de llegada Define el ancla de llegada. 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 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_activable_con_atributos_visuales <A HREF=#etiqueta>zona_activable_con_atributos_visuales</A> El atributo NAME.

el texto definido en value se escribirá en el botón: Principio <form> . BOTTOM para alinear la base de la imagen.TOP para alinear la parte superior de la imagen. 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. 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. Ejemplo: Definir una zona de entrada de texto simple. MIDDLE para alinear el centro de la imagen. 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.

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

la lista se interpreta como un menú desplegable (pop-list). 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. 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 .Campos de selección <SELECT> La marca <SELECT> permite generar listas de selección simple o de selección variable. La presentación de la lista depende del atributo SIZE.DT. . En caso contrario la lista se visualiza en una ventana con barra de desplazamiento. Define el inicio de la lista y englobará otras dos marcas (DT y DD) cuya función es caracterizar. si su valor es inferior a 2 o está ausente. El valor dado entonces al atributo SIZE da entonces el número de líneas visibles en la ventana. la parte definición y el propio elemento. La opción de seleción multiple se deriva de la presencia del atributo MULTIPLE. Se programa con una lista en la que los items se especifican mediante la marca <OPTION>. designar cada uno de los elementos.DD Variable El elemento DL abre una lista descriptiva.

.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. Ejemplo: ASCII Codigo correspondiente: juego de caracteres que asigna valores numéricos estandar a las <dl compact> letras. cursiva.) (negrita.. cursiva... 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. cifras y signos de <dt>ASCII<dd> juego de caracteres puntuación que asigna valores numéricos estandar a las letras.) </dl> .

Sign up to vote on this title
UsefulNot useful