Tablas y Características
Las tablas en html son muy parecidas a las que se utilizan en el procesador de textos de Word, también están formadas por renglones y columnas y a la intersección de estas también se le llama celda.
Dentro de una celda podemos colocar texto, imágenes o hipervínculos, por lo que en una tabla podemos presentar información en varias columnas.
Crear Tabla
Para definir una tabla vamos a utilizar las etiquetas <TABLE>...</TABLE>, que definirán el principio y el fin de la tabla, y todo lo que escribamos dentro de esta área pertenecerá a la tabla.
Filas
Para delimitar las filas se utilizan las etiquetas <TR>...</TR>, es muy importante mencionar que las filas están compuestas por celdas.
Celdas
Dentro de cada fila debemos delimitar el principio y el fin de cada celda haciendo uso de las etiquetas <TD>...</TD>, y lo que escribamos entre estas etiquetas es lo que se va a mostrar dentro de la celda.
<TABLE>
<TR>
<TD>Celda 1 Fila 1</TD>
<TD>Celda 2 Fila 1</TD>
<TD>Celda 3 Fila 1</TD>
</TR>
<TR>
<TD>Celda 1 Fila 2</TD>
<TD>Celda 2 Fila 2</TD>
<TD>Celda 3 Fila 2</TD>
</TR>
</TABLE>
Bordes
Para trazar lineas de contorno alrededor de las celdas, es necesario colocar el atributo BORDER dentro de la etiqueta </TABLE>, de la siguiente forma:
<TABLE BORDER="n">
Border nos permite indicar el grosor que va a tener el contorno de la tabla sin modificar el contorno de las celdas.
Donde "n" es el grosor de la tabla en pixeles. Si "n" es igual a 0 no se mostraran bordes.
Encabezados
Podemos decir que los encabezados son celdas situados en la primera fila o en la primera columna de la tabla.
Html nos brinda las etiquetas <TH>...</TH> que engloban los encabezados, es decir todo lo que escribamos dentro de esas etiquetas se mostrara mas resaltado y centrado con respecto a la celda.
En columnas:
<TABLE>
<TR>
<TH>Encabezado 1</TH>
<TH>Encabezado 2</TH>
<TH>Encabezado 3</TH>
</TR>
<TR>
<TD>Celda 1 Fila 2</TD>
<TD>Celda 2 Fila 2</TD>
<TD>Celda 3 Fila 2</TD>
</TR>
</TABLE>
En renglones:
<TABLE>
<TR>
<TH>Encabezado 1</TH>
<TD>Celda 1 Fila 1</TD>
<TD>Celda 2 Fila 1</TD>
</TR>
<TR>
<TH>Encabezado 2</TH>
<TD>Celda 1 Fila 2</TD>
<TD>Celda 2 Fila 2</TD>
</TR>
</TABLE>
Títulos
Ademas de os encabezados de la tabla podemos colocar títulos, es decir un pequeño texto en la parte superior que describa el contenido de la tabla.
Para colocar un titulo utilizaremos las etiquetas <CAPTION>...</CAPTION>. de acuerdo con el siguiente formato:
<TABLE>
<CAPTION>
<B>Este es el titulo de mi tabla utilizando CAPTION</B>
</CAPTION>
<TR>
<TD>Celda 1 Fila 1</TD>
<TD>Celda 2 Fila 1</TD>
<TD>Celda 3 Fila 1</TD>
</TR>
<TR>
<TD>Celda 1 Fila 2</TD>
<TD>Celda 2 Fila 2</TD>
<TD>Celda 3 Fila 2</TD>
</TR>
</TABLE>
Dimensiones
Hasta ahora, las dimensiones de la tabla han sido las que ha definido el navegador de Internet, pero se pueden variar y no nada mas las de la tabla, si no también las de las celdas.
Podemos establecer el alto y el ancho de la tabla, con los atributos HEIGHT y WIDTH, de acuerdo con la siguiente estructura.
<TABLE HEIGHT="n" WIDTH="n">
Donde "n" es el numero de pixeles o bien una cantidad en porcentaje (%) de pantalla.
Es importante aclarar que cuando se dan las dimensiones de la tabla en porcentaje (%), si se hace mas grande o mas pequeña la ventana del navegador la tabla modifica su tamaño adaptándose a las nuevas dimensiones de la ventana, pero si se dan las dimensiones de la tabla en pixeles, el tamaño de la tabla no varia.
<TABLE HEIGHT=60% WIDTH=60%>
<CAPTION>
<B>Este es el titulo de mi tabla utilizando CAPTION</B>
</CAPTION>
<TR>
<TD>Celda 1 Fila 1</TD>
<TD>Celda 2 Fila 1</TD>
<TD>Celda 3 Fila 1</TD>
</TR>
<TR>
<TD>Celda 1 Fila 2</TD>
<TD>Celda 2 Fila 2</TD>
<TD>Celda 3 Fila 2</TD>
</TR>
</TABLE>
Alto y Ancho de las celdas:
<TABLE>
<CAPTION>
<B>Este es el titulo de mi tabla utilizando CAPTION</B>
</CAPTION>
<TR>
<TD WIDTH=50% HEIGHT=60%>Celda 1 Fila 1</TD>
<TD WIDTH=50% HEIGHT=60%>Celda 2 Fila 1</TD>
<TD WIDTH=50% HEIGHT=60%>Celda 3 Fila 1</TD>
</TR>
</TABLE>
Espacio entre celdas:
<TABLE BORDER=3 HEIGHT=60% WIDTH=60% CELLSPACING=10>
<CAPTION>
<B>Este es el titulo de mi tabla utilizando CAPTION</B>
</CAPTION>
<TR>
<TD>Celda 1 Fila 1</TD>
<TD>Celda 2 Fila 1</TD>
<TD>Celda 3 Fila 1</TD>
</TR>
<TR>
<TD>Celda 1 Fila 2</TD>
<TD>Celda 2 Fila 2</TD>
<TD>Celda 3 Fila 2</TD>
</TR>
<TR>
<TD>Celda 1 Fila 3</TD>
<TD>Celda 2 Fila 3</TD>
<TD>Celda 3 Fila 3</TD>
</TR>
</TABLE>
Espacio entre celdas y texto:
<TABLE BORDER=3 HEIGHT=60% WIDTH=60% CELLSPACING=10 CELLPADDING=18>
<CAPTION>
<B>Este es el titulo de mi tabla utilizando CAPTION</B>
</CAPTION>
<TR>
<TD>Celda 1 Fila 1</TD>
<TD>Celda 2 Fila 1</TD>
<TD>Celda 3 Fila 1</TD>
</TR>
<TR>
<TD>Celda 1 Fila 2</TD>
<TD>Celda 2 Fila 2</TD>
<TD>Celda 3 Fila 2</TD>
</TR>
<TR>
<TD>Celda 1 Fila 3</TD>
<TD>Celda 2 Fila 3</TD>
<TD>Celda 3 Fila 3</TD>
</TR>
</TABLE>
Alineación de tablas:
<TABLE="alineación">
Donde "alineación" puede tomar alguno de los siguientes valores:
CENTER
LEFT
RIGHT
Alineación en celdas (Horizontal)
<TD="alineación"> o <TH="alineación">
Donde "alineación" puede tomar alguno de los siguientes valores:
CENTER
LEFT
RIGHT
JUSTIFY
Alineación en celdas (Vertical)
<TD="alineación"> o <TH="alineación">
Donde "alineación" puede tomar alguno de los siguientes valores:
TOP
MIDDLE
BOTTOM
JUSTIFY
No hay comentarios:
Publicar un comentario