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

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

Estas divisiones pueden ayudar a hacer las tablas más fáciles de comprender.2</td> </tr> <tr> <td>Febrero</td> <td>10.4 Marzo 9. Todos 32.2</td> <td>21.6 5.4 Mes ."> <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. También es posible hacer dichas agrupaciones visibles con los atributos de la tabla.n horizontal en una tabla HTML. 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. el cuerpo o cuerpos (tag HTML tbody) y el pie (tag HTML tfoot).0</td> </tr> </tfoot> <tbody> <tr> <td>Enero</td> <td>12.</table> Agrupación horizontal Una tabla HTML puede agruparse horizontalmente en tres grupos: el encabezado (tag HTML thead).5</td> <td>30. En dicho caso.8</td> <td>104.0 2 Enero 12. cuando una tabla larga se imprime).5 30.2 Febrero 10.1</td> <td>10.5 31. Cada uno de estos tags encierra un grupo de filas.8</td> <td>42.1 10. los encabezados y pies pueden ser mostrados en cada página.4</td> </tr> Visualización Vita Vitami mina Vitamina C na A B 104.8 42.8 21.5 5. especialmente cuando deben ser mostradas en más de una página (por ejemplo.6</td> <td>5.

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

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

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

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: . 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>. lugar que se podrá acceder haciendo un clic sobre un ancla de partida.

Puede tomar los siguientes valores: • SUBMIT: desencadena el envío del formulario hacia el script.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: Definir una zona de entrada de texto simple. MIDDLE para alinear el centro de la imagen. BOTTOM para alinear la base de la imagen.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: Lo mas nuevo!!! <IMG SCR="new.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.gif" align=middle> Lo mas nuevo!!! Lo mas nuevo!!! <IMG SCR="new.

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

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

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

Sign up to vote on this title
UsefulNot useful