TABLAS
Una tabla es una manera muy compacta y clara de mostrar la información. Una tabla en HTML se entiende como un conjunto de filas (fila=horizontal), apiladas una sobre otra. Cada fila contiene a su vez un conjunto de celdas, puestas una al lado de la otra.

Una tabla se declara usando el comando <TABLE> ... </TABLE>. Dentro de la tabla, se usa <TR>.. </TR>para indicar una fila y dentro de una fila, <TD> ... </TD> para delimitar el contenido de una celda. El elemento de cierre de fila y de celda es optativo.

El texto incluido dentro de cada celda puede ser formateado con cualquiera de las etiqueta vistas anteriormente

Todos estos comandos aceptan numerosos modificadores. Se pueden, entre otras cosas, unir celdas, especificar la alineación del contenido de la celda, y mucho más.

Para entender mejor el comando <TABLE> ... </TABLE>, está disponible una muy amplia gama de ejemplos.

Ejemplo de tabla

Aquí se muestra una tabla muy simple:

<TABLE>
<TR><TD>Celda A1</TD><TD>Celda B1</TD><TD>Celda C1</TD></TR>
<TR><TD>Celda A2</TD><TD>Celda B2</TD><TD>Celda C2</TD></TR>
<TR><TD>Celda A3</TD><TD>Celda B3</TD><TD>Celda C3</TD></TR>
</TABLE>
Título de la tabla.
Es conveniente que las tablas tengan un título que las identifique y aclare su contenido. Aunque ese título puede ser contenido colocando texto formateado antes de la tabla, HTML dispone de la etiqueta <CAPTION> para darle nombre a la tabla, de la siguiente forma:

<TABLE>
<CAPTION> Nombre de la tabla </CAPTION>
……….
</TABLE>

Esta etiqueta tiene la ventaja que el texto formateado se coloca automáticamente en el centro de la anchura de la tabla.
Bordes de la tabla.
Para colocar bordes a una tabla en HTML se utiliza el modificador BORDER dentro de la etiqueta <TABLE>. La sintaxis es:

<TABLE BORDER="anchura">
……….
</TABLE>

donde anchura indica la anchura en pixels del borde exterior de la tabla.

El modificador BORDER coloca bordes externos e internos en la tabla, pero la anchura que se especifica solo afecta a los bordes externos.

El efecto de sombreado del borde exterior se produce cuando el modificador BORDER toma un valor superior a uno. Si queremos que el borde exterior de la tabla sea igual que los bordes interiores, debemos hacer BORDER=”1”.
Cabeceras de filas y de columnas.
La inclusión de cabeceras en cada fila y columna ayuda a comprender el contenido de la tabla.

No hay ninguna dificultad para hacer esto con las etiquetas que hemos visto. Sin embargo, existe una forma alternativa de indicar la cabecera de una fila o columna mediante la etiqueta <TH>. La desventaja de usar esta etiqueta es que el texto que va dentro de ella no admite formateado como el de las otras celdas.
Tamaño de la tabla.
Por defecto el tamaño de la tabla viene dado por el texto o los gráficos que contiene. Sin embargo, es posible que en ocasiones queramos cambiar la anchura de nuestra tabla.

La forma de establecer una anchura fija en una tabla es utilizar el modificador WIDTH dentro de la etiqueta <TABLE>. La sintaxis es:

<TABLE WIDTH="anchura"> ……… </TABLE>

Aquí anchura puede ser un número que especifique en pixels la anchura absoluta de la tabla, o bien un porcentaje que indique la anchura de la tabla en relación a la anchura del área del documento del navegador.

A pesar de que podemos especificar la anchura de la tabla, si el texto de las celdas ocupa una anchura mayor, la tabla tomará la anchura mínima para que el texto de las celdas pueda verse íntegramente.
Justificación de la tabla.
Por defecto, nuestra tabla quedará justificada a la izquierda. La forma de centrarla es mediante la etiqueta <CENTER>.
Espacio dentro de las celdas.
Es posible que queramos que nuestro texto no quede apretado dentro de las celdas, sino que exista más espacio entre los textos de las celdas contiguas de forma que pueda leerse mejor. Esto puede hacerse mediante los dos siguientes modificadores:

CELLPADDING: establece la distancia mínima en pixels entre los bordes de cada celda y el texto que va encerrado en ellas. Su valor por defecto es 1.
CELLSPACING: establece la anchura en pixels de los bordes de cada celda.
Forma de las celdas individuales.
Justificación del texto de las celdas.
HTML permite justificar horizontal y verticalmente el texto dentro de cada celda. Para ello implementa los modificadores ALIGN y VALIGN dentro de la etiqueta <TD>. La forma de hacerlo es:

<TABLE>
<TR>
<TD ALIGN=”horizontal” VALIGN=”vertical”>
…..
</TD>
</TR>
……….
</TABLE>

