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

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

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

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

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

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 ejecución.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. sirve para especificar la partida y la llegada de un enlace hipertexto ( <A> ). El ancla de partida se define de la siguiente forma: . Un ancla. El atributo HREF.5 31 5. 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. ancla de partida hacia un enlace externo Crea un enlace hacia un servidor situado en algún punto de Internet.Marzo De 9. Completo . por lo tanto. o hacia un documento propuesto por dicho servidor. Para ello hay que colocar un ancla activa (ancla de partida) y un ancla inactiva (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>. lugar que se podrá acceder haciendo un clic sobre un ancla de partida. 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: . ancla de llegada Define el ancla de llegada.zona_activable_con_atributos_visuales <A HREF=#etiqueta>zona_activable_con_atributos_visuales</A> El atributo NAME.

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. 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.TOP para alinear la parte superior de la imagen.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> . Ejemplo: Lo mas nuevo!!! <IMG SCR="new. BOTTOM para alinear la base de la imagen.

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 opción de seleción 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 Lógicos . . 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. En caso contrario la lista se visualiza en una ventana con barra de desplazamiento. 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. la lista se interpreta como un menú desplegable (pop-list). Define el inicio de la lista y englobará otras dos marcas (DT y DD) cuya función es caracterizar.DD Variable El elemento DL abre una lista descriptiva. designar cada uno de los elementos. 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. si su valor es inferior a 2 o está ausente. la parte definición y el propio elemento.DT.

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

Sign up to vote on this title
UsefulNot useful