ORIGEN:

Fecha

3-2-2006

------------------------------------------------------

[Página Principal|Conceptos básicos] [Imágenes][Enlaces] [Tablas] [Funciones Especiales][Recomendaciones]


Tutorial HTML
4. Tablas


La información contenida en una tabla estará contenida entre las órdenes:

<TABLE BORDER=n> y </TABLE>

donde BORDER=n indica el grosor del borde de la tabla. Cuando n es 0 la tabla se visualizará sin borde y a medida que dicho número se incremente, el borde será de mayor grosor.

Cada vez que se inicie una fila de la tabla, introduciremos la orden <TR>.

Después de la orden <TR>, podemos etiquetar las columnas con la orden <TH>. Así, la secuencia:

<TABLE BORDER=1>
<TR><TH>Columna primera<TH>Columna segunda<TH>columna tercera
</TABLE>

crea una tabla con tres columnas, encabezándolas con el texto indicado:


Columna primera Columna segunda columna tercera


Podemos introducir una nueva fila (<TR>), fijando la información entre las distintas celdas por medio de la orden <TD>:

<TABLE BORDER=1>
<TR><TH>Comando<TH>función
<TR><TD>TR<TD>Siguiente fila
<TR><TD>TH<TD>Encabezado en columna siguiente
<TR><TD>TD<TD>Texto en la columna siguiente
</TABLE>


Comando función
TR Siguiente fila
TH Encabezado en la columna siguiente
TD Texto en la columna siguiente


Observa como los encabezamientos de las columnas (TH) figuran en negrita y centrados, mientras que el texto de las celdas (TD) aparece sin resaltar y alineado a la izquierda.

La alineación del texto en las celdas puede especificarse ampliando la orden <TD> según:

<TD Align="left|center|right">texto de la celda

alineación que sólo afectará a esa celda.

De igual forma, los encabezamientos de las columnas pueden alinearse según:

<TH Align="left|center|right">texto del encabezamiento de la columna

En la definición de una tabla, es conveniente determinar de antemano el número máximo de columnas que va a contener <TH>, ya que las celdas, dentro de una misma fila, pueden unirse.

La orden <TH COLSPAN="n"> o <TD COLSPAN="n"> une las n celdas siguientes en una sola, para situar un encabezado o el texto en la celda resultante, respectivamente.

Así, supongamos una tabla con un máximo de 4 columnas. La secuencia:

<TR><TH COLSPAN="4">Guía de contenidos de la asignatura

une las cuatro celdas en una fila e introduce el encabezado expuesto. De igual forma, la secuencia:

<TR><TH COLSPAN="2">Teóricos<TH COLSPAN="2">Prácticos

presenta dos celdas, como unión de otras dos. Pero mejor comprobarlo en el siguiente ejemplo, que resume y combina las órdenes de creación de tablas.

<TABLE BORDER=4>
<TR><TH COLSPAN="4">Guía de contenidos de la asignatura
<TR><TH COLSPAN="2">Teóricos<TH COLSPAN="2">Prácticos
<TR><TH>Tema<TH>Contenidos<TH>Tema<TH>Contenidos
<TR><TD>1<TD>Introducción general de la asignatura<TD>2<TD>Prácticas de observación
<TR><TD>2<TD>Metodología de observación<TD>3<TD>Prácticas de metodología de encuesta
<TR><TD ALIGN="center">3<TD>Metodología de encuesta<TD>4<TD>Prácticas de metodología experimental
<TR><TH COLSPAN="3" ALIGN="left">Tipo de Contenidos<TH>Créditos
<TR><TD COLSPAN="3">Teóricos<TD ALIGN="center">4
<TR><TD COLSPAN="3">Prácticos<TD ALIGN="center">2
</TABLE>


Guía de contenidos de la asignatura
Teóricos Prácticos
Tema Contenidos Tema Contenidos
1 Introducción general de la asignatura 2 Prácticas de observación
2 Metodología de observación 3 Prácticas de metodología de encuesta
3 Metodología de encuesta 4 Prácticas de metodología experimental
Tipo de Contenidos Créditos
Teóricos 4
Prácticos 2


El resultado de la tabla es el esperado, ya que en todo momento se ha dispuesto que el número total de columnas es de 4.

Las celdas de una tabla pueden contener todo tipo de información: enlaces, gráficos, listas, ... Las tablas también pueden centrarse en la pantalla, utilizando las órdenes <CENTER> y </CENTER> antes y después, respectivamente, del conjunto de órdenes de la tabla.

Un último ejemplo:

<CENTER>
<TABLE BORDER=9>
<TR><TH COLSPAN="2">Secciones del tutorial
<TR><TD>
<UL>
<LI>Comandos básicos
<LI>Imágenes
<LI>Enlaces
</UL>
<TD>
<UL>
<LI>Tablas
<LI>Funciones especiales
<LI>Recomendaciones
</UL>
<TR><TH COLSPAN="2">Introducción de imagenes en una tabla
<TR><TD>Icono de página por defecto<TD><IMG SRC="home.gif">
<TR><TH COLSPAN="2">Acceso a otros recursos
<TR><TD>WWW de la Universidad de Murcia<TD><A HREF="http://www.um.es">http://www.um.es</A>
</TABLE>


Secciones del tutorial 
  • Comandos básicos 
  • Imágenes 
  • Enlaces 
  • Tablas 
  • Funciones especiales 
  • Recomendaciones 
Introducción de imagenes en una tabla 
Icono de página por defecto 
Acceso a otros recursos 
WWW de la Universidad de Murciahttp://www.um.es/

[Página Principal|Conceptos básicos] [Imágenes][Enlaces] [Tablas] [Funciones Especiales][Recomendaciones]
(c) JuanJo López (4-96) - Facultad de Psicología - Universidad de Murcia (España)