donde:
horizontal puede tomar los valores CENTER, LEFT y RIGHT. Por defecto vale LEFT.
vertical: puede tomar los valores TOP, MIDDLE, BOTTOM, y BASELINE. Por defecto vale CENTER.

Si queremos que una determinada justificación horizontal o vertical afecte a todas las celdas de una fila, podemos hacerlo incluyendo el modificador ALIGN o VALIGN dentro de la etiqueta <TR>.
Celdas de diferentes tamaños.
Por defecto, todas las celdas que constituyen una tabla en HTML tienen el mismo tamaño. Sin embargo, es posible establecer el tamaños de una determinada celda mediante dos modificadores de la etiqueta <TD>, que son WIDTH y HEIGHT:

WIDTH: especifica la anchura del texto en una celda concreta. Se puede especificar como valor absoluto o bien como relativo en forma de porcentaje de la anchura de la tabla.
HEIGHT: establece la altura de una celda individual.

No es posible usar los modificadores WIDTH y HEIGTH para aplicarlos a toda una fila. La única forma de hacerlo es poniendo en cada celda de la fila los valores correspondientes de WIDTH y HEIGHT.
Celdas irregulares.
Podemos desear que una de nuestras celdas ocupe varias filas y/o columnas. La forma de hacerlo es introducir los modificadores COLSPAN y ROWSPAN en la etiqueta <TD>:

COLSPAN= especifica la altura de una celda en concreta en función de la altura de las celdas adyacentes. Se especifica en número de celdas adyacentes.
ROWSPAN: especifica la anchura de una concreta en función del celdas que están debajo. Se especifica en número de celdas de debajo.
Color de cada celda.
Para especificar el color de cada celda de la tabla se utiliza el modificador BGCOLOR en la etiqueta <TD>. Como formato de colores se acepta el hexadecimal o una cadena de caracteres.
Texto en una solo línea.
Si hemos indicado la anchura de una celda y ésta es menor que el texto incluido en ella, y queremos que el texto no ocupe más líneas, sino que se amplíe la anchura de la celda, debemos añadir el modificador NOWRAP dentro de la etiqueta <TD>.

Ejemplo práctico nº7

<HTML>
<HEAD>
<TITLE>Ejemplo 7 - Tablas</TITLE>
</HEAD>

<BODY>
<CENTER><H1>Tablas</H1></CENTER>
<H2>Demostracion de COLSPAN y Encabezados</H2>
<TABLE WIDTH="100%" BORDER="1">
<TR>
<TH COLSPAN="2">Head1</TH>
<TH COLSPAN="2">Head2</TH>
</TR>
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD> <TD>D</TD>
</TR>
<TR>
<TD>E</TD> <TD>F</TD> <TD>G</TD> <TD>H</TD>
</TR>
</TABLE>

</BODY>
</HTML>

Guardamos el fichero de texto con el nombre ejemplo7.html y lo cargamos en el navegador.
EDITORES Y CONVERSORES
En el presente apartado se provee de algunos comentarios y reflexiones acerca del uso de herramientas automatizadas para la generación de páginas Web: editores y conversores.
Editores
Seguramente usted ha visto o conoce programas que pueden asistir a una persona en la creación de páginas Web, y quizás se ha preguntado: ¿ uso un editor o aprendo HTML ?

La respuesta que yo le daría es la misma que si usted me preguntara si es mejor saber aritmética o ocupar una calculadora: ambas cosas no se contraponen entre sí.

Un editor HTML es una gran ayuda al diseñador Web: brinda la posibilidad de disponer y ver la página mientras se crea, y de observar inmediatamente cómo aparecerán distribuidos los colores y los elementos dentro del documento, es una ayuda para recordar las marcas y sus atributos, sin embargo; puede resultar inadecuado por lo siguiente:

•    Poca flexibilidad, y en algunas ocasiones el código que generan en general es difícil de editar o mantener.
•    El conjunto de comandos que incorpora puede ser limitado, en caso de que sea un editor producido por alguna empresa que haga visualizadores, o puede estar obsoleto.
•    El HTML que generan está fuertemente orientado al formato físico, más que a la estructura, con lo cual se pierde universalidad en el documento.

Es recomendable comenzar por lo básico, procurando aprender HTML bien, creando documentos con editores de texto plano. Después si se desea se puede ocupar una combinación editor de texto plano más editor HTML para crear documentos, a fin de explotar al máximo las capacidades de ambos sistemas.

Los editores HTML se clasifican en dos tipos:

•    Wysiwyg "what you see is what you get": en ellos se puede ir viendo en pantalla inmediatamente lo que se va creando. son muy útiles para apreciar los colores y la disposición en pantalla de los elementos.
•    No Wysiwyg: ellos usualmente invocan una aplicación externa (un browser) para mostrar lo que se va creando. Son muy útiles para recordar los comandos HTML y sus atributos.

