miércoles, 18 de abril de 2012

Tablas en HTML


-->
Disponemos en HTML de un grupo de etiquetas que nos permite introducir texto en forma de tablas. Las etiquetas para ello son:

  • TABLE: marca el inicio y final de la tabla.
  • TR: marca el inicio y final de una fila.
  • TH: marca el inicio y final de una celda de cabecera.
  • TD: marca el inicio y final de una celda.
  • CAPTION: permite insertar títulos en las tablas.

Una tabla simple queda conformada por el siguiente código:

<TABLE> 
<TR><TH>Cabecera 1</TH>...<TH>Cabecera n</TH></TR>
 <TR><TD>Celda 1.1</TD>...<TD>Celda n</TD></TR>
 ...
<TR><TD>Celda 1.1</TD>...<TD>Celda n</TD></TR>
<CAPTION>Título</CAPTION>
</TABLE>

Como podemos ver, la tabla queda envuelta dentro de una etiqueta TABLE. Para cada fila de la tabla debemos envolver esta fila entre las etiquetas  <TR></TR>. En cada fila tenemos dos opciones para mostrar las celdas: podemos envolverlas entre etiquetas o entre etiquetas . La diferencia entre ellas es que la primera selecciona un tipo de letra negrilla y centra la columna.

9.1 Etiqueta  TABLE

La etiqueta TABLE tiene algunos atributos que nos permiten especificar más concretamente el formato que queremos darle a la tabla.

  • BORDER: nos indica el tamaño de los bordes de la celda.
  • CELLSPACING: nos indica el tamaño en puntos del espacio entre celdas.
  • CELLPADDING: nos indica el tamaño en puntos entre el contenido de una celda y los bordes.
  • WIDTH: especifica el ancho de la tabla. Puede estar tanto en puntos como con relación al porcentaje de la anchura total disponible. Por ejemplo, 100% indica toda la ventana del navegador.
  • ALIGN: alinea la tabla respecto a la página, a la izquierda (LEFT), a la derecha (RIGHT) o al centro (CENTER).
  • BGCOLOR: especifica el color de fondo de la tabla.

9.2.- Etiqueta TR

La etiqueta TR nos permite introducir las diferentes filas que componen una tabla. TR presenta los siguientes atributos:

  • ALIGN: alinea el contenido de las celdas de la fila horizontalmente a izquierda (LEFT), derecha (RIGHT) o centro (CENTER).
  • VALIGN: alinea el contenido de las celdas de la fila verticalmente arriba (TOP), abajo (BOTTOM) o centro (MIDDLE).
  • BGCOLOR: especifica el color de fondo de la fila.



9.3.- Etiquetas TD y TH

Las etiquetas TD y TH nos permite introducir las celdas que formarán la fila en la que se encuentran. La diferencia principal entre ellas estriba en que TH centra horizontalmente el contenido de la celda y lo muestra en negrillas. Estas dos etiquetas pueden presentar los siguientes atributos:

  • ALIGN: alinea el contenido de las celdas de la fila horizontalmente a izquierda (LEFT), derecha (RIGHT) o centro (CENTER).
  • VALIGN: alinea el contenido de las celdas de la fila verticalmente: arriba (TOP), abajo (BOTTOM) o centro (MIDDLE).
  • BGCOLOR: especifica el color de fondo de la celda.
  • WIDTH: especifica el ancho de la celda, en puntos o porcentualmente. En este último caso hay que tener en cuenta que se refiere al ancho de la tabla, no de la ventana.
  • NOWRAP: impide que en el interior de las celdas se divida la línea por espacios.
  • COLSPAN: específica cuántas celdas, incluyendo esta, se unirán hacia la derecha para formar una sola. Si COLSPAN es cero, todas las celdas se unirán a la derecha.
  • ROWSPAN: especifica el número de celdas de la columna situadas debajo de la actual que se unen a ésta.

9.4.- Etiqueta CAPTION

Nos permite añadir una leyenda o título centrado sobre o debajo de una tabla. Disponemos de un solo atributo:

ALIGN: nos indica dónde se situará el CAPTION respecto a la tabla, siendo los posibles valores: TOP, que la sitúa sobre la tabla y BOTTOM, que la sitúa debajo de ella.

CODIGO DE TABLAS:


<HTML>
<HEAD>
<TITLE>Título del documento</TITLE>
</HEAD>
<BODY>
<TABLE BORDER=1>
<TR>
<TD COLSPAN=2>1,1 y 1,2</TD>
<TD>1,3
</TR>
<TR>
<TD ROWSPAN=2>2,1 y 3,1</TD>
<TD>2,2
<TD>2,3
</TR>
<TR>
<TD>3,2</TD>
<TD>3,3</TD>
</TR>
<CAPTION ALIGN=bottom>Tabla Simple</CAPTION>
</TABLE>
<HR> <!-- Regla horizontal -->
<TABLE BORDER=0 CELLSPACING=0 BGCOLOR=#0000FF>
<TR><TD>
<TABLE BORDER=0 CELLSPACING=1 CELLPADDING=2WIDTH=400 BGCOLOR=#FFFFFF>
<TR>
<TH><IMG SRC="logo.gif"></TH>
<TH>Abril</TH>
<TH>Mayo</TH>
<TH>Junio</TH>
<TH>Julio</TH>
</TR>
<TR>
<TD BGCOLOR=#A0A0A0>Vehículos</TD>
<TD>22</TD>
<TD>23</TD>.
<TD BGCOLOR=#FFa0a0>3</TD>
<TD>29</TD>
</TR>
<TR>
<TD BGCOLOR=#A0A0A0>Visitantes</TD>
<TD>1234</TD>
<TD>1537</TD>
<TD BGCOLOR=#FFa0a0>7</TD>
<TD>1930</TD>
</TR>
<TR>
<TD BGCOLOR=#A0A0A0>Ingresos</TD>
<TD>11000</TD>
<TD>13000</TD>
<TD BGCOLOR=#FF4040>-500</TD>
<TD BGCOLOR=#a0a0FF>60930</TD>
</TR>
</TABLE>
</TD></TR>
</TABLE>
</BODY>
</HTML>

Podemos ver en la imagen dos tablas de HTML: