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

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

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

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

sticas de columnas en una tabla HTML con el tag HTML col. Estos dos tags pueden ser usados independientemente o de manera conjunta.5 1 3 9.n de caracter&iacute.5</td> <td>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.<tr> <td>Marzo</td> <td>9.2 . 5.5</td> <td>31.2</td> </tr> <tr> <td>Febrero</td> <td>10.4 5 5 Enero ." 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.6</td> <td>5.1</td> <td>10.8 6 3 10 Febrero 0. Marzo 1. sino que además permite asignar atributos a columnas enteras de la tabla." /> <col style="width: 3em.4</td> </tr> <tr> <td>Marzo</td> <td>9.4 . 5.8</td> <td>42."> <col style="width: 7em. Esto no solo permite agrupar columnas temáticamente. 10.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> Visualización 4 12 2.

8</td> <td>42. Incompleto 2 10 Incompleto .5 .1 31 9.4</td> <td>Completo</td> </tr> </table> <td>Completo</td> </tr> </table> Enero Visualización 12.5</td> <td>5.n vertical en una tabla HTML con el tag HTML colgroup.1</td> <td>10.6 30 .1 5.5</td> <td>31.4 .2</td> <td>Incompleto</td> </tr> <tr> <td>Febrero</td> <td>10. Febrero 5 Enero 42 .<td>5.4</td> </tr> </table> usar el tag HTML colgroup: Código <table border="1" summary="Ejemplo de agrupaci&oacute. Febrero 5 Marzo 42 .4 5.4</td> <td>Incompleto</td> </tr> <tr> <td>Marzo</td> <td>9. Completo 4 12.5</td> <td>30.6 30 . 8 10. 8 10. Incompleto 2 10 Incompleto .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.5 5.

Completo . El atributo HREF. El ancla de partida se define de la siguiente forma: .5 31 5. 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> ). 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. Un ancla. Para ello hay que colocar un ancla activa (ancla de partida) y un ancla inactiva (ancla de llegada). o hacia un documento propuesto por dicho servidor. 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.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. por lo tanto.Marzo De 9.

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

gif" align=middle> Lo mas nuevo!!! Lo mas nuevo!!! <IMG SCR="new. MIDDLE para alinear el centro 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.TOP para alinear la parte superior de la imagen. Puede tomar los siguientes valores: • SUBMIT: desencadena el envío del formulario hacia el script. Ejemplo: Lo mas nuevo!!! <IMG SCR="new.gif" align=top> Lo mas nuevo!!! 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. Ejemplo: Definir una zona de entrada de texto simple. el texto definido en value se escribirá en el botón: Principio <form> . 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> .

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

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