Como crear una tabla

Las tablas permiten la representación de datos por filas y columnas, en forma tabular. La definición es muy flexible indicando solo los elementos que forman cada fila y columna, calculándose de forma automática el tamaño que deben tener las celdas. En una tabla podemos introducir todo tipo de elementos del lenguaje HTML como imagenes, enlaces, texto, listas, cabeceras, formularios, etc.

Para crear tablas usamos los siguientes códigos:

ATRIBUTOS

Atributo Utilidad
BORDER Especifica el borde que se dibujará alrededor de las celdas. Por defecto es cero, lo que no dibujará borde alguno.
CELLSPACING Define el número de pixels que separarán las celdas.
CELLPADDING Define el número de pixels que habrá entre el borde de una celda y su contenido.
WIDTH Especifica la anchura de la tabla. Puede estar tanto en pixels como en porcentaje de la anchura total disponible para él (pondremos "100%" si queremos que ocupe toda la anchura de la ventana).
ALIGN Alinea la tabla a izquierda (LEFT), derecha (RIGHT) o centro (CENTER).
BGCOLOR Aqui se especifiacara el color de fondo de la tabla o de una sola celda
BACKGROUND Igual que la anterior solo hay que elegir la imagen


Vamos ha ver un ejemplo:

<table border=10>
<tr><th>Primer Parcial</th><th>Segundo Parcial</th></tr>
<tr><th>5.0</th><th>3.0</th></tr>
<tr><th>2.0</th><th>4.2</th></tr>
<tr><th>3.5</th><th>1.3</th></tr>
</table>

Si introducimos este código obtendríamos el siguiente efecto:

Primer ParcialSegundo Parcial
5.03.0
2.04.2
3.51.3



Uno de los aspectos más interesantes de una tabla es que nos permite aprovechar todo lo visto anteriormente.

TABLAS Y VÍNCULOS

Lista de mis buscadores favoritos
altavista yahoo
<TABLE BORDER>
 <TR>
 <TD COLSPAN=2> Lista de mis buscadores favoritos </TD>
 </TR>
 <TR>
 <TD> <A HREF="http://www.altavista.com">altavista </A></TD>
 <TD>
 <A HREF="http://www.yahoo.com">yahoo</A></TD>		
  </TR>
</TABLE>
TABLAS E IMAGENES

Imágenes en celdas

A su izquierda, una flor 
y a su derecha una manzana 

 

<TABLE BORDER>
	<TR>
		<TD> <IMG SRC="Manzanita.gif"></TD>
		<TD> A su izquierda, un Corazon </TD>
	</TR>

	<TR>
		<TD> y a su derecha un perro</TD>
		<TD> <IMG SRC="Flor Balanca.gif"> </TD>
	</TR>

</TABLE>

Imágenes como fondo de las tablas

<TABLE BORDER=2 BACKGROUND="24.gif">
	<TD><IMG SRC="Flor Blanca.gif"></TD>
		<TD> A su izquierda, una flor </TD>
	</TR>

	<TR>
		<TD> y a su derecha una manzana</TD>
		<TD> <IMG SRC="Manzanita.gif"> </TD>
	</TR>

</TABLE>
A su izquierda, una flor 
y a su derecha una manzana 

 

Tablas de línea expandida <ROWSPAN>

<TABLE BORDER>
<TR>
<TD> Item 1</TD>
<TD ROWSPAN=2>Item 2</TD>
<TD> Item 3</TD>
</TR>
<TR>
<TD> Item 4</TD> <TD> Item 5</TD>
</TR>
</TABLE>

Tabla de columna expandida <COLSPAN>

<TABLE BORDER>
<TR>
<TD>Item 1</TD>
<TD COLSPAN=2>Item 2</TD>
</TR>
<TR>
<TD>Item 3</TD> <TD>Item 4</TD> <TD>Item 5</TD>
</TR>
</TABLE>

El cual se vera asi:

Item 1 Item 2 Item 3
Item 4 Item 5


Colores en las tablas

<TABLE BORDER>
<TR><TD BGCOLOR="RED">Texto ROJO</TD>
<TD BGCOLOR="green">Texto VERDE</TD>
</TR> <TD BGCOLOR="YELLOW">Texto AMARILLO</TD>
</TR>
</TABLE>

El cual se veria asi:

Texto ROJO Texto VERDE
Texto AZUL Texto AMARILLO


Tablas con titulo<CAPTION>

<TABLE BORDER>
<CAPTION ALIGN=top># de dias</CAPTION> <TH>Enero</TH>
<TH>Febrero</TH>
<TH>Marzo</TH>
</TR>
<TR>
<TD>10</TD>
<TD>20</TD>
<TD>30</TD> </TABLE>

El cual se vería así:

# de dias
Enero Febrero Marzo
10 20 30

 

 

Fundamentos del lenguaje de programación de web HTML Encabezamiento titulo y cuerpo del documento Otros tabas diferentes Caracteres especiales para incluir en ele documento html todos los codigos de los colores en exadecimal Parrafos salto de linea parrafos horizontales LISTAS TABLAS PARA INSERTAR EN LA WEB Links hacia otras paginas web dentro de tu web o en Internet Insertqar imagenes en la web Formularios para que tus visitantes se comuniquen con Vd. via E-Mail y lleguen a su correo Construir frames para tus páginas web Para insertar videos Applets de Java o animaciones de flash PARA PRACTICAR CON LOS CODIGOS CONTENIDOS EN ESTE MANUAL el sisteme es sencillo copiar el codigo y pegar luego darle a prewie Diseños de webs Cybercafes locutorios  proyectos para internet Recursos gratuitos para webmasters o que pretendan serlo Ofertas especiales de diseños unicos Contacte con nosotros para realizar un buen proyecto en La Red Aqui su publicidad en la Red 100% efectiva y garantizada Juegos para que insertes en tu web o juegues en linea Con este editor se puede directamente generar una pagina web en linea o experimentar con el HTML Las Metatags son importantes para que visiten nuestras paginas los buscadores aqui podeis crearlas en linea facilmente Archivos de flash libres para websites, faciles de configurar Applets de libre distribución para websites Juegos en Javascript, Java y Flash, para que pongas en tu Web o juegues en linea gratuitos Efectos con Imagenes de vampiros en Javascript y mas recursos Archivos de flash gratuitos para insertar en sitios web Applets gratuitos y faciles de configurar para dar vistosidad a páginas web Con este Editor manual se puede directamente generar una página web en linea experimentando con los ejemplos y recursos tambien en linea  del tutorial que lo acompaña para hacer webs facilmente Utilidades gratuitas para diseño de páginas web Chat Irc con diversos canales y muchas opciones de configuración puedes tambien descargartelo e instalarlo en tu página web Este es un manual sobre todos los principios del lenguaje de diseño de paginas web HTML con muchos ejemplos practicos y editor HTML incluido en linea para precticar en este lenguaje Los mejores Juegos abandoware de la Red, escogidos solo los mejores por su gran calidad Colección de fondos para web o escritorio y más utilidades gratuitas Amplia colección de Gifs animados para sitios web totalmente optimizados para que descarguen rápido en tus páginas Ejemplos y codigos de Javascript para páginas web Musica Mp3, flash, Midi, todo lo relacionado con la música se da cita en esta página