Existen editores mixtos: presentan la pantalla dividida en dos segmentos, uno con el código HTML y otro con el resultado final.

Por ejemplo, uno de los editores HTML Wysiwyg más completos es el FrontPage 98 de Microsoft (http://www.eu.microsoft.com/frontpage/), aunque es Wysiwyg, también permite trabajar en modo comando.
Conversores
Las herramientas de conversión permiten transformar un documento escrito en otro formato a un documento HTML.

El código HTML que generan es casi imposible de leer, debido a que hay muchas distinciones que existen en lenguajes de formateo de texto que no existen en HTML, y deben ser simuladas, con algún grado de truculencia.

¿Cuándo usarlos? cuando no hay otra alternativa, porque es inviable o ya se hizo un gran trabajo previo en otro sistema.

¿Cómo usarlos? la idea básica es simplificar al máximo el documento (eliminar las sangrías, uniformar los tamaños de letra, etc.) para luego pasar el conversor, generando un documento HTML.

Finalmente conviene revisar la salida usando un editor de texto, revisando que el código obtenido sea sintácticamente correcto, y dejando el documento lo suficientemente ordenado y legible como para que sea fácil de modificar al momento de realizar futuras actualizaciones.

Por ejemplo, el paquete ofimático Oficce 97 (Word, Excel, PowerPoint, ...) de Microsoft incorpora un conversor de documentos en formato Word a HTML. También el editor FrontPage 98, anteriormente mencionado, incorpora un conversor de distinto tipos de formato de documentos a HTML.
PUBLICAR LAS PÁGINAS EN INTERNET.
Hasta ahora sólo hemos realizado páginas qué no son visibles desde Internet, sino que solamente se pueden visualizar en modo local en nuestro.

Para publicar nuestras páginas en Internet para que sean accesibles por cualquier otro usuario de Internet debemos transferirlas a un servidor Web, para ello hay que realizar los siguientes pasos:

1.    Probar de forma local el correcto funcionamiento de las páginas creadas.
2.    Solicitar la apertura de una cuenta en dicho servidor Web.
3.    Transferirlas mediante FTP a la cuenta asignada en dicho servidor Web. Teniendo en cuenta que las páginas de deben transferir en modo ASCII, y los gráficos incluidos en las páginas en modo binario.
4. Probar desde Internet el acceso a dichas páginas.

Concretamente en la Universidad de Murcia. el Servicio de Informática ofrece a los Centros, Departamentos, Servicios, Grupos de trabajo e investigación universitarios la posibilidad de incorporar sus propias páginas de Web al servidor central de la Universidad de Murcia. Puede encontrar más información sobre este Servicio de Almacenamiento de páginas en Web en http://www.um.es/si/servicio/www/ind-www.html#et2
ESTRUCTURA DE UN DOCUMENTO
AYUDA PARA EL DEBER

Color del texto
El color del texto puede cambiarse mediante la utilización del atributo color de la etiqueta <font>. El color puede especificarse mediante un nombre de color o mediante una descripción RBG. Veamos un ejemplo:
<html>
        <head>
                <title>ejemplo de color</title>
        </head>
        <body>
                <font color=red>Color rojo</font>
                <font color=green>Color verde</font>
                <font color=#0000ff>Color azul</font>
        </body>
</html>
   




Tipo de fuente
El tipo de fuente se modifica mediante el atributo face de la etiqueta <font>. Si se especifica más de una el navegador utilizará la primera que esté disponible. Las fuentes por lo general varian entre navegadores y entre sistemas operativos, por lo que es conveniente utilizar varias para asegurarnos de que se utilizará alguna de las que deseemos. He aqui un ejemplo:
<html>
        <head>
                <title>ejemplo de tipos de fuentes</title>
        </head>
        <body>
                Fuente por defecto
                <font face="arial">Fuente Arial</font>
                <font face="times">Fuente Times</font>
                <font face="helvetica">Fuente Helvetica</font>
        </body>
</html>
Cabeceras (<h1>..<h6>)
Suelen utilizarse para identificar los titulos de las diferentes secciones de un documento. Suelen aparecer en negrita y con tamaños de letra variando desde muy grande para <h1> hasta muy pequeño para <h6>. El siguiente ejemplo los muestra todos para asi poder distinguir fácilmente los cambios entre ellos:
<html> <head> <title>ejemplo de cabeceras</title> </head> <body> <h1>Cabecera h1</h1> <h2>Cabecera h2</h2> <h3>Cabecera h3</h3> <h4>Cabecera h4</h4> <h5>Cabecera h5</h5> <h6>Cabecera h6</h6> </body> </html>