[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 Murcia	http://www.um.es